Web Layout 101: Vertical Rhythm is a Drummer

As a general rule, I think most designers and front-end coders spend more time thinking about the columns in their web layouts than the rows.

That’s not really surprising. As most devices are designed to scroll vertically, our page-width is a far more scarce resource than our page height — so dividing up the horizontal space seems like a perfectly sensible place to start.

What is Vertical Baseline Rhythm?

Vertical baseline rhythm — sometimes called the ‘vertical measure’ — is a grid of horizontal lines that you can use to hang your typography in. It’s not unlike the light-blue lines on the grade school workbook we all learned to write in.

Richard Rutter describes it like this:

Headings, subheads, block quotations, footnotes, illustrations, captions and other intrusions into the text create syncopations and variations against the base rhythm of regularly leaded lines. These variations can and should add life to the page, but the main text should also return after each variation precisely on beat and in phase.

The Elements of Typographic Style Applied to the Web

Often, even though we might not be able to see the underlying grid, we’re aware of it through a feeling of balance and harmony in the layout. We might not know why it feels ‘right’ – we just know it does.

But does that mean every page element has to bow to the grid?

No. Not necessarily.

How does Wallpaper Magazine… roll?

Wallpaper is a magazine that grew up in print. Their print layouts have always been neat, airy and classy with emphasis on attractive type and low ornamentation. Wallpaper’s online presence honors that approach.

At first glance, there isn’t an obvious grid — at least to my eye anyway.

But rollout a 25px line-height grid across it and things become a little clearer. Elements aren’t always locked precisely to each line — though some certainly are — but most float neatly inside the lines provided.

Watch the animation above — it has a jazzy rhythm to it. From the top down, it’s 2,2,1,10,3,… 2,2,1,1,2,1. Maybe it’s me, but I hear drums when I read it.

Applying a Baseline Grid to any page

I’ve often found it useful to be able to apply a grid to a live webpage. It helps with the early stages of development and gives you consistent units to talk about with your dev team. It’s also a nice way to help you analyze and understand why good site layouts – like Wallpaper – work.

Here’s how I do it on Chrome – but the basic method should work on most browsers.

1). Install the Stylebot extension and go to the page you want to add the grid to (the Stylish extension will work fine too).

2). Click on the Stylish button and ‘Open Stylish’. Copy the CSS below and paste it into the empty Stylebot panel.

body {
    position: relative;
}
body:active:after {
    display: none;
}
body:after {
    background: linear-gradient(0, rgba(200,225,255,0.6) 1px, transparent 1px);
    background-size: 17px 25px;
    bottom: 0;
    margin-top: 0px;
    content: '';
    display: block;
    height: auto;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    z-index: 9999;
}

You should immediately see light horizontal lines overlaying your page (see image).

3). You’ll probably want to adjust the grid. Change the second number in background-sizeto change the line-height of your grid.

``background-size: 17px 25px;

Change the color and opacity in the grid by editing the RGBA color in `background’.

background: linear-gradient(0, rgba(200,225,255,0.6) 1px, transparent 1px);

4). When you’re happy with the grid, hit SAVE, and your grid will be applied to any page you visit under that domain. Click ‘Cancel’ and then ‘X’ to close the StyleBot editor.

5). You can deactivate your grid (or any other CSS you’ve applied to the page) by clicking on the StyleBot button, selecting ‘Options’ and then ‘Styles’, and unchecking the box. You can switch your grid on and off any time you like.

Here’s quick screen grab showing the process in action. https://share.viewedit.com/wrPnnTvyMguMuDKD4TnXCo

The Takeaway: Vertical Baseline Rhythm is not a religion

Vertical Baselines are a handy tool but they shouldn’t take over your design. There was a time where I spent too much sweat trying to bend every page element to obey my mighty grid rules. I was arm-wrestling typographic percentages and margins and ‘hitting the grid’ became a goal in itself, rather than just a tool to help me design better.

That’s not fun or very useful.

I think it’s better to look at vertical baselines as a strong bass drum in a band. A regular beat helps to measure out the space for the rest of the band to play in.

Set up a beat, but play around it.

But if everyone is too bang on the beat, you probably have yourself a fairly boring marching band (no offense to marching bands).

Set up a nice backbeat that everyone can feel, but don’t be afraid of little flourishes that might land slightly off the beat. They can add energy and flavor to a composition (visual or musical).

Personally, I like to start with a strong grid and use it. If there’s whitespace between headings or paragraphs, it might as well be 1, 2, or 3 whole ‘vertical units’ — rather than 1.3 or 2.75 units.

Likewise, the feature image might as well be exactly 12 units tall as 11.8 or 12.3 units, as now the bottom edge of the image is more likely to line up nicely with any text flowing alongside it.

But if, on the other hand, the caption on those images looks too spacey when it is spread over 25px line-heights, that’s fine. It’s ok to forget the grid. Just make it look good.

The grid is your trusted layout advisor — not your master.