Web Font Standards

Posted in Web Design | No Comments »

January 2nd, 2010


What are the best practices when it comes to web font?

When it comes to print, like newspapers and magazines, these have already set standards, depending on the audience.  They know what font works best, the sizing and colours that capture attention, and leading lines.

But what about the web, since it often needs to perform the same task as print?


Because it is a different medium, sometimes it’s unclear to people, how they should be setting up the font to work best on their web site.

Far from being the the be all and end all as to web fonts, this article just shows what I find to work best for me… in most situations.

The Nature of Ratios

There are many relationships in nature that hold clues for us, like formulas that make things appear clean, or emphasize certain points.

There are a few that I found;

  • The Golden Ratio
  • Fibonacci’s Sequence

The Golden Ratio

If you were to look this up on a search engine, you may find a lot of sources that give you math equations to explain it, it can become complicated if your not that way inclined.

Put basically, this golden ratio equals 1.6, meaning that if you were to have 2 lengths, (length a and length b) where a might equal 1 unit, b would equal 1.6 units.

This formula has been used and studied throughout history not only by mathematicians, but also by architects, artists, musicians, and many others, the reason being is because of it’s aesthetic property.  It seems that wherever it is used, whether it be a piece of music or a well designed building, by using this golden ratio, the design will be pleasing.

So how can we make use of this for the web?

I use this formula when dealing with line height, and paragraph margins, in my main body text.

If my font size was 16px, my line height would be; 16×1.6 = 25.6 or 25px

Using the same rule I would work out the margin between my paragraphs, but in the other direction; 16/1.6 = 10 or 10px

I find that following this rule, gives me an easy to read block of text, with an appealing amount of white space surrounding my lines.

This rule can also be used in seperating or dividing content on your pages.

Fibonacci’s Sequence

These sequence, is again found in nature, and has a very close link with the Golden Ratio.

First the sequence; 0, 1, 1, 2, 3, 5, 8, 13, 21, 34… and so on, basically each consecutive number in the sequence, is the result of the addition of the previous two numbers.

The relationship it has with the Golden Ratio, is that when you divide wto adjacent numbers, dividing the higher over the lower, the result equals 1.6 or this Golden Ratio.

It is suggested that when picking font sizes, rather than just picking some arbitrary number for the font sizes, of paragraphs, headings and so forth, you instead pick the font sizes from a predetermined sequence.

Fibonacci’s Sequence is one of these, that can be used.

In Summary

These rules and formulas are certainly not the only ones that should be used, however they do offer some guidelines, and definitely illustrate the importance of consistency and intelligence when we construct our pages.


Leave a Reply