Web Design Basics: What Is Vertical Rhythm?

Web DesignOver the last few years grid-based design has taken off in a big way in the web hosting world. There are hundreds of different CSS and SASS frameworks to choose from, many of which are functionally indistinguishable from each other, and a small portion of which tackle the problem in novel ways. Most grids are concerned with splitting pages into columns and rows, into which elements are organized. Grids of this sort are great, but they tackle a different problem to the one we’re looking at today; they’re more concerned with layout than vertical rhythm.

Vertical rhythm might seem a somewhat abstruse concept if you haven’t come across it before. It concerns the rhythm with which elements are distributed on the page. Rhythm simply means the repetition of a pattern. To take a relevant example, a line of body text takes up a specific amount of vertical space on the page. That space is determined by the line height of the paragraph, and it’s a rhythm that is repeated throughout the paragraph. Vertical rhythm of the sort we are discussing selects a measure on the page and repeats it throughout the page.

Why care about vertical rhythm? Because it gives the page a feeling of organization and coherence, in the same way a heard rhythm helps maintain a sense of coherence in a piece of music.

Usually, vertical rhythm is based on line height. Let’s say you have selected a font size of 16px and a line height of 1.5 for a site’s body text. The line height is therefore 24px (16*1.5). We can use 24 pixels as the base measure for our vertical rhythm, aiming to have that measure repeated throughout the page. We want spaces between paragraphs and the space that headings fill to equal a multiple of the base measure. In this way maintain a consistent rhythm throughout the page.

How do we maintain the rhythm on headings that have both a different font size and a different line height to the body text? It takes a relatively simple bit of math and some line height tweaks. If we have an h2 sized at 20px, and we use the same line height as the body text, a line of h2 will take up 30px, which is not a multiple of 24 and would break the vertical rhythm. We must adjust the line height of the header so that it fits. The math to do this is fairly simple. We take the base measure and divide it by the header text height, which gives us 24 / 20 = 1.2. Of course, 20 * 1.2 is equal to our base unit of 24px.

A line height of 1.25 on the h2 elements will ensure they take up the same amount of space as one line of body text and maintain our vertical rhythm. You can then add margins equal to the base unit if you want more spacing.

Tools For Creating Vertical Rhythm

There are several tools that make the process of implementing vertical rhythm straightforward. On simple sites, you can do the math yourself, but on complex pages it can be time consuming to calculate exact line heights, margins, and padding for the various on-page elements.

If you’re a Compass user you’ll be happy to hear it has a comprehensive set of tools for creating a baseline grid for vertical rhythm. If Compass isn’t your thing, Sassline is an excellent SASS typography framework with precise vertical rhythm mixins.

Matthew Davis is a technical writer and Linux geek for Future Hosting.

Dedicated Server Special

Take advantage of our Double RAM offer on the E3-1230v2 4 x 3.30GHz+HT server! Only $134.95 per month. Managed and Unmanaged options available at checkout.

GET STARTED