behance github medium

Web Layout 101: Vertical Rhythm is a Drummer

February 23, 2017 by

Designers and front-end coder tend to think more about columns than rows. That’s not surprising. As most devices are designed to scroll vertically, our page width is more limited than our page height, so dividing up the horizontal space seems like a natural place to start.

Vertical Baseline Rhythm

The 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 a grade school work book.

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 can’t see the actual underlying grid, we’re aware of it through a feeling of balance and ease in the layout. We might not know why it feels ‘right’, but we 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.

Wallpaper Mag

At first glance there isn’t an obvious grid – to my eye anyway.

But roll a 25px line-height grid across it and things becomes clearer. Elements aren’t always locked to each line – though some are – but many float inside the lines provided.

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 battling typographic percentages and margins and ‘hitting the grid’ became a goal in itself, rather than a tool to help me design better. That’s not fun or very useful.

It’s better to look at vertical baselines like a strong bass drum in a band. A strong beat marks out the space for the rest of the band to play in. But if everyone is bang on the beat, you probably have a fairly boring marching band (no offense to marching bands).

Personally, I like to set up a strong grid and use it. If there’s space between headings or paragraphs, it might as well be 1, 2, or 3 whole ‘vertical units’ – rather than 1.3 or 2.75 units. The feature image height might as well be exactly 12 units tall as 12.3 units, as the image’s bottom edge is now more likely to line up with any text along side it.

But if, say, the caption on those image looks too spacey when spaced over 25px line-heights, that’s fine. Just make it look good.

The grid is a trusted advisor – not a master

Related Posts


Leave a Reply

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