CSS typography: setting a vertical rhythm

An increasing number of people are starting to think about vertical rhythm in their web typography, so I thought I’d share my CSS implementation, which uses ems (to allow for text resizing), a global line-height and negative margins for headings.

The basic idea behind composing to a vertical rhythm is to keep text lined up on an imaginary grid of evenly spaced horizontal lines all the way down the page. The effect is unconscious to the average reader but helps to make the layout of the page feel harmonious and restful.

Handily, the CSS property line-height can be set globally on the BODY element and inherited down through every other element to form the basis of our invisible grid (which I’ve made visible on my example). We also set a default font size in a similar way:

body {
font-family: Verdana, sans-serif;
font-size: 0.875em; /* set default font size to 14px */
line-height: 1.42857em; /* set global line height to 20px */
}

In order to maintain our grid, it is important that the margins relate to the line height rather than the font size. So we set margins on individual element types like this:

p { margin: 1.42857em 0; /* Set margins on paragraphs to 1 x line-height */ }

Of course, not all text on a page will be the same size, so we can vary this on individual element types (note that this doesn’t affect the line height, which retains its value as inherited from the body element). The important thing is to adjust the margins accordingly:

#sidebar p {
font-size: 0.85714em; /* reduce font-size to 12px for #sidebar */
margin: 1.6667em 0; /* adjust margins accordingly */
}

You’ll see there’s a bit of maths going on here. To work out a new font size in ems, simply divide the target pixel size by the default pixel size. So if the default font size is 14px and we want a pixel size of 12px, we set it to 12/14 = 0.8571. Then, remembering that margins relate to the font size, we scale them so they match the global line height. In this case we want a margin of 20px (to match our line height) so the calculation is 20/12 = 1.6667.

So far so good. The only other tricky bit comes if we want to set the margins on our headings so that they are closer to the text below them, and have a bigger margin above. This helps re-inforce the relationship between a section of text and its heading, and helps create more appropriate spacing between sections.

One way to achive this is to double the top margin for headings, but that can make the spacing pretty large. So often I prefer to move the headings down by a fraction of the global line height. The important thing here is to keep the overall rhythm going, even though the rhythm is broken for a particular heading (maybe we should call this ‘syncopated headings’). To do this, just make sure that when you take something off the bottom margin, you add the same amount onto the top margin. That way the overall grid is maintained. We can use negative bottom margins to help with the interaction with the top margin on a following P element:

h2 {
font-size: 1.2857em; /* 18px */
margin: 1.6666em 0 -0.5556em; /* top margin: 30px, bottom margin: 10px */
}

And that’s basically it. You can see a live demo of this technique here. I’ve added the horizontal grid lines on with a background image, to help see how the spacing works.

10 thoughts on “CSS typography: setting a vertical rhythm

  1. Good stuff! I like the custom margins for headings, something i’d tried to do before but not quite got right, seems that the negative margin will do the trick.

    Thanks,
    Ben.

  2. Pingback: Typefacts | Zeilenabstand

  3. Bravo for pointing out the need to use asymmetrical margins to “pin” headings to the text below: that’s good typography. So many of the css frameworks do just the opposite: either have heads floating equidistant from text above and below, or have a greater margin-bottom for smaller heads, which makes no sense!

  4. This article is bloody good mate. I’ve been trying to wrap my head around the implementation of the concept of Vertical Rhythm and the Golden Rule in CSS. You’ve just made this easy.

    Cheers.

  5. You are a lifesaver mate!! I’ve been trying to explain vertical rhythm to my group for months. Perfect write up.

    Joe

  6. Pingback: Vertical Rhythm in Web Design | ZACK BRADY

  7. Pingback: Web Design and Typography Part 2: Vertical Rhythm and Baselines | ZACK BRADY

  8. Pingback: Vertical Layout and Typography Part 2: Vertical Rhythm and Baselines | Suits & Sandals, LLC.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>