Designer Toolbox: Vertical Rhythm

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)

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

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

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.

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.

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. 

All together it looks like this.

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.

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

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

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.

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

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.

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.

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.