We have all heard of the golden mean (also known as the golden ratio or golden section): the self-replicating page with a proportion of 1:1.618 that is said to be found in everything from the design of ancient Greek architecture to the growth patterns of plants.
This and other meaningful ratios rooted in geometry, music, nature, and history can be expressed as modular scales and put to work on the web.
Fig 1: A simple modular scale: 10@1:1.618
Fig 2: Our example page, designed using a modular scale.
A modular scale is a sequence of numbers that relate to one another in a meaningful way. Using the golden ratio, for example, we can produce values for a modular scale by multiplying by 1.618 to arrive at the next highest number, or dividing by 1.618 to arrive at the next number down.
By using culturally relevant, historically pleasing ratios to create modular scales and basing the measurements in our compositions on values from those scales, we can achieve a visual harmony not found in layouts that use arbitrary, conventional, or easily divisible numbers.
Let’s start by looking at what modular scales are, and how they apply to web design. Next, we’ll dive into this example and go over my reasons for starting with certain numbers, choosing particular proportions, and and applying my scale’s numbers to specific CSS measurements. Finally, we’ll think about how designing with modular scales fits into current workflows, and where we might go from here.
Modular scales and how they apply to web design#section2
A modular scale, like a musical scale, is a prearranged set of harmonious proportions.
—Robert Bringhurst
Making a modular scale is easy. You start with a ratio (for example, 1:1.618) and a number (like 10), then multiply and divide to get many resonant numbers:
- 10.000 * 1.618 = 16.180
- 16.180 * 1.618 = 26.179
- 26.179 * 1.618 = 42.358
- 42.358 * etc.
- 10.000 / 1.618 = 6.180
- 6.180 / 1.618 = 3.819
- 3.819 / 1.618 = 2.360
- 2.360 / etc.
I made a calculator to help us do this math. It has options for creating double-stranded modular scales like the one below, which require at least two starting ratios or two starting numbers to generate what amounts to two separate modular scales mashed together in sequence. Double-stranded scales tend to provide more measurement options (they include more numbers, and usually fill one another’s gaps).
Fig 3: A double-stranded modular scale: 10@1:1.618, 20@1:1.618
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. So it makes sense that modular scales are most effective when the inputs—the starting ratios and starting numbers that beget the entire scale—are meaningful to a project’s design, content, or both.
One way to ensure this effectiveness is to start with type. By choosing a text face at the beginning of a project—before making decisions about layout or typesetting—we can use the size at which body text looks most crisp as the basis for a project’s modular scale. If 16px Adobe Caslon is readable and renders well, we’ll multiply and divide from 16 to create our scale. Thus, an entire system of harmonious measurement can be grounded in a visual decision—body text size—that designers routinely make with confidence, and that resonates throughout the experience.
But of course, this starting number is only one element in a multi-stranded modular scale. In the next section, as we look at our example in detail, I’ll explain not only how I chose a starting type size, but also how I decided on a ratio and a second “important” number for this project’s modular scale.
Creating a modular scale for web design#section3
Our example began as an exploration in pairing Minion with Myriad Condensed, so my typeface choices were established. I had a text ready (a few thoughts on typesetting I’d been meaning to share), and I made a quick sketch to plan the composition. In a nutshell, I had the ingredients for web typesetting. Now, for the recipe.
Minion was to be my text face, so I looked carefully at its Web Font Specimen to find a size that would work for my design goals and look crisp. Sizing type on the web is tricky because of the limited resolution involved. One pixel of font-size up or down can completely change how a typeface—and thus a whole text—looks. But once I found the size I liked, 18px, I had a number upon which to base my modular scale. Next, I needed a ratio.
I chose the golden mean (1:1.618). It is a beautiful proportion with historical and cultural connections that make sense for the typefaces I’ve chosen and the text I’m setting. Although it is a contemporary design, Minion draws upon Renaissance ideals, in everything from its humanist structure to the ways in which parts of letters reveal a history in pen and ink.
Page and textblock proportions in Renaissance works were based on the golden mean, too, and because the subject of my text is about the craft of typesetting and looking to tradition for guidance, it made sense to use a proportion meaningful to our typographic roots.
Next, I took my text size (18) and ratio (1:1.618) and plugged them into the calculator at modularscale.com. I also decided to include a second, “important” number, because I wanted the flexibility of a double-stranded modular scale.
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.
To find my important number, I marked up the h2 (“Typesetting”) and applied some basic styles according to my sketch. I knew I wanted this headline to be large and have enough presence to anchor the composition, but I didn’t want it to be overpowering. So I played with the text a bit, and the resulting font-size, 190px, became my important number. Here’s the finished scale.
Now let’s look at the CSS I wrote to apply this scale’s numbers to actual measurements in my composition.
Applying a modular scale in web design#section4
Having marked up my text, and with my scale at my side, I applied CSS rules to our example, grabbing an exact number from my scale for each decision. Throughout the process, I made educated guesses that built a harmonious composition, one measurement at a time.
Let’s walk through the CSS. The declarations below have been streamlined so we can study modular scale math more easily; these rules all appear in the full CSS, but are organized differently (for reasons I explain at the end of this section).
/* ----------------------------------------------- Typesetting for ALA Author: Tim Brown Date: 21 Apr 2011http://modularscale.com/scale/?px1=18&px2=190&ra1=1.618 18px @ 1:1.618 190px @ 1:1.618http://alistapart.com/articles/more-meaningful-typography/ ----------------------------------------------- */
The first thing you’ll notice is a comment up top, where I’ve left a note about my scale. This serves two purposes: first, it lets people know I’m using a modular scale; and second, it provides a means of recreating the scale, so that my decisions can be studied and my measurements can be accurately changed and built upon. Just visit the URL to see the exact modular scale I used while working.
body {
font-family: "Minion-Pro-1", "Minion-Pro-2";
font-size: 18px; /* Scale origin */
}
Here I applied a base font-size (the text size from which my scale originated) to the body element.
.main {
float: right;
width: 497.406px;
}p {
margin: 1em 0;
line-height: 1.54;
}
Next I chose a number from my scale for the width of the main column of text. I often think of this as my paragraphs’ measure (another term for line length), rather than width. Years ago, when designers sent written instructions to typesetters, their shorthand went something like this: size/leading — measure. Today, CSS font property shorthand reflects only two-thirds of that traditional notation; yet, measure is still critical to achieving a balanced text block.
So, having previously determined my font size, I tried many different numbers for measure and line-height before settling on 497.406 pixels and 1.54, respectively.
For me, balancing a text block always involves lots of trial and error. I alternate between CSS editor and browser, checking to see how each value looks. I keep an eye on the overall density of my paragraphs (typographic color) and the readability of the text as a whole. I am especially wary of line spacing that feels too tight or too loose. Tight line spacing is extremely distracting to readers, pulling their attention to pieces of text above and below the line they’re trying to read. Loose line spacing is wasteful, ugly, and dilutes negative space such that margins and pauses elsewhere in a composition are less effective.
body {
font-family: "Minion-Pro-1", "Minion-Pro-2";
font-size: 18px; /* Scale origin */
color: #031634;
}
Continuing to think about a balanced text block, I tried a few different colors for my text. Silly as it may sound, color can have an effect on how smooth the text looks: pixels are made of color, so color can change type rendering. I decided on a dark blue to keep the contrast high—useful for getting the most fidelity out of Minion’s details, especially because the background color isn’t bright white.
h1, h2, h3, p.intro {
text-rendering: optimizeLegibility;
}
Next, I worked on the headings. The first thing usually I do with headings is apply text-rendering: optimizeLegibility. In Firefox 3, Safari 5+, and Chrome 4+, this property-value pair enables a font’s native kerning instructions, which means that letters will be spaced exactly as the type designer intended. Use this with care: optimizeLegibility may have performance drawbacks, but I’ve found them to be negligible. Your mileage may vary.
h2 {
margin-left: 20px; /* Optical alignment of T stem to left edge of »
.side */
font-family: "Myriad-Pro-Condensed-1", "Myriad-Pro-Condensed-2";
font-size: 190px; /* Scale origin */
line-height: 1;
font-weight: 600;
text-transform: uppercase;
letter-spacing: -2px;
color: #033649;
}
As you’ll recall, the font-size of my h2 (190px) was one of the starting values on which my modular scale is based. Setting the text in all caps strengthens and helps anchor the composition, and because it’s so large I tightened up the letter-spacing (note: this is different than kerning, because all letters are tightened or loosened at the same time, in the same way). The left margin was added later, to align the stem of the “T” with the left edge of my sidebar; this value does not come from my scale, but rather emerged from the lay of the letterforms as I worked. It’s okay to improvise, as we’ll discuss below.
’Typesetting’ uses the semibold weight of Myriad Pro Condensed (font-weight: 600). I tried other weights, but this one felt best. I chose a dark blue for the color, then decided to use different colors for individual letters with Lettering.js.
h1 {
margin: 44.856px 0 0 307.420px;
font-size: 29.124px;
line-height: 1;
font-weight: 300;
font-style: italic;
}
The h1, “Markup & Style,” is sized and spaced using numbers from my scale. Again, I tried a few different numbers before landing on the right one. While my first instinct was to center-align this heading, I found the off-center placement more engaging.
.group {
width: 845.479px;
margin: 0 auto 18px;
}.side {
float: right;
width: 274px; /* horizontal photos in this col are 190px high »
uncropped */
margin: 27.723px 29.124px 0 0;
}
Before tackling sidebar specifics, I worked out my container, floats, and clearfix.
I sought a number from the scale for the width of my container, .group, making sure it was wide enough for my h2 to fit, and then I chose a width for my sidebar. After trying a few different numbers from the scale, I wasn’t happy with the way things looked. 199.603px was too narrow, and 307.420px was too wide.
So I went about it a different way: I resized the image of my notebook and pen, trying various numbers from the scale for its height. At 190px tall (a number from which my scale originated) and 274px wide, this key visual in my sidebar seemed to resonate in the composition—and that size gave me a column width (274px) that looked great.
.side p {
font-family: "Minion-Pro-Caption-1", "Minion-Pro-Caption-2";
font-size: 15px; /* Improvisation! It's okay! */
line-height: 1.54;
}
I wanted the type in my sidebar to be smaller than that of the main text, for two reasons: I wanted it to recede visually because it’s less important than the main text, and I wanted to make sure I could set lines of a comfortable length. Having predefined a fairly narrow measure by basing my column width on the dimensions of my image, I had to make the font-size a bit smaller to get more characters per line. The big question was, how much smaller?
After trying a few numbers from my scale for sidebar font-size and not liking the results, I remembered that Minion Pro has an optical version made for smaller sizes, called Caption. Minion Pro Caption is slightly beefier than normal Minion Pro, so it was exactly what I needed. I kept trying different font-size values to find one I liked, and ended up improvising. The number 15 isn’t in my modular scale, but 15px Minion Pro Caption sure looks good next to 18px Minion Pro.
That’s right, I improvised.
Modular scales are a tool, they’re not magic. They’re not going to work for every measurement, and that’s okay. Math is no substitute for an experienced designer’s eye, but it can provide both hints and constraints for decision making. Consider the scale’s numbers educated suggestions. Round them if you like (22.162 becomes 22). Combine them (3.56 + 16 = 19.56). Or as we saw me do here, break from the scale entirely.
/* Intro
----------------------------------------------- */
/*p.intro {
margin: 0.809em 0;
font-size: 22.250px;
line-height: 1.309;
}*/p.intro {
margin: 0.952em 1.54em 0.952em 0;
font-size: 21.178px; /* 27.723 - 6.545 */
line-height: 1.394; /* 1.54 - 0.146 */
}
The decisions I made in setting the two p.intro paragraphs are further evidence of improvisation, and also touch on what I’m calling “comment math,” something I feel is important for sharing our work with clarity and efficiency.
Here I had a whole set of measurements I liked (these are now commented out). But at some point, I realized I had no idea where they came from. They’re not numbers from my scale. I suspect that one late night when I sat down to work on this (before the modular scale calculator made bookmarkable URLs), I plugged the wrong numbers into the calculator and kept on working. But it looked good! In the spirit of improvisation, I could have kept the numbers as they were. But I wanted to explain another technique I use.
To get numbers close to the ones I liked while still using the correct scale, I combined scale numbers. The font-size of these intro paragraphs, 21.178, is not from my scale; but, it’s the result of combining two numbers that are. Whenever I add or subtract to arrive at values that did not originate from my scale, I do some comment math. That helps me remember, and it helps other people see what I did.
One final thing of note: because I’ve based my layout on a modular scale derived partly from a specific size of a specific typeface, my measurements are not meaningful unless that typeface is used. So when my ideal fonts are not present, which can happen for any number of reasons (a slow connection, an old browser/OS, a user preference that disables web fonts, etc.), generic fonts—and generic measurements take over. In fact, for the sake of progressive enhancement, I specify baseline fonts and generic measurements first, followed by preferred fonts and ideal, scale-based measurements. View our example’s stylesheet in full for the details. You can read more about this technique in this series of articles by Sean McBride. (Also note: I arrived at these particular baseline fonts with help from Josh Brewer’s Ffffallback.)
Where does this fit with how we already work?#section5
In some ways it’s different from how we already work, but it feels more natural. Going from content out, rather than canvas in, to paraphrase Mark Boulton, is a more web native way of designing. Folks like Mr. Boulton, Andy Clarke, and Luke Wroblewski have for years prophesied an inversion in how we approach designing for the web, and now is the time to make it happen.
Using modular scales to build an experience outward from type can be a bit disorienting if you normally design websites (as I used to) by drawing boxes and filling them with content. The arbitrary dimensional choices I used to make had nothing to do with my intended designs’ underlying meaning. At best, I chose ballpark measurements in CSS, command-tabbed over to my browser, and eyeballed the results. If what I ended up with looked decent and the page was still functional, it was good enough for me.
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. But it also challenges us to eschew conventions like the use of prefabricated frameworks and reusable templates, and to accept a new balance in our schedules—that we put forth greater investment and effort for the sake of more meaningful typography.
Viewport sizes are good to know, but setting a composition’s width to one of these exact values and pouring in text is not ideal. Easily divisible numbers are only good for being easily divisible—fine for sketching—but as professionals we should aim higher. Let’s instead choose numbers because they fit, because they look good, and because they serve the meaning of the design.
Reset stylesheets like the one found in HTML5 Boilerplate matter a lot when designing with modular scales. We need to make sure the mathematic decisions we’re making are reflected accurately in the browser, and as consistently as possible across different browsers.
In fact, many popular practices dovetail nicely with modular-scale-based measurement. Designing with modular scales does not preclude grid-based or responsive design. Smaller numbers from a scale can be used as a grid’s column width; or, a large number from a scale can be divided into columns (rounding the numbers first helps). When building toward a responsive design reference point—a carefully measured layout for one particular setting—we can use numbers from a modular scale and then convert to percentages as we normally would.
Conclusion#section6
Designing with modular scales is one way to make more conscious, meaningful choices about measurement on the web. Modular scales work with—not against—responsive design and grids, provide a sensible alternative to basing our compositions on viewport limitations du jour, and help us achieve a visual harmony not found in compositions that use arbitrary, conventional, or easily divisible numbers.
As we’ve seen in this article, though, modular scales are tools—not dogma. The important thing for our readers, our craft, and our culture is that we take responsibility for our design decisions. Because in so doing, we’ll make better ones.
Further Reading#section7
- The Elements of Typographic Style: I cannot recommend highly enough Robert Bringhurst’s The Elements of Typographic Style—particularly the section called “Shaping the Page.” This is where I learned about the power of modular scales, how to build them, how they differ from grids, and how their flexibility can help us to strike a natural balance between typographic exactitude and educated improvisation.
- More Perfect Typography: Starting with type and using modular scales were the subjects of a half-hour talk I gave at Build in November of 2010. You can watch the whole talk online, if you like. It’s a good supplement to this article—more inspiration than information. I talk about Aldus Manutius, explain my method of evaluating type for body text, and share another layout like the example in this article.
Great article. Loved it.
You might want to note that the various browsers treat pixel sizes with decimals differently.
For example, if you have font-size:14.5px;, Firefox will round down to 14px, where as Chrome and Safari will round up to 15px. I am not quite sure what IE does in this case.
This is due to the fact that on the screen, there are no half or partial pixels.
I love typographical scales, we need more articles and experiments like this. We often make that mistake to use meaningless typography scales for web design, we just put some random numbers and we have our typographical scale.
I also love the golden ratio and many of my web typography frameworks are build on that principle. I come to very interesting results building my “web typographical project – Azbuka”:http://code.google.com/p/azbuka/” by using the Fibonacci sequence (13, 21, 34) and “golden” leading or in CSS line-height: 1.618.
I don’t think that we should always use some known design principle like the golden ratio, but I think that we should always build meaningful typographical scale that is build on some kind of logic.
@Jeremy —Â Good point! I’m interested to research this further. Particularly the idea of pixels as relative units of measurement, and what that means for fractions-of-pixels. For the time being, though, I haven’t been displeased with results across browsers.
@Vladimir —Â Agreed. Nice!
I saw too many eCommerce website they have done excellent work on design & creating inner pages layout. But, they quiet silly with font style. Who will stay more on website without proper font?
Hey, I recognize that font pairing from somewhere”¦ 😛
Great article Tim. I’m hoping that it helps the message penetrate a little more into our collective thick skulls that we need to be designing from the content out.
I would have liked to see some discussion in this article about using em rather than px for font-size, since 1) that better expresses the idea that our sizes are a series of _relationships_, and 2) this makes (some aspects) of responsive design trivial: just modify your base font-size and watch your whole design scale accordingly. You can see some of this in action on “my personal blog”:http://mattwie.be/ . I was thinking of writing some of this up, but then I saw “The Goldilocks Approach to Responsive Design”:http://www.designbyfront.com/workinprogress/article/the-goldilocks-approach-to-responsive-design which sums this up pretty well.
@eSparkyInfo —Â That’s right. Type choices makes a big difference.
@Matt — Thanks! You’re right, ems are a better way to go. Especially given the promise of using root ems, which alleviates the need to recalculate size for nested elements. Percentages are useful too, though not especially for font sizing. I wanted to keep things super simple in this article, so I stuck with pixels throughout.
Although this is beneficial when it works, it can also crash browsers and create weird side effects. This is with current browsers, not IE6. Its use seems to me to be quite risky at the moment – but correct me if I’m wrong. See, for example, ‘http://www.aestheticallyloyal.com/public/optimize-legibility/
@Lee —Â That’s right. I’ve heard some reports of instability with text-rendering: optimizeLegibility. I spent a little time exploring the “CSS Web Fonts Module Level 3 Editor’s Draft”:http://dev.w3.org/csswg/css3-fonts/ and it seems we’ll eventually have more robust ways of enabling kerning instructions (as well as CSS _native_ ways — text-rendering came from SVG).
I just tried calculating the modular scales from the base font-size and line-height of a design that I’ve been working for a while and discovered that many of the numbers were almost exactly the same as the ones I had already ended up with. To me, this confirms something I’ve been theorizing for a while: a designer’s visual intuition is probably just a very good automatic modular scale calculator. 🙂
I’d like to quickly share a method similar to yours that I’ve been using for a while. Instead of starting with the type size, I usually use the line-height, which I multiply or divide by 1.618^n to get different font-sizes, widths, heights, margins, and paddings. What I do differently is that instead of using the results as they are, I round them up or down to the nearest fraction of my line-height.
For example: 24px line-height * 1.618^2 = 62.830176 ~= 60px = 2.5 lines
Doing this seems to make the layout feel a lot more solid and “industrial” (for the lack of a better word), as if it has been created by something mechanical, whereas layouts created without rounding the numbers seem to feel more natural, organic. It’s an intriguing effect.
Very interesting theory, and something that I have never heard or come across before. Obviously typography is a very important part of any design, whether it’s web or print, but I have never really thought about how the precise size of the font could alter things so much.
I use ems rather than pixels, and was just reading through the comments left, I assume they work in the same way?
@Joni —Â Thanks for your insight. As I mentioned via Twitter, this idea of “industrial vs. organic” is intriguing. It makes sense that shaving away what feels like messy excess, over and over again, would give a composition the feeling of having been machined. I like your idea of using line-height, rather than font-size, as the basis for a scale. I want to explore that for myself. Looking forward to your write-up.
@Stephanie — Ems will work the same way. In fact, the “modular scale calculator”:http://modularscale.com/ does pixel-to-em conversion. I used pixels in this article to keep the example math simple. Try using modular scales! I think it makes a difference.
Your article is certainly different but I have the following reservations.
1. Assuming we buy the golden mean, why should we base the values on the point size of the type? I find this basis quite arbitrary.
2. Other features of the typography in your example frankly jar with me, making me suspicious of your suggestion.
(a) The top of the left column not aligning to the top of the right column made me feel immediately uncomfortable.
(b) Block paragraphs in an article about typography citing a millenium of typographic achievement? I have heard people *assert* that indented paragraphs with equal spacing don’t work on the web, but I’ve never seen a rational argument for this, and my own belief is that they are used because initially there was no alternative (just like dumb quotes, although I see you’re smart in that direction).
Sorry to be brutal, but that’s how it strikes me.
@David —Â Thanks for being honest! To your points…
1.
The golden mean is just one possible ratio. My calculator offers three, but modular scales can be built from any ratio that you feel is meaningful. As for using font-size as the basis for a scale, you’re right —Â it’s a bit arbitrary. Upthread, Joni Korpi offered line-height as an alternative, and I’ve been talking with folks here and there about delving deeper than font-size to find measurements within fonts’ construction.
See, the font-size we specify maps to a font’s “em box”:http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/ … but type designers can make their fonts any size, and position them any way, within this em box. If we could take meaning from the characters themselves —Â or their general, design-wide proportions — that would be much more meaningful than using the em box.
That all said, modular scales have been used in typesetting for hundreds of years, and designing outward from type makes sense for the web. Basing scales on font-size is a good place to start exploring.
2a.
That’s a shame. I didn’t intend to make readers feel uncomfortable. I tried top-aligning the sidebar, and even tried a couple graphic devices (a rule, a fleuron) to make it feel right, but this felt best to me.
This is a good example of how modular scales are not an easy answer, but rather a tool. I think the values my scale produced look great overall — “scale”:http://nicewebtype.com/fonts/minion-with-myriad-condensed/ / “no scale”:http://nicewebtype.com/fonts/minion-with-myriad-condensed-noms/ — but perhaps I didn’t make the best design choices in the case of the sidebar. Maybe I could have positioned it a bit higher, using a smaller number from my scale. Or maybe I should have led with an image, to define the column with a bit more strength.
2b.
Many paragraph styles are appropriate for web text. Jon Tan put together a fantastic post exploring this, called “The Paragraph in Web Typography & Design”:http://jontangerine.com/log/2008/06/the-paragraph-in-web-typography-and-design —Â check it out!
Thanks again for being honest and critical, David. I hope you won’t discount this approach to typesetting based on my choices in this article’s example. I’m certain typographers more talented than I will make better examples than I have, and produce some truly excellent work for us all to study and admire.
@Tim Thanks for your reply.
And for the link to th interesting article by Jon Tan on paragraphs. I won’t comment on it here as it’s not relevant to your thesis, but I have posted a comment there.
I agree that line height might be a better basis for calculation. It’s a difficult one.
It’s a very good and useful article, thx for the calculator!
The only thing missing, is to mention a line-height, which should be set up to make text going straight through many lines. They should be multiplying themselves, for example: 12px, 24px, 6px etc. (despite the font size within them).
Regardless of how you arrived at your sizes for elements, your leading in the demo page is too wide. The paragraphs don’t hold together, especially the first paragraph, which feels like four separate lines of un-connected text. It’s not nice to read, it feels uncomfortable.
I don’t have a problem with using devices like the ‘Golden Ratio’ or ‘Rule of Thirds’, they are good tools for producing harmonious layouts. But it’s better to not stick rigidly to something if the evidence in front of you tells you it isn’t quite working.
Maybe the problem comes, as pointed out by others, from the rounding up/down to whole numbers.
I think this is an interesting experiment though. If you don’t try you’ll never know.
(For reference, I’m reading this in FF4 on a 27″ iMac. Safari looks the same too.)
@Barry — The leading might feel too loose to you, but it feels good to me. I think there’s a balanced “relationship”:https://img.skitch.com/20110506-djwgrmb1s6gfpb1xc4t3qg6ys.png between the leading and horizontal gaps in the text, and resonance with the average whitespace in the tightest parts of the headline’s letterforms. When I was typesetting the example, I did try using a tighter line-height —Â not just in those introductory paragraphs, but in all of my text. In this case, tightly-packed lines didn’t feel right. The textblocks felt much too heavy.
But … maybe it’s both too loose _and_ just right. Maybe that’s the nature of the web. Web line-height often feels loose, perhaps because we establish whitespaces like leading and margins based on the whitespace within our text typefaces —Â which are often stoutly shaped and generously spaced so they’re not muddy at low resolution. This looseness is especially noticeable on high-resolution devices like the iPhone 4.
Great observation, Barry.
??Basing scales on font-size is a good place to start exploring??
*No it isn’t.*
9pt Arial is way smaller than 9pt Verdana, but much larger than 9pt Garamond 3 (not that I would recommend using that on the web at 9pt anyway). This why all the standards for legibility (the British recommendation for vision impaired people is 12 pt Arial — a disaster) do not work. They compare dung to dirt (to avoid harsher words here), do not take into account leading, tracking or the widths of the typeface (wider has more counter spaces and will read better but need more room).
The only way to compare type properly is be looking at the x-height, seeing that most text is lowercase.
What do you think of these examples? Which ones work well and which don’t?
http://www.personal.psu.edu/jxm22/sixtypefaces.html
@Erik —Â Okay, maybe it’s not a _good_ place. But it’s someplace! 🙂
You make a great point. And I agree, as I said in the “paragraph”:http://www.alistapart.com/comments/more-meaningful-typography/P10/#13 preceding the one you reference, that mining fonts for their sub-em-box details (like x-height) would produce more meaningful results. Until we can do that, though, font-size affords us a unit of relative measurement —Â given a particular body text typeface.
I’m not advocating here that a scale be composed and applied to any text face. I think the basis for a scale depends entirely on the typeface being used — and until we can get more mathematic information about fonts to use while typesetting, a good place to start is to eyeball an appropriate font size and base a scale on that.
@Jerrod —Â In terms of texture, these paragraphs look equally smooth — with Palatino feeling a bit looser than the others. Georgia feels a bit too big for its measure, Palatino a bit too small for its resolution, and a personal bias often keeps me from enjoying Arial (as now). Verdana, Times, and Lucida look best to me, as you’ve set them.
It’s obvious that you put a lot of care into these measurements. I’m eager to see what else you have in store —Â the page header is intriguing! Thanks for sharing your work.
@Jerrod — I should add, I’m looking with Safari 5 on Mac OS 10.6. Screen rendering varies, as I’m sure you’re aware. And upon further study of the Lucida paragraph, the tightened word spacing bothers me just a little bit.
I don’t think is a bad idea to use font size as a base for a modular scale (at least until the scale is used to typeset). As far as I know this is how modular and double stranded typographic scales are built.
What I would question instead, is to base (almost) all the values on this scale. In my opinion, text size, leading and measure depend on the font chosen and on each other; so one shouldn’t derive them from a fixed set of sizes. These specific settings are very sensible to small variations (eg. sometimes 1.4em line height or 1.45em line height can make a difference, the same could be said for 420px width or 440px width for a paragraph). Additionally, typograpy history already offers us “golden rules” for these settings. I believe you should start with a text size, derive leading and measure and then building a scale.
On a different note, improvisation is good, but in music, it is not a mean to overcome the limits of a system. It’s the musical system that offer the means to improvise not the other way around. I think this is important in a typograhic system too (in your calculator 2 out of three scales are very important musical scales as Bringhurst thought us). Another thing to note is that maybe it would be better to mix different scales in a composition than building a double stranded one starting from two values.
Excellent article, very inspiring and thought provoking.
Scales are great ways to define the hierarchy, but it seems (to me) like there are conflicting rules between type scales and baseline grids.
“¢”¢”¢ I know this is mainly a print problem and baseline grids aren’t that useful on the web, but I do an equal amount of both so it’s valid to me “¢”¢”¢
Bringhurst says to line everything up on a baseline grid, but if your type is set to a golden ratio or musical scale then lining it up to a baseline grid mathematically will look make the leading look weird (either too loose or too tight). I’ve only been able to do one or the other: Strong baseline grids with type sized at ratios lining up on the grid, or in scale and unaligned.
So what’s the solution to creating a well-structured grid with harmonious scales that still align on baselines correctly? Anyone have a solution?
Tim
Here are two more sites – one using Google fonts and the other Kernest fonts – each font with somewhat different styling.
http://www.personal.psu.edu/jxm22/fonts/
http://www.personal.psu.edu/jxm22/kernest/
Would like to know what you think of these. Thanks for you comments on the earlier six.
I thought assigning font-size with a pixel unit is a no no!?! Shouldn’t we be using ems? How would I use this technique with em-based font sizes?
Tim,
many thanks for that insightful concept. However, I fear that it may have some serious drawbacks.
First of all, as you know, the type size measured in a “point size” of some sort (be it px, pt or em) says very little about the actual appearance of type on the page. The actual visual size of the letters may very quite significantly between different fonts. Even for the pre-installed web fonts, it differs greatly (Georgia vs. Times New Roman). When you use other fonts (through the CSS webfonts mechanism), this difference is even greater.
Another aspect is of course the x/y ratio of the letterforms. The difference between more condensed and wider fonts (both in the actual glyph proportions and the glyph spacing) introduces another huge variety. In my experience, when coming up with proportions for a page, depending on the typeface chosen, one needs to start from the x-height and the line height, which sets up the vertical rhythm, and also take into consideration the ideal reading line length for a given typeface. If we set a certain number of lines that using those chosen variables, we will arrive at a “box” of a certain width that consists of a vertical rhythm and at the same time results in a certain type color (greyness).
This “box”, let’s call it a module, should make up a piece of text that is easily graspable by the eye on screen with no more than a comfortable vertical movement of your eyes (without moving the head or scrolling).
If you arrive at such a configuration, the visual interlinear space(which will typically be the distance between the baseline of one line and the x-height of the following line) is a good measure for other kinds of measurement of the design (margins, paddings etc.).
The above is not quite a solid theory yet, but an interesting starting point for some experiments, and perhaps could somehow be related to your modular scale. (Hint: the actual x-height, and the interlinear space, are two significant values to consider, the width of a text column set for an ideal reading line length is another).
Best,
Adam
Interesting article and discussion! The “modular scale” concept was brand new to me, and the rest of this piece was packed with links to some great web typography examples, tools, and articles.
Some questions concerning the modular scale calculator:
* Would it possible to color-code the strands? This could allow a designer to track which scale a value is being drawn from. (The source numbers could then be emphasized in some other way—boldface, italics, or background color.) A graph like the one in your article would be another great visualization tool.
* How about being able to enter one’s own ratio, or to apply multiple ratios to a single size value?
* Why is there a column labeled “% of 13”? I don’t believe this is mentioned anywhere in the article. Is this an indication of how “unlucky” a particular scale-based value might be? 😉
While I appreciate the ingenuity of “comment math”—particularly for the sake of illustration in this article—there’s a point at which it becomes natural to question whether the results are truly perceivable by the human eye. Might there be other, more basic proportions or alignments to take advantage of in order to tie elements together visually at that point?
looking from golden ratio, i like that mind. i think of that, we can use that ratio in everywhere…
Great article Tim. I’m hoping that it helps the message penetrate a little more into our collective thick skulls that we need to be designing from the content out.
I want to research this further. Particularly the idea of pixels as relative units of measurement, and what that means for fractions-of-pixels. I would have liked to see some discussion in this article about using em rather than px for font-size.
I saw Tim do a presentation on this a while ago which definitely made me think so enjoyed this little refresher, particularly the comments.
We work in ems (although rem’s sounds fantastic), unsure why translating this from px to ems would be a problem? Seems pretty simple to me…
I agree with some of the comments about line-height being important. This is particularly true in multi-column designs. If the line-heights aren’t derivatives of each other is causing vertical alignment issues. Imagine first col has single line heading and then some paragraphs. Second col has double line heading and then some paragraphs. If the Heading line-height ( as well as padding and margin) isn’t based on the paragraph line then the paragraphs below will sit out of sync with the paragraphs in the next column.
Now I know this is hard to make consistent across browsers (due mainly to browsers positioning text differently within line-height) it does make for a lot more consistent layouts.
I use a vertical-rhythm tool to make this happen, but most of it is just maths anyway.
To see an example of what I mean install this bookmarklet: http://www.sprymedia.co.uk/article/Grid, open Firefox, go to http://dna.co.nz/news-page/, open the bookmarklet set top to 9px, set height to 300%, row-height to 9px and see every piece of text hit the grid.
@Doug Downing: if you’re still wondering what the % of 13 column is for, it’s to to with Yahoo’s reset stylesheet, apparently. If you watch Tim’s Build presentation
and skip ahead to roughly the 18-minute mark, you’ll see him mention it.
This makes so much sense. I am a big numbers person and I believe that you can create formulas for just about anything. I love the fact that you in sense have created a formula for creating aesthetically pleasing websites. I do worry a little about browsers and how they will interpret the css. Many browsers have a different effects on certain text properties. Even though there is that slight possibility that each broswer will treat this differently I would love to get my hands into designing with more of a calculation based system. I currently use my eye and it has worked great but this could take my designing over the top.
Spectacular!…I’d like to quickly share a method similar to yours that I’ve been using for a while. Instead of starting with the type size, I usually use the line-height, which I multiply or divide by 1.618^n to get different font-sizes, widths, heights, margins, and paddings. What I do differently is that instead of using the results as they are, I round them up or down to the nearest fraction of my line-height.
For example: 24px line-height * 1.618^2 = 62.830176 ~= 60px = 2.5 lines
I had recently come across an article that proposed using the Fibonacci sequence to come up with your measurements. I liked the idea of my design elements falling back more to mathematical principles. I find that I do better in an objective atmosphere (like development) than a subjective atmosphere (like design) but I always end up having to do both. Having a mathematical background to my design choices helps me move through them much quicker. I found that using the Fibonacci sequence is a little more clunky at times. Even though the Fibonacci sequence eventually averages out to The Golden Section, it is not at that ratio to start with. I am going to implement this in my next project and see how it works. Thanks for the link to your calculator.
As many traditional artists drew inspiration from nature and many modern artists are into science, the golden ratio is always in trend. The scale has always been playing a significant part in design. In the case of typography, the designers should pay attention to the scales between type sizes, line height, line length, margins, column widths, and more. The author of the article designs in a very mathematic way. In the article, the author mentions how accurately she employs the golden ratio to every detail of her web design.
I think modular scale is something equivalent to grids. They are both sets of rules that help designs become better. As the author concludes ” designing with modular scales is one way to make more conscious, meaningful choices about measurement on the web. Modular scales [“¦] provide a sensible alternative to basing our compositions on viewport limitations.” Indeed, modular scale can help to organize the information and build a harmonic composition. Nonetheless, as grids, modular scales are tools used for design, not against design. We designers should not be limited by the rules, but take advantage of them. We still have the freedom to break the grids and scales when we need to.
Thank you for this article! I am a type of person that need guidelines. And this modular scale seems to be the perfect tool to help me find the right visual harmony or composition on the web.
Hierarchy and contrast is very important in web since legibility is lot more difficult on screen then on print. Having the “prearranged set of harmonious proportions” definitely helps to find the starting point in terms of headline 1, 2 and 3
However, i would have to agree with espiekermann with font-sizes. many fonts differ in optical sizes (ex: 9pt arial different from 9pt verdant). Just like using x-height to see the compatibility between combinations of different fonts, using x-height for this modular scale seems to be more accurate.
As you stated at the end of the article I do not think modular is a rule that all designer must keep. It seems more of a guideline. Either in web or print, as designers we should find new ways to show visual harmony even if that means some “rules” must be broken.
It seems like a very useful guideline for designers. But I think I might end up not using this tool when using different typeface. I assume that whatever scale and numbers we end up with will be more like an outcome of number of trials than an actual guideline we would adhere to from beginning to the end, as we constantly check the preview of layouts. And good is subjective. Even though the golden ratio is classic, I want to believe it won’t define and limit what we as designers can develop on and be intrigued to more contemporary aesthetics. So I agree with how you would like us to treat it as a tool not an answer. I would love to see and experiment golden rations for other typefaces, not that I would like generic layouts for each typeface on the web.
It is nice to see your approach to designing websites by stressing the importance of going back to designing with typography. I appreciate that modular calculator website you made, it definitely makes a great starting guideline for helpful numbers. I really liked the example that you ran through in how to apply this particular principle, and the way you explained your reasoning behind your specific choices, and choice of web fonts for example. As someone who is not too familiar with typography, your detailed explanations were very educational. However, maybe it would have been helpful if you linked to a few running examples of webpages demonstrating where you have used your modular scale, the visual imagery could have helped. Great how you mentioning the importance of “eyeing” a design and not sticking slavishly to given numbers. Of course those numbers are great for a conventionally eye-pleasing design. I feel that those numbers as given by equation are a helpful jumping off point but agree that one should not feel obligated or bound to such guidelines for the sake of innovative design. I will would like to look into the further reading that you suggested at the bottom of the article, thank-you for sharing your resources and recommendations.
Thanks for the great article, I appreciated that it was easy to understand for a beginner like myself, and it was interesting to see your process of trial and error as well as the very appealing result.
As yourself and others have noted, the set of numbers within a single modular scale often do not translate to successful measurements for every aspect of a design, and making this principle work in practice involves a lot of finagling, such as adding two numbers within the scale together, which causes a departure from the intended relationship. Maybe the proportion is most suited to being used only between two related elements at a time, with one designer-controlled “important number” in each pairing. For instance, start with choosing a legible body text size, as you did, and then make the h2 a number related to that size on the modular scale. Then, instead of trying to make the proportion of the left and right columns also relate to that original point size, choose a comfortable reading measure for the body text and make the secondary text relate to that size on the modular scale, using the same proportion, and so on for every set of two numbers.
You’ve already done this by using a secondary important number, but I think it might make sense to push that idea further and use a unique important number for every pair of variables, rather than trying to force each element into one or two scales.
I greatly enjoyed the article. I have frequently explored the golden mean as a notion of balance and harmony within art and design, but never connected it to web design. I think the translation is really interesting.
I think contextualizing the ratio is important in the web. The golden mean can be applied to architecture, like the parthenon of ancient Greece, to the way a nautilus shell grows. It seems that the application of the mean as you are using it here is strictly two-dimensional in nature. What I am curious about is how interactive elements on a web page would potentially break or obscure the construction of your set up. How could this also then be used to your advantage?
I think too that aesthetic harmony and balance can also come from other inspiration, like the wabi sabi nature of Japanese art and design. The asymmetry and scale shifts of Eastern art can inform the way web designers calculate their pages in new and beautiful ways.
This is very interesting. I had no idea that designing with font could be so mathetical and intricate. I was always under the impression that most good designs came from an intuitive and subjective manner, but reading this made me realize that there is a formula for good design. Granted, there are rules for everything, but I guess it slipped my mind this time. I was very intrigued by the whole idea of “Going from content out, rather than canvas in”¦” It is always peculiar yet inspiring to see someone work in a completely different, or in this case, completely opposite manner than you yourself do.
This is great to go back and see designing websites by pointing out the importance of designing with typography. This makes much sense and appreciate the modular calculator website you have created. It is a very useful and helpful guideline to learn for the designers outside. However,I am a little worried that what if those rules of golden ration might limit the choices of designers develop or create. I also wish to see and explore more about golden ratio for other typefaces and see what we can do with them. it would be also great if you have or created more formulas because they are appreciable to look at. Although, it is really challenging for me, as a beginner, I want to get to experiment and learn more about this field of study and design with more of a calculation systems.
Hi, I can’t unzip the Web Font Specimen file. wfs.zip.
This is incredibly a useful article because what I struggle with most as a designer is finding “meaningful quotes”:http://www.glamquotes.com/quote/meaningful-quotes/ and trying to keep the design as clean as possible.
You never know when your going to come across something that you felt was true, but didn’t know how to express it, then you find something like this, and it shows the math behind what your eye was thinking. I have always felt that using a 10 pt font, with a 16pt header always seemed to look like the correct ratio. Bam, golden ratio to the rescue. Fantastic article!
Obviously typography is a very important part of any design. we can use that ratio in everywhere…
Web designing without proper typography is not good for website..Typography is more important for web designing..
Web Design Company Chennai
Fantastic article, I’ve spent today implementing this – I love that you’re bringing the Golden Mean to the web!