Understanding Baseline Rhythm in Typography

Have your pages got rhythm?

In a presentation for SXSW back in 2007, Richard Rutter and Mark Boulton explained the importance of ensuring that the text on your page maintains a “vertical rhythm”.

If you haven’t explored this concept yet, allow me to explain: if you were to overlay your text with equidistant horizontal lines (as if your page was a lined notebook from high school) then those lines should land perfectly between each of the lines of text on the page, regardless of whether the text is a heading, a regular paragraph, a sidebar … whatever. When this occurs, your page is said to have vertical rhythm — the text is easier to read than text that doesn’t line up, as it feels more cohesive and less disjointed.

It’s an easy way to bring some unity to your design without having to think too hard. The math involved is not difficult, but it can become confusing given that CSS allows us to use so many different units. Here are the steps that I use:

1. Decide upon a base font size to use for the main body (paragraph) text. I find it easiest to think in pixels at this point, but convert to ems later so that IE 6 users can still resize their text.
2. Decide upon the leading (line-height, in CSS parlance) that this text should have. A good choice is often 1.5 × base font size, but you’re advised to tweak this manually until it looks right to you.
3. Apply a line-height to the other text on your page so that the same rhythm as your paragraph text is maintained. The value to use for the line-height depends on the font-size for the text, but can be calculated using the simple formula line-height (in ems) = base line-height / font-size.
4. Adjust the margins of your headings, paragraphs and other elements so that the page’s vertical rhythm is maintained. Often this is as simple as applying a lower margin equal to the line-height that you’ve set for that element, but it depends on whether you have other margins or padding set. Boy, a Firefox extension to overlay equidistant horizontal lines over one’s page sure would come in handy for this step …

The formula works regardless of whether you use pixels, ems, or any other valid unit. But you obviously must use the same unit for both values on the right-hand side.

For example, if we were to choose a base font size of 12 pixels, we might use the following style rule to set our base font-size:

body {
  font-size: 12px;
  line-height: 1.5em; /* equal to 18px */
  margin: 0;
  padding: 0;
}

With this in place, we can set all those elements for which we want to be sized equal to our base font size:

p, ul, blockquote, pre, td, th, label {
  margin: 0;
  font-size: 1em;
  line-height: 1.5em;
  margin-bottom: 1.5em;
}

So far, so good.

Suppose that we then wanted our level-one headings to have a size of 1.67 times the base font size, or 12 × 1.67 = 20 pixels. To ensure that our page maintains its vertical rhythm, the line-height of the headings would need to equal 18 ÷ 20 (or 1.5 ÷ 1.67) = 0.9em.

h1 {
  margin: 0;
  font-size: 1.67em;  /* equal to 20px */
  line-height: 0.9em; /* equal to ~11px */
  margin-bottom: 0.9em;
}

See the slides and audio from Richard and Mark’s presentation for more detail, and Richard’s original article on vertical rhythm for a technique that allows users browsing with IE 6 to still resize their text.

While the math is easy, it’s the tweaking that can be inconvenient. If you suddenly decided that you wanted to increase your base font size from 12px to, say, 13px, then you’d have to calculate those values all over again, plug them into your style sheet, and then check that everything lines up as expected. Not the immediate feedback that your average short-attention-span designer is used to …

Well, Geoffrey Grosenbach has made the calculation step that much simpler, with his Baseline Rhythm Calculator. Simply input your base font size and desired leading, and the calculator will generate the CSS required to maintain the vertical rhythm on your page!

Of course, you might want to manually adjust the values that are generated (no doubt some readers will take issue with the concept of having a font-size or line-height containing 16 decimal places, for example), but this is certainly another useful tool to add to the designer’s arsenal.

Nice going, Geoffrey!