Vertical Motion: Using Grids for Web Typography
I’ve been following Richard Rutter’s posts on web typography with great interest. In particular, the recent post Web Typeography Sucks
I’ve retrospectively applied these rules to a couple of my sites in the past few days - taking an hour or so to pick through style-sheets. In most cases there’s a subtle but appreciable improvement.
The fundamental idea is to use a page’s base font size & line height to dictate the size of other elements on the page. In other words: fit the boxes around the text, not the text into boxes.
Mouse-over here to show the horizontal grid lines.
As a starting point for your own implementation, I recommend using the [Yahoo UI Library Reset CSS][YUI-Reset]. This simple file removes all of the default sizing, padding and styling from all mark-up tags, so that you can start from a clean slate which is consistent across browsers.