Baseline Grid on the Web

With cr2004.com I got to experiment with taking the print layout principle of baseline grid and applying it to the web.

What is Baseline Grid?

First off, here's an example grid using the CR design. The basic concept is that the baselines of your text line up across all of the columns. The baseline is the bottom of the letters, not including the tails that hang down from letters like "g" and "j". The grid is based on the line height of your text. So if your line height is say, 18 pixels, every line of text will land on a grid of horizontal lines 18 pixels apart. But if your text is not all the same size, say a header is set in a 27 pixel font, you have to increase the white space above the text until you fall down on the next grid line. This white space is the goal of baseline grid, not to create a rigidly geometric design, but to provide for a harmonious evenness of vertical motion.

How I did it

I began designing the site in Photoshop. I chose my font, Georgia, my font size, 13 pixels, and my line height, 18 pixels. Then I set up my grid of horizontal guidelines every 18 pixels, see the example to follow along. With two headers of different sizes for the two columns I had to push the smaller one down until it aligned with the baseline of the larger header which was sitting on the grid. I used margins, padding and design elements to push the header of the right hand column down. The rule for achieving baseline grid becomes this: whenever the text is made larger than the size that is intended to fit on the grid you have to increase the margin above the text until it falls down onto the next gridline. It is often necessary to also add an extra gridline worth of space below the larger text as well.

Having designed the page exactly as I wanted it in Photoshop, I then slapped it together with divs, header tags, lists and paragraphs, using CSS to put them where I wanted them. This was done cross-browser and with much pain caused by IE float and border bugs. Then I put background colors on the various elements and removed all their margins and padding. I took a screenshot of the page as it was and brought it into Photoshop. Then I measured exactly how many pixels the first header needed to be pushed down, made the change to the CSS, and took another screenshot. Working in Mozilla only I went back and forth tweaking CSS and measuring screenshots until I had everything lined up pixel perfect.

Then I pulled up the page in Internet Explorer. Everything was a little bit off. At this point I could have stopped and said good enough. The underlying goal of baseline grid, even whitespacing, had been accomplished. Everything was just off by a few pixels here and there. That is exactly what I decided to do for Mac browsers, but for Internet Explorer on the PC, used by everyone in my audience except for Cybil, I wanted it to be perfect. I created a CSS file that adjusted a few margins here and there and called it in using conditional comments. Again I took screenshots and measuring the differences between them and my original in Photoshop to find the adjustments.

Further examination shows that it may be Mozilla who is poorly handling the padding around text wrapped in a span within a header tag, but it's easier to just fix IE with a forward compatible proprietary hack.

So I guess that's it; my flawed and rather rudimentary guess and check system for applying baseline grid. It could be done in a more calculated manner, as Eric Meyer does in On CSS, and it really should be done using em's for font sizes and padding to increase accessibility. But determining that it can be done was my objective, and that has been accomplished.