Tips For Setting Up A Baseline Grid

Posted: 29 Sep 2011 05:30 AM PDT

When people talk about typographic grids it often revolves around the horizontal and aligning elements to columns of precise widths. The vertical gets slighted at times due to the dynamic heights of web pages.

However, we shouldn’t ignore the vertical. We should set the vertical to a baseline grid.

The last few days while working on a redesign for this site I’ve been putting a lot of time into setting up a baseline grid and refining that baseline across different responsive breakpoints. I thought I’d share some of what I’ve learned.

I’ve also set up a simple demo where you can turn the baseline grid on and off to see the difference.

Why Use a Baseline Grid

Baseline grids set your type and create vertical rhythm through your design. They make your text easier to read and they make the whole of your type feel more cohesive, helping give unity to your design.

Setting up a baseline grid is about controlling the vertical space in your design. Like the intervals in music the space and scale in design creates rhythm.

Without rhythm readers can get lost. With rhythm they are guided through your copy.

A baseline grid simply makes for a better reading experience.

How to Create a Baseline Grid

Creating a baseline grid comes down to paying attention to a select few properties, however it’s important to be consistent with these properties across your design.

font-size
line-height
top and bottom margins
top and bottom paddings
top and bottom borders

Your line-height (your leading) is what sets the grid. Imagine a lined notebook. Each line is a grid line and each line of your text would sit on one of those lines. Occasionally you’ll skip a line and then your text once again sites on a baseline.

The space between each pair of lines, the baseline, is your line-height.

Even though your line-height sets the grid you’ll want to start by choosing a typeface and a font-size and then set a line-height based on both. This is designing from the content out.

These choices are up to you and your design, but once set everything else will follow from these choices.

In the spirit of flexibility I recommend setting vertical units in ‘em’s as opposed to ‘px’s. Your line-height can be set as a unitless number or in ‘em’s.

 body {   normal font: 1em/1.5 "Georgia", "serif"; }

Here I’ve used the font property shortcut and set Georgia at 1em (which defaults to 16px) and a line-height of 1.5, which corresponds to 24px. This becomes the baseline unit.

Of course not every element in our design is going to have the same font-size. That’s ok as long as we compensate with line-height, which needs to remain some multiple of our baseline unit.

 h1 {   font-size: 2.5em;   line-height: 1.2; }

Above I’ve set the font-size of the h1 to be 2.5em or 40px (16 × 2.5 = 40). 40px doesn’t sit on a baseline, though. Neither would 60px which is what we’d get with the basic line-height of 1.5 that we set on the body above.

However, setting the line-height to be 1.2 leads to a line-height of 48px (40px × 1.2 = 48px) or twice our baseline unit, ensuring we stay on the grid.

The Box Model

A consistent line-height is the first step, but there’s more to setting type to a baseline grid. You’ll probably want to set some kind of margin between paragraphs and headings for example.

Divs, sections, and other block level elements will probably get top and bottom padding as well as margins. And how about the occasional border above or below an element? All affect the vertical space in your design.

If you look at the image above of the css box model there are 4 areas that get measurements — content, padding, border, and margin, each with a vertical component.

When we set the line-height to be some multiple of the baseline unit we ensure the height of the box’s content will be a multiple of the baseline unit. That still leaves the three other measurements

Let’s add a couple more elements to the mix.

 p {   margin: 0 0 1.5em 0; } h2 {   font-size: 1.5em;   line-height: 1;   margin: 1.5em 0 0.5em 0; }

I like setting either the top or bottom margin on paragraphs, usually the bottom margin. At 1.5 em it corresponds to the 24px of the baseline unit ensuring that anything that follows remains on the grid.

Here I’ve set the h2 to be larger than the text. 1.5em corresponds to 24px, which is our baseline. Because the font-size has been changed other ‘em’ measurements will refer to it. So the line-height of 1 here is again the same 24px.

I want the h2 to have some space around it and following the principle of proximity I prefer to have more space above than below.

Neither the top or bottom margin is equal to a multiple of the baseline unit, but together they are.

1.5 × 24px = 36px

0.5 × 24px = 12px

36px + 12px = 48px = 2em = 1.5em + 0.5em

Because of the way the margins are set, the h2 itself won’t sit on a baseline, but that’s ok, since the combinations of margins assures that whatever follows will be back on the baseline grid.

While I haven’t specifically used paddings or borders in the examples above, hopefully you get the idea. You’d do the same thing with both as I did above with the margin.

Ultimately you want to make sure the total height of the box is a multiple of your baseline unit. The line-height will take care of the content part of the box model and padding, margin, and border take care of the rest.

None of the above is difficult, but it does require consistency and attention to detail. Add a little border and you need to remove it’s width from margin or padding. Sometimes the math isn’t fun, but it’s not exactly difficult.

Remember Your Elements

Even with a little math this is still pretty simple when you’re looking at two or three elements, but remember you need to think of all of your elements.

You need to consider all your hx elements, paragraphs, unordered and ordered lists, blockquotes, images, divs and other block level elements, etc.

You may want to look through one or two css reset files to get a feel for all the elements you’ll need to think about. If you forget to account for one of them it’ll throw the rhythm of your grid off, assuming you use that element on the page.

Fortunately by setting the line-height on your body you cover a lot. If you add a basic margin and padding to typical elements in a reset you cover most everything you don’t commonly use.

Just be careful with the elements you do use and particularly those where you alter the size of the font or plan on using one of the vertical properties of the box model.

Images and Other Non-Text Elements

Not every element is going to contain text and so line-height alone won’t keep the height of its content a multiple of the baseline unit.

For images you’ll want to keep your basic unit in mind when creating the images to make sure their height is a multiple of your basic line-height.

For any image that can’t be created this way, you’ll need to adjust margin, padding, or border to get what follows back on the grid. Similar for other non-text elements.

Working with a Visual Grid

Trust me when I say this is all easier when you can see the grid. Here or there while in development you’re going to have elements off the grid and it’s going to be hard to spot them looking at the math in your css.

Much better is to set a background image on your html or body element that shows the grid. Seeing the grid will quickly let you know where something has gone astray.

There are different ways to create the image or create a Photoshop pattern for the grid. Some people like to create rows of alternating colors. I prefer to create a simple image in Photoshop as follows.

Create a blank canvas equal in height to your baseline unit. I typically make the entire canvas a square.
Set the background in the canvas to be transparent
Add a 1px line of color at the bottom. I like using a medium gray color, but any color will work.
Save the image as a transparent .png
Add the image as a repeating background image to your html or body element

I turn this baseline image on and off while developing depending on whether or not I’m working on the baseline grid.

When I see something has fallen off the grid I check the element in the Webkit Inspector (or Firebug, Dragonfly, or other) and look at the computed values for font-size, line-height, and top and bottom margins, paddings, and borders.

I fix whatever is off and work further down the page. It pays to have a calculator nearby too.

Summary

You may wonder if a baseline grid is worth it. It can be a lot of math and it does require paying attention to detail across a variety of different elements. It is worth it.

The first time you set one up and compare the page on the grid to the same page without a baseline grid you’ll immediately notice the difference and agree.

You’ll feel the rhythm of space and positive elements as they pull you down the page and you’ll enjoy how text and other elements aligns across columns, even as their font-size varies.

If you’ve never set a baseline grid I highly encourage giving one a try. If you have used them do you agree they’re worth it?