Typography: Baseline Rhythm Deciphered

Matthew Magain
Tweet

Have your pages got rhythm?

In a previous post I reported on Richard Rutter and Mark Boulton’s web typography presentation at SXSW, where Richard 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.

A screen shot of a web page, overlaid with equidistant horizontal lines to show how the type on the page lines up, regardless of font size

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!

Geoffrey Grosenbach's Rhythm Baseline Calculator

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!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Neil

    Why use units on the line-height at all? They’re not needed or necessary, imo.

  • http://www.sitepoint.com Matthew Magain

    Good point Neil. line-height can take either a unitless value to be multiplied by the font-size, or a fixed distance, with units.

    For those with a print background, it can be more intuitive to think in specific distances, as traditionally this is how leading is expressed (e.g. Palatino 12/18 refers to a 12pt font size and leading of 18pt). But an absolute value is definitely fine too.

  • http://www.sitepoint.com/ Kevin Yank

    There is one big difference between specifying a line-height with units (em, ex, %, pt, pc, in, cm, mm, or px) and using a unitless muliplier as Neil suggests.

    Traditionally, using a unitless multiplier was the preferred method, because descendant elements would inherit the multiplier, and not the calculated value. For example, if you set the line-height on a p element to 1.2 and its absolute font size was 10 pixels, it would have a leading of 12 pixels, but if that paragraph contained, say, a span element with a font size of 15 pixels, the leading around that span would increase to 18 pixels (1.2 × 15 pixels).

    While handy for allowing lines to expand to accommodate larger content, this behavior would interfere with the “vertical rhythm” discussed in this article, which is why it is not recommended when applying this design style.

    Instead, if you wish to set a vertical rhythm, you should specify the line-height using absolute or relative units. The em is popular, as it allows you to specify a value in terms of the font size. For example, if you set the line-height on a p element to 1.2em (note the unit this time!) and its absolute font size was 10 pixels, it would again have a leading of 12 pixels, but this time if the paragraph contained a span element with a font size of 15 pixels, the leading around that span would remain fixed at 12 pixels, as the absolute measurement is inherited from the paragraph, rather than the ratio.

    Of course, in this example you would get the large-font span overlapping the line above it because the line height would be too small for the font in the span, but your vertical rhythm would remain intact.

    Hope that clears the issue up.

  • Lisa Herrod

    Interesting post Matt, thanks ;)

    Just one point I’d like to question, from a best practice, usability position, why are font sizes specified in pixels?

    I see Geoffrey’s tool requires font sizes to be specified in pixels, and in the auto-generated CSS is produces code for the font in pixels and the line height in em’s.

  • http://www.sitepoint.com Matthew Magain

    Lisa: AFAIK setting font size in fixed units only prevents users on IE6 or earlier from resizing their text. See my link to Richard’s article on 24ways above for details on how this can be addressed.

  • http://www.sitepoint.com/ Kevin Yank

    Specifying the font-size in pixels would only be necessary if you wanted your vertical rhythm to include graphical elements as well. I personally use this technique with font-sizes specified in ems, and it works fine.

  • Bert

    Ok, I’m all for this, but one question:
    How do you maintain the vertical rhythm when you use things like sub or superscript?

  • anonymous

    nice article.. Small correction, I could be wrong, I thought that

    1em = 12pt = 16px.

    This is in reference to your your comment in the CSS Where you said that 18px = 1.5em where it should be 18pt = 1.5em

  • http://rimantas.com ImCat

    @anonymous, yes, you are wrong. In CSS ‘em ‘ = font-size for the element (or element’s parent, if elementy does not have font-size set).
    So if font-size for body is 12px then em for body is also 12px and 1.5em makes 18px.