More Meaningful Typography

by Tim Brown

50 Reader Comments

Back to the Article
  1. 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.

    Copy & paste the code below to embed this comment.
  2. 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.

    Copy & paste the code below to embed this comment.
  3. @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!

    Copy & paste the code below to embed this comment.
  4. 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?

    Copy & paste the code below to embed this comment.
  5. Hey, I recognize that font pairing from somewhere”¦ :P

    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.

    Copy & paste the code below to embed this comment.
  6. @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.

    Copy & paste the code below to embed this comment.
  7. 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/

    Copy & paste the code below to embed this comment.
  8. @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).

    Copy & paste the code below to embed this comment.
  9. 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.

    Copy & paste the code below to embed this comment.
  10. 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?

    Copy & paste the code below to embed this comment.
  11. @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.

    Copy & paste the code below to embed this comment.
  12. 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.

    Copy & paste the code below to embed this comment.
  13. @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.

    Copy & paste the code below to embed this comment.
  14. @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.

    Copy & paste the code below to embed this comment.
  15. 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).

    Copy & paste the code below to embed this comment.
  16. 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.)

    Copy & paste the code below to embed this comment.
  17. @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.

    Copy & paste the code below to embed this comment.
  18. 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.

    Copy & paste the code below to embed this comment.
  19. What do you think of these examples? Which ones work well and which don’t?
    http://www.personal.psu.edu/jxm22/sixtypefaces.html

    Copy & paste the code below to embed this comment.
  20. @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.

    Copy & paste the code below to embed this comment.
  21. @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.

    Copy & paste the code below to embed this comment.
  22. @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.

    Copy & paste the code below to embed this comment.
  23. 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.

    Copy & paste the code below to embed this comment.
  24. 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?

    Copy & paste the code below to embed this comment.
  25. 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.

    Copy & paste the code below to embed this comment.
  26. 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?

    Copy & paste the code below to embed this comment.
  27. 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

    Copy & paste the code below to embed this comment.
  28. 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?

    Copy & paste the code below to embed this comment.
  29. looking from golden ratio, i like that mind. i think of that,  we can use that ratio in everywhere…

    Copy & paste the code below to embed this comment.
  30. 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.

    Copy & paste the code below to embed this comment.
  31. 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.

    Copy & paste the code below to embed this comment.
  32. 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.

    Copy & paste the code below to embed this comment.
  33. @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 (http://vimeo.com/17079380) and skip ahead to roughly the 18-minute mark, you’ll see him mention it.

    Copy & paste the code below to embed this comment.
  34. 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.

    Copy & paste the code below to embed this comment.
  35. 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

    Copy & paste the code below to embed this comment.
  36. 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.

    Copy & paste the code below to embed this comment.
  37. 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.

    Copy & paste the code below to embed this comment.
  38. 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.

    Copy & paste the code below to embed this comment.
  39. 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.

    Copy & paste the code below to embed this comment.
  40. 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.

    Copy & paste the code below to embed this comment.
  41. 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.

    Copy & paste the code below to embed this comment.
  42. 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.

    Copy & paste the code below to embed this comment.
  43. 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.

    Copy & paste the code below to embed this comment.
  44. 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.

    Copy & paste the code below to embed this comment.
  45. Hi, I can’t unzip the Web Font Specimen file. wfs.zip.

    Copy & paste the code below to embed this comment.
  46. 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.

    Copy & paste the code below to embed this comment.
  47. 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!

    Copy & paste the code below to embed this comment.
  48. Obviously typography is a very important part of any design.  we can use that ratio in everywhere…

    Copy & paste the code below to embed this comment.
  49. Web designing without proper typography is not good for website..Typography is more important for web designing..
    Web Design Company Chennai

    Copy & paste the code below to embed this comment.
  50. Fantastic article, I’ve spent today implementing this – I love that you’re bringing the Golden Mean to the web!

    Copy & paste the code below to embed this comment.