Typography is a major part of design on the web today. Most websites have a large text to image ratio, and it is important to make sure your content is as easy to read as possible. Today I want to show you how to choose correct font-sizes, line heights, line lengths and paragraph spacing.
We will start with the size of your body copy. Depending on your site design and layout this may differ, but body copy is normally around the 12 – 14px mark. Much smaller and your readers will have to squint to read the content, much bigger and your pages will become endless. The average font size for body copy on the web today is 13px. We are also going to work out our line lengths from this figure, so you have to bear this in mind when defining the widths of your site design.
There have been various studies carried out to work out the optimum line heights, line lengths and header sizes based on your starting font-size.
The basic formulas are as follows:
Line height = font-size x 1.5.
Line length = line height x 27.8
Header Size = body font size x 1.96
So a starting font-size of 14px would mean an optimal line height of 21px should be used. From this value we can work out the optimum line length. Using the above formula our line length would be 583.8px so let’s round that to 580px. We can also work out our optimal heading size for this body of text, body font-size (14px) x 1.96 = 27.44. So our heading should be around 27px. Below is an example of the above sizes and formulas put into action.
If you’re a little lazy (Like myself!) Geoffrey Grosenbach over at www.topfunky.com has created a free tool. All you need to do is enter your font size and line height, based on the formulas above and it will give you all the css you need to keep a consistent baseline rhythm through your site.