In my last post, I talked about Expressive HTML and the importance of writing your markup from the content out. This idea—that you start at a granular level and work your way outward, building context and meaning as you go—holds equally true as a methodology for web design.

Ever since attending last year’s Build Conference I’ve been using what I’ll call “The Modular Scale Method,” which is a technique I’ve found invaluable for building my designs from the content out.

We’ll talk about this method more in-depth in just a little while as we look briefly at a simple Cookbook application. But given that the modular scale concerns itself with typography—the most granular level of our content—it makes sense to start today with a review of a few articles I’ve written on the basic rules of good web typography, which you can find here:

• A Brief Primer On Typeface Selection
• Readability
• Legibility
• What is the purpose of Typography?
• What is Typography?

Modular Scales

I first encountered the idea of the “modular scale,” at least as it applies to typography, during my first read-through of Robert Bringhurst’s The Elements of Typographic Style.

I’ll freely admit that at the time my eyes simply glazed over this section of his book, most likely due to the fact that I was intimidated by the 2+ pages of complicated looking ratios presented within.

And though, according to Bringhurst, “The mathematics are not here to impose drudgery upon anyone,” to me, at the time, it just all seemed so complicated. And I suppose, at least to some degree, I still find it to be so.

Nonetheless, my appreciation of modular scales (and the benefits that a thoughtful application of them can provide) began about a year ago now, after a wonderful talk I saw Tim Brown give, titled More Perfect Typography.

If you haven’t heard this talk, and you are interested in the subject of web typography, I highly encourage you to take the time to watch it. It’s fascinating stuff.

I think one of the things that was so compelling about Tim’s talk was the way he reduced a decidedly complex set of ideas (a la Bringhurst) down into a simple methodology for typesetting on the web.

It is this methodology that I would like to explore today.

What’s a Modular Scale?

Well, it’s a pretty basic idea. We can see this fact evidenced by the axioms that are central to the examinations (of this approach to typesetting) made by both Bringhurst and Brown:

A modular scale, like a musical scale, is a prearranged set of harmonious proportions. Robert Bringhurst, The Elements of Typographic Style

A modular scale is a sequence of numbers that relate to one another in a meaningful way. Tim Brown, More Meaningful Typography

Simple, right? And, at its core, the idea is pretty basic. But, oddly enough, it’s quite easy to both under-estimate its implications and over-estimate its complexity (at least once you start to dig into it a bit). It's my hope to usher you all swiftly past this seeming paradox.

As you may know, the Golden Ratio is an irrational mathematical constant that is equal to approx: 1.61803398874989. Technically speaking, two amounts or quantities are said to “be in the Golden Ratio” if:

The ratio of the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one. —Wikipedia

Now, the reason I mention the Golden Ratio is because, throughout history, artists, architects, printers, typographers, musicians, furniture makers, anatomists, etc. have used such numerical relationships as a tool to develop harmonious proportions for their various works.

Interestingly, the Golden Ratio seems to have an almost universal human appeal. The Parthenon, to cite just one famous example, is known to exhibit proportions that approximate the Golden Ratio.

There are, of course, other famous ratios, many of which come form the realm of music theory, in which they are more commonly known as “intervals”—the measure of the ratio between the frequencies of two different notes.

Some of the better known musical intervals (and applicable to our cause here) are the:

• Perfect Fourth (4:3)
• Perfect Fifth (3:2)
• Perfect Octave (2:1)
• Major Third (5:4)
• Major Sixth (5:3)

What has any of this got to do with Web Design?

Just as musicians have employed the inherent magic of certain numerical relationships to lend consonance and/or dissonance to their musical scores, and just as architects, scribes, typographers, and craftsmen have used these ratios to lend humane or aesthetically pleasing proportions to their buildings, books, passages, and furniture so too can we [web professionals] use these numbers to satisfy the ends of our designs.

Recognizing type as the atomic element in web design affords us the opportunity to make better design decisions that resonate upward and outward into the experience. Tim Brown, More Meaningful Typography

In the same way that certain objects—a computer mouse for example, or a desk chair, even a spoon—are consistently produced at sizes that are comfortable to the human body/hand, certain proportions reappear in the creative output of humans throughout the centuries (and in cultures around the world) because they are similarly pleasing to our eyes, our sensibilities and our expectations for how things should look.

Moreover, many of these special numerical relationships occur naturally in “the structures of molecules, mineral crystals, soap bubbles, flowers” and the human body.

Using strands of numbers derived from such consonant ratios as The Perfect Fourth (4:3), The Perfect Fifth (3:2), and The Golden Ratio (1:1.618) (among others) we can generate predefined measurements that will allow us to establish hierarchy and lend pleasing harmonies to our compositions—harmonies that might otherwise be difficult, if not impossible, to find in layouts patched together through arbitrary guesswork alone.

Sizing and spacing type, like composing and performing music or applying paint to canvas, is largely concerned with intervals and differences. As the texture builds, precise relationships and very small discrepancies are easily perceived. Robert Bringhurst, The Elements of Typographic Style

What’s more, such a rational, systematic approach provides a reliable and resuable tool on which to base a myriad of difficult design decisions. In short, using modular scales to drive your designs can make the terror of the blank page (every designer’s sworn enemy) a little less stultifying.

How do we fly this Spaceship?

The two most important steps in implementing the “Modular Scale Method” are to:

1. Choose a scale.
2. Choose an important number.

Now hopefully some of you are wondering: how exactly does one go about choosing these values?

Using a modular scale on the web means choosing numbers from the scale for type sizes, line height, line length, margins, column widths, and more. Tim Brown, More Meaningful Typography

