A few of us were having a discussion about using a baseline grid during the break on Wednesday afternoon, and I said I’d post a link to an example with the grid showing. So, here it is:


It’s based on Richard Rutter’s article Compose to a Vertical Rhythm which was published on 24 Ways several years ago. There are quite a few articles on using typographical baselines in web design, but I think Richard Rutter’s is the best. He uses an absolute font-size declaration for the body element, but then relative em units for all subsequent declarations (font-size, line-height and margin), so the baseline is easily scalable. If you want to change the default font size from 12px to 14px all you need to do is change the font-size declaration of the body element and all subsequent declarations will be set relative to that.

It’s definitely a work in progress, and something I intend to keep working on – I’m not entirely happy with the margins or the spacing between the lines when the heading elements span more than one line. I also want to add defaults for a lot more elements. However it’s a really useful thing to have since it can be reused over and over again. And, if used with a reset style sheet like Eric Meyer’s and a third style sheet with some reusable classes – such as clearing floats – it provides a good basis for a time saving modular CSS system.

« »