Sorry this page looks weird. It was automatically migrated from my old blog, which had a different layout and different CSS.

Vertical Baseline Rhythm

Why bother?

I spend my working life creating web apps. I do everything, but first and foremost I am a programmer. Although I like to think I have a good eye for web design — how things look — it’s “read only”: I know and appreciate a good design when I see it but I can’t create it myself.

Since I’m hopelessly out of my depth with every image editor on the market, including Acorn (“you don’t need a Ph.D in computer graphics”), I have been drawn increasingly to typography. Not in terms of designing typefaces but rather learning how to make text look better. You tend to use a calculator, not an image editor, so it’s more tractable for me.

Anyway, establishing a vertical baseline rhythm is one technique to improve the legibility of text. After reading Compose to a Vertical Rhythm, Designing for the Web, and Get Rhythm in Your Baseline, I thought I’d have a go on Girls in Football (in beta, so unfortunately you can’t see what I mean yet).

Helpful Tools

Sorting out the textual elements was straightforward. Two tools helped greatly: Slammer and DebugBar.

Slammer is an OS X app that floats a semi-transparent grid over other windows, allowing you to see at a glance whether your baselines are rhythmic. It does more, but this alone makes it indispensable.

DebugBar is an Internet Explorer plugin which comes closer to Firebug than anything else I’ve seen on IE. It has a DOM inspector, HTTP inspector, Javascript inspector and console, and more. I find it extremely useful for getting to the bottom of bizarre IE behaviour.

Stumbling Blocks

Once the textual elements are done, you are left with forms and images. Forms elements and buttons throw a spanner in the works because their sizes vary from browser to browser. Images disrupt the baseline rhythm unless their heights are an exact multiple of your line spacing — which generally they aren’t.

I haven’t tackled forms yet, but I did solve the image problem.

jQuery Plugin for Images

Geoffrey Grosenback mentioned a technique he had heard about for handling images: replace each image with a div of the same width and a height which is a multiple of the baseline rhythm, and set the image as the div’s background. Since the image is now in the background it won’t overflow the div and will therefore slot neatly into the baselines.

This avoids squashing the image, though it does mean chopping a little off if you round the height down to the nearest baseline.

Anyway, I made this into a jQuery plugin called rhythm which can be used like this:

  $(window).load(function() {
    $('img').rhythm();
  });

It works in Safari, Firefox and IE7.

You can see it in action on Girls in Football, or at least you will be able to when we come out of beta. For every image it calculates where the nearest baseline is and “rounds the image” up or down to it. When rounding down you lose a little bit of image, and when rounding up you gain a little whitespace.

It works really well, and it’s very satisfying to drop Slammer over the bottom of your page and find the vertical baseline rhythm still going strongly.

Now I need to apply everything I’ve learned to this site…

Comments

Hey there - I’m trying to get this to work, but I’m not quite sure how to incorporate it. This is what I have in my header:

$(window).load(function() {
  $('img').rhythm();
});

Am I missing something? Thanks for your help.

Jim • 8 July 2009

Hi Jim, that looks correct to me.

I suggest you locate the problem by putting some console.log debugging statements in the Rhythm javascript and seeing whether you get the values you expect for line height, image size, etc.

Andy Stewart • 8 July 2009

Andrew Stewart • 4 June 2009 • CSSTypography
You can reach me by email or on Twitter.