More Meaningful Typography

by Tim Brown

50 Reader Comments

Back to the Article
  1. 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.
  2. 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.
  3. @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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. Hi, I can’t unzip the Web Font Specimen file. wfs.zip.

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