I wanted to share a simple trick I’ve been using recently for quickly adding baseline grids to nearly any element on a page. It’s nothing too fancy, and it’s very easy to implement.

Demo: Baseline Grid on Any Element Example

Download Demo: easy_baseline_demo.zip (12KB)

In the demo above, you’ll see various baseline grids (and combinations of grids). There’s a switch in the top right to turn the grids on and off.

To make a 21px Baseline Grid, you would apply the class “baseline_21″ to the element which you want to apply the baseline grid to. In your stylesheet, you would add the following CSS:


.baseline_21 {
position:relative;
}

.baseline_21::after {
z-index:9999;
top:0;
bottom:0;
left:0;
right:0;
position:absolute;
content:'';
}

.baseline_21::after {
background:url(images/baseline_21.png);
}


Adding this class to an element will make that element “position: relative;” (meaning that this won’t work on elements where position needs to be something else). Then, using the ::after pseudo-element, we apply a background that is positioned absolutely to fill the entire element.

The background image is a 42px tall graphic divided into two rows. The rows alternate with their background color. The top row has no background, just a red baseline, and the bottom row has a 20% opaque white (or other color) background. This just helps me follow the rows on wide documents.

As shown in the demo, it’s easy to apply baseline grids to children inside the element with the baseline grid as well. By adding multiple backgrounds to a baseline grid, you could also overlay a column grid using this method.

Full disclosure: I’m not a typography guru, and the demo might not be a very solid example of baseline grid usage. Also, I whipped up the demo very quickly, so there may be an error or two in some browsers.