Excellent design is all about balance. The designer should be well grounded in theory and mindful of constraints. But rules should, on occasion, be broken. As valuable as vertical rhythm is to quality web design, there are times of rightful abandon. As in life, design should be moderate in all things, including moderation.
In 1992, Robert Bringhurst wrote in his book The Elements of Typographic Style:
For the same reason that the tempo must not change arbitrarily in music, [line height] must not change arbitrarily in type….
Headings, subheads, block quotations, footnotes, illustrations, captions and other intrusions into the text create syncopations and variations against the base rhythm of [regular line height]. These variations can and should add life to the page, but the main text should also return after each variation precisely on beat and in phase. This means that the total amount of vertical space consumed by each departure from the main text should be an even multiple of the basic [line height].
In late 2006, Richard Rutter picked up the mantle and introduced this principle to the web design community. Over the next year, articles at reputable sites continued the theme:
- Setting Type on the Web to a Baseline Gridat A List Apart
- Typography: Baseline Rhythm Deciphered at SitePoint
- Type that keeps the beat at 37Signals
Attention to vertical rhythm certainly increases the quality of web design. Alignment of baselines is imperative in adjacent columns of body text. Misaligned baselines communicate neglect of detail. This is true with newspaper or neighboring pages in a book. But rigidity of application can leave a design as stale as a march penned by a composer desperately needing introduction to Coltrane.
While the music analogy is helpful, we must not forget that type is its own form. Setting of type must have visual appeal. Situations exist where vertical rhythm no longer makes sense. On this site, extra padding has been added between list items. A full line height was excessive. No padding called for room to breathe. We settled on one-third of the standard line height to buffer each list item. This substantially increases readability, particularly with long lists (see our Comment Policy as an example).
However, as the padding is applied to lists of varying count, there is no guarantee the list height will total an even multiple of the basic [line height]
. In the list of links above, we actually lost one-third of a line-height — did you notice? Compromise like this will cause the baseline of the sidebar text to misalign with the body text. But that is a small compromise for visual balance.
