Designing to a grid saves time and instills subtle harmony into a composition. Using a vertical grid to determine column width is practiced widely by contemporary web designers for basic alignment. Despite being common in print design, aligning a webpage to a baseline (horizontal) grid isn't as common, perhaps due to the difficulty of getting it to work across different browsers. To address this I've created a webpage which typographically aligns to a baseline grid. I'll also show you how to design to a grid and list common issues that can throw your design out within the cruel world of cross browser compatibility.

Contents

• Designing to a baseline grid
• Using a repeating grid as a background image whilst you do the front end coding for the design
• Getting around vertical margin collapse in browsers
• Adjusting border settings and styles which add extra pixels to your elements
• Don't use hr tags

Designing to a baseline grid

Click here to see the gridded html page

Designing to a baseline grid requires you to determine line height (or leading) values so that every line of text will align to specific grid intervals position (this will become clearer as you progress with this post). This creates a subtle harmony between even the most disparate of text elements on the page in spite of size or.

In my example I've decided to use a line height of 20px. Within this, I can fit font sizes ranging from 12 - 18px (I wouldn't go much smaller than 12 px as this will become too small on screen and no larger than 18 to leave some space so that the ascenders and descenders within a paragraph are clearly separated). If I want elements to be larger than 20px (and thus larger than the line height), the line height will be doubled so that it always aligns with small text on a common line. Therefore elements between the sizes of (20-38px) are set using a 40 px line-height (see image below).

Green lines are separated by 40px of clearance

You can even take it a step further and create a h1 style with a line height of 80 pixels and a font-size ranging from 40 px to 80px. Experiment to come up with a design you're happy with.

In this design the line heights have been restricted to 20px, 40px, and 80px in order for the any combination of fonts to line up against each other, whilst also maintaining a range of sizes to create a clear heirarchical relationship between them.

So there's a basic example of designing with baseline grids on the web, now for some tips and issues you may come across whilst trying to get this to work in html and css across browsers.

Using a repeating grid as a background image whilst you do the front end coding for the design

This will allow you to accurately check if elements actually line up. This was a technique mentioned by Khoi Vinh, and it has proved to be very handy.

Getting around vertical margin collapse in browsers

Say you have 2 paragraphs (or divs) that sit on top of each other, paragraph 1 and paragraph 2. Say you set the margin to 10px for paragraph tags. You'd think there'd be 20px of vertical space between the paragraphs (10px from the bottom of paragraph 1 and 10px from the top of paragraph 2). Wrong! CSS will collapse them to the larger setting (in this case because they're both the same, the space between the paragraphs will be 10px).

This is important because to align to my baseline grid, you need 20 pixels of space between each paragraph for everything on the page to line up. Therefore to get around this, I set top margins of the paragraph tag (and other tags) to 10px (to create some white space from the top of the page) and the bottom margin to 20px (to create a 20 pixel space underneath paragraph 1 whilst overriding the 10px top margin on paragraph 2). I could of just as easily made both top and bottom margins 20 pixels, but I just wanted to clearly demonstrate how CSS will collapse the vertical margin on elements.

In CSS, vertical margins around divs collapse to the size of the larger margin, in this case the 20 px margin below the header box

Adjusting border settings and styles which add extra pixels to your elements

This is important if you are dividing a vertical list of links using border styles.

When you add a border style to your elements, it will add extra pixels to the size of the element as well. In my case, because I've added a 1px top border to my list elements in order to divide them on the page, I've thus increased their line-height by 1 pixel (If I added a 1px border to the top and bottom it would increase the element size by 2 pixels).

Therefore to maintain the 20 pixel line height I set across the document, I decreased the bottom margin to -1px (there are other ways to do this as well, thats just what I did).

Why not to use hr tags

Horizontal rules are rendered differently across browsers and have many browser specific quirks. I use a div with a class I call "hr" and style the rule accordingly.

example:

css

.hr {
margin: 10px 0 20px 0;
border: none;
border-top: 1px solid #ccc;
clear: both
}

html

<div class="hr"></div>

And thats that. let me know if you guys have anything to add, and I'll include it if it's worth a mention. Now that you have some guidelines, I guess the rest is up to your creativity. Happy designing!