More Meaningful Typography

by Tim Brown

50 Reader Comments

Back to the Article
  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. Hi, I can’t unzip the Web Font Specimen file. wfs.zip.

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