web typography study guide

Vertical Rhythm

Rhythm is a repeated pattern. The more consistent the pattern, the better the rhythm. In print design, the designer uses a baseline grid to set type in order to create vertical rhythm and give unity to the design. The concept is similar on the web. As the viewer’s eye descends the page, everything should be lined up on an imaginary grid of evenly spaced horizontal lines. This improves readability and helps to make the layout harmonious and organized.

Vertical rhythm on the web is contributed to by font-size, line-height, and margin size.

Set the Base Font-size and Line-height

The line-height is determined by the font-size of the body copy. If the base font-size is 12px or 0.75em (12 ÷ 16 = 0.75, 16px is the default browser font-size), then a proper line-height could be 0.75 × 1.5 = 1.125em (150% taller than the font-size, or 18px).

Set the Space Between Paragraphs

The browser’s default value for spacing between paragraphs is 1em for both the top and bottom margins. If the rhythm of the page is to be maintained, the spacing of paragraphs should be related to the basic line-height unit. With the paragraph property <p>, the values of the top and bottom margins can be set equal to the line-height.

Text Size Variations

Of course, not all text on a page will be the same size. The type in the heading may be larger, and that in the sidenotes may be smaller. To keep the vertical rhythm, the line-height will remain the same, but the margin will be adjusted accordingly.

FFollowing the previous example, if the sidebar font-size is set to 10px or 0.833em (10 ÷ 12 = 0.833; the default was set to 12px in the body property), then remember that margins relate to the font-size. The margin is to match the line-height of 18px, so the calculation is 18 ÷ 10 = 1.8.

The margins of the heading maybe a little trickier because it is more readable when the top margin is slightly larger so that there are more spaces between sections, and so that the bottom margin, where the heading relates to the following texts, is closer. A good approach to solving this problem is to take some space from the bottom margin and add that same amount to the top margin.

Based on the unified 18px line-height, the top margin of the heading can be 18 + 10 = 28px tall, and the bottom margin can be 18 – 10 = 8px wide.