In establishing a reusable system based on meaningful relationships between numbers, we are conscientiously moving our decision making process away from the realm of the arbitrary, firmly supplanting it into the realm of the mathematical.

So it follows, that these values should be anything but arbitrary. But, is it immediately obvious how you might meaningfully choose one of these values?

In my personal experience, I most often struggle with choosing a scale, of which there are many to choose from.

Tips for choosing a scale

1. Consider the content you are designing for. What’s it about? Does it have any sort of cultural or historical reference? How about the typeface you've chosen?

   Scales, like the Golden Ratio or Perfect Fourth, have historical significance and cultural relevance. For instance, as mentioned previously, the Golden Section was a favorite mechanism for classical Greek and Renaissance mathematicians and architects, and scribes.

   In the 20th century, during the tail end of the Common Practice Period, harmony “built explicitly on fourths became important…and quartal harmony became an important means of expression by Debussy, Ravel and others.”

   By leveraging the historical or cultural context of your content or your chosen typeface, you can narrow down your choices considerably and insure that you are making a choice of scale that is conceptually aligned with your project.

2. Consider how much variation in type size you think you are going to need. Some scales feature larger increases between values—for instance an Octave (1:2). While others, like The Major Second (1:1.25), feature smaller increments.

   In the event that your project requires a good deal of typographic variety (maybe you’re using all 6 header levels) you’ll likely want to choose a scale that allows for more subtlety between steps.

3. Be a synesthete. Many of the ratios we’ve examined thus far find their roots in musical intervals. Consider playing sound clips of them. Do they evoke different feelings/moods in you? Are these feelings or moods some how in-line with the mood or feeling you are trying to convey with your design?

   

   In short, try to assign feelings to your scales based on what they sound like and make your selections accordingly.

   It sounds a little crazy, I know, but it is sure to present some interesting results:

   • For example, here is what a Perfect Fourth (4:3) sounds like.
   • And here is what a Major Second sounds like.

Choosing an important number

The value of your “Important Number”—what is effectively the prime mover of your modular scale—cannot be overlooked. Every number that is generated by the scale you choose will be based upon it.

This fact presents us with an amazing opportunity to design from the content out.

I’ve found that a variety of things can serve as an important number. The size at which caption text looks best, for instance, or a large number like the width of a piece of media—if the project at hand mandates ads or embedded videos, for instance—ensures that something about those elements resonates with the layout as a whole. Tim Brown, More Meaningful Typography

In the world of typesetting there exists a divide between “text” and “display” faces. For setting longer passages of type, you’ll want to use text faces: those fonts whose proportions and design details are suited to extended reading, on a screen, at relatively small sizes.

Unfortunately, it is a sad fact that, as a medium, the screen has a few shortcomings that can hamper designers, not the least of which is a question of resolution. Without diving too deeply into the technical limitations of low resolution media, suffice it to say that type size can have a tremendous impact on how well a given typeface will look.

Due to the process of rasterization and the limited resolution that most monitors possess, there are a very limited number of pixels that are available to represent letters at sufficiently small type sizes. As a general rule, bigger is better (there are more pixels with which to accurately render the outlines of your typeface).

And chances are, if you’ve spent the time to make an informed typeface selection, there will be a range of sizes (generally below 18-20px) at which your chosen typeface will just sing.

For example, let’s examine a type specimen for Verdana. Here we are presented with an overview of how our typeface renders at a myriad of different sizes. Immediately, we can begin to see the drastic difference between the way this typeface renders at say 9 pixels, and the way it renders at 16 pixels.

At a type size of just 9 points, Verdana begins to break down—there just aren’t enough pixels available to accurately approximate the vector outlines of the original letterforms. If you look closely it looks jagged, unkempt and worst of all, unreadable.

Conversely, at a size between 16-18px, we notice that the face looks considerably heavier, fuller in body and weight. The letterforms themselves are considerably less jagged and their shape is more pronounced.

For the purposes of our Cookbook design exercise, I've made a few assumptions based on personal experience. I envision that this application will be used in-situ (ever use a cookbook while cooking?) and decided that Verdana at a size of 16px (though perhaps at the very upper limit for this typeface, as it begins to drift apart at this size) would be best.

Given that this is an application that is likely to be read on a screen at a considerable distance, I felt that a large, open typeface, with clean forms, would lend itself well to the cause and contrast nicely with frantic mess I often find the kitchen to be.

Do the math

Here is what our simple cookbook application looks like currently, featuring a smattering of arbitrarily chosen type sizes and line-lengths:

In order to start using a “Modular Scale Method,” we must generate the resonate numbers of our scale. And to do this, all that is required is a little simple math:

We can now use our scale to implement some preliminary design changes such as:

1. Choosing a measure.
2. Choosing a line-height.
3. Choosing heading sizes.

It’s important to keep in mind that a modular scale is not a guarantee. It’s a design tool. And, like any tool, it’s just an aid.

A successful design will still rely, to large extent, on a designer’s eye and on his or her aesthetic sensibility and sensitivity to the needs of the project.

What a “Modular Scale Method” does present is a rational guideline (a set of meaningful constraints) that can help inform your decision making. As Tim Brown says:

Consider the scale’s numbers educated suggestions. Round them if you like (22.162 becomes 22). Combine them (3.56 + 16 = 19.56). Tim Brown, More Meaningful Typography

If you feel there is a need to do so, break from the scale entirely. Improvisation can lend (or reintroduce) the organic back into your design and in so doing allow you to create tension, asymmetry and originality.

For those of you who “need to see it to believe it,” Tim Brown has generously provided a couple finished examples which you can find here:

• Minion with Myriad Condensed
• Ambroise with Le Monde Sans

Also, this blog, and the 8th Light website itself, were designed using this method.

And with that I say: Go forth and Modularize!