Arranging space with typography on a website builds readability much like time sustains rhythm for music. The vertical rhythm can be defined as spacing and placement of text as users scroll down the page. Font size, line height, and margins are the three main aspects that control vertical rhythm.
Assigning font size, for example 12 point, is the first step to creating the line height for your page. From there you add space, in this case 6 point, between lines of text for easier reading. The total font size and leading space combine for your base unit line height, which should stay consistent throughout the page at 18 point. To ensure the rhythm flows overall, you might have to adjust the default margin settings. Both top and bottom margins should be set to your line height, which will in turn keep paragraphs spaced appropriately as well.
For headings or sidenotes, make sure that an increase in font size should be at a point that is a multiple of your line height. Headings can be set at multiples of 18 point for this example. Leading space between a heading and text must also be adjusted to maintain the ratio and rhythm. Since sidenotes are typically in a smaller size font, lining the text up with the body copy of the page continues the vertical rhythm. Additionally, if you are adding horizontal borders, harmonize the leading space so that measurements are set with line height. It may require a few calculations, but to keep your design appealing to visitors with short attention spans it’s best to provide ease wherever possible.
For a more in-depth look at vertical rhythm, click the link http://24ways.org/2006/compose-to-a-vertical-rhythm.
