Designer Toolbox: Vertical Rhythm

baseline grid gif

I’ve recently revisited the concept of vertical rhythm in page design and I like to think it’s paying off in practice. By adhering to a simple baseline grid I’ve noticed improvements in my typography, layouts, and design consistency.

Line-height-based grid

I start by choosing a typeface and font size for body text. In this example, I’ve chosen Aktiv Grotesk Regular at 18px. (image not to scale)

body text

Next, I choose an appropriate line height—typically around 1.5× the font size. Here, the line height is set to 28px.

line height

This line height, or space between the baselines of text, becomes the baseline grid. This design will have a baseline grid of 28px.

baseline grid

Grid-based type

I can use the grid to set other type, for example, this H2 in Adelle PE Bold at 36px. Notice its positioning on a baseline.

heading 2

Setting line heights for headings can be tricky, take this multi-line H3 for example. Blindly following the baseline grid results in leading either too close together, or too far apart.

multi-line

However, if I ignore line two, and baseline just the first and third lines of text, I get much better spacing. This H3 is set in Adelle PE Light at 27px, with a line height of 42px. 

h3

All together it looks like this.

type all together

But again, I don't want to blindly follow the grid. Notice that the H3, which serves as a subheading for the body text, is actually closer in proximity to the H2.

proximity

Adding vertical space between the two headings positions the H3 closer to the subsequent paragraph, resulting in better hierarchical type.

heirarchy

I position the second line of the H3 on a baseline to achieve the desired spacing, a 21px drop.

rhythm

Yes, now the body text is off the grid, but that's okay. The purpose of the baseline grid is to guide design decisions, in this case the line height and spacing of type. Though the theory of vertical rhythm is sound, perfection is unattainable on the web. There are too many variables. For example, reducing the H3 from three lines to two is a small change, but does alter the rhythm.

two-line h3

The grid affords me confidence the design has meaningful vertical rhythm, type set for cohesion and an easy read.

finished product

Grid-based layouts

The principles of vertical rhythm can also be applied to page layouts. Size and placement of imagery, buttons, navigation, and many other design components can be aided by the use of a baseline grid. In this example, adhering to a 25px grid results in effective vertical rhythm, but also an attractive layout, as elements begin to line up horizontally across the page.

amazee labs example

example a

example b

example c

The 2018 Texas Camp website is another good example, one I designed using a 20px baseline grid. The site is in production now, developed with impressive accuracy—rhythmic desktop and mobile screens alike. This handy Chrome extension will overlay the baseline grid in-browser.

texas camp grid

example d

example-e

example f

example i

Grid-based conclusion

Again, I'm not suggesting perfection is the goal. By all accounts, flawless vertical rhythm on the web is unattainable. But using a baseline grid as a design tool has improved my product. These grid-based designs flow more effortlessly than before, truly in rhythm I think.

May 17, 2018
2 Comments

Get our Newsletter

 
 

Comments

Excellent writeup, it's amazing how much difference the baseline grid can make.

In all the cases where you shifted an element it looks as though the resulting off-grid lines are about half out. Could you use a half-size grid and get the same effect or is that just a trick of the eye?

By Jason
2 months ago

Jason, thanks for the note. It's true that reducing a baseline grid of 28px to 14px would allow for more design components to fall in rhythm. In the extreme, a 1px baseline grid would allow for everything to be in rhythm. That being said, there seems to be a sweet spot in which the design really sings, one I determine with the line height of my body text.

By Andrew
2 months ago

Add new comment

You must have Javascript enabled to use this form.
icon
What is Amazee Labs?