Setting Web type to a baseline grid

Another article in Craig Grannell's fabulous series on design basics, in this article Craig gives us the lowdown on grid design basics - how to create a baseline grid in CSS, and how to position text on screen using it, with distances measured in both pixels and ems.

( Read the article )

I always try to set up my CSS like you described. I sometimes run into problems when I think the amount of whitespace after (of before) a certain element should vary depending on the following (or preceding) element. The most important example for me is a ul or ol, which I sometimes consider part of the previous paragraph and therefore don't want to be separated from it. I noticed it's very easy to break baseline grids when you start creating this kind of exceptions in your CSS.

it is easy to set up a baseline grid for block elements like headings and paragraphs, but it gets really messy with tables and forms. do you know any examples of anybody accomplished that?

"By setting the page’s overall font-size value to 62.5% in the body rule, text can be sized in ems using a value a tenth of the target pixel size."

I understand 1em equates to 10px, 2.4em equates to 24px but what is the reason for setting the body font to 62.5%?

logiclab "well most of the time"