I have very personal preferences when it comes to typography, and for this site I want to focus on readability, rather than aesthetics. I like big fonts, with big gaps between words and lots of space between lines – making it very easy to read, and incredibly easy to skim read. This is an important quality as many people will stumble onto this site needing to be made instantly familiar with the context. For important words, and to highlight significant sentences there are a number of extra CSS classes to handle fancy formatting.

An important part of any site is how it moves your user’s eyes around the page, and in particular how the vertical spacing between headings,  paragraphs and other elements maintains a rhythmn that balances and spaces out all of the information. To develop, demonstrate and code the typography I have created a special test page which contains all the headings, paragraphs and special class codes that need to be styled for the content on this site. In the background you can see the vertical rythmn shown as equally spaced horizontal stripes, or ‘baselines’.

This is the vertical drumbeat for our content. All headings, paragraphs, images and charts have to be able to sit perfectly either on these lines or use margins to offset themselves asymnetrically between (like an offbeat). This beat runs through all sections of the site and never changes.

For designerZen, I am using an 18px baseline. This was derived from playing around with the basic 12pt font (that is used for most of the site content) and changing the leading until a long paragraph was easily readable, and short paragraphs were clear. 18px with a 12px base font means 12 pixels vertically of text, then 6 pixels of space below.

Check out this page for the test.

For all fonts smaller than 18px, it is important to add line-height so that their baseline extend to the full 18px. For fonts larger than 18px, it is important to set it so that the entire hieght of the font plus line-height is a direct multiple of 18px and also the margins above and below them. Take a look at the typography.css for more information.

There are many resources to help you build to a baseline, my favourite debugging tool is syncotype, which overlays a grid of horizontal lines spaced along a baseline that you can specify. Try it out for yourself on the test page!