Moderate Rhythm

Excellent design is all about bal­ance. The designer should be well grounded in theory and mind­ful of con­straints. But rules should, on occa­sion, be broken. As valu­able as ver­ti­cal rhythm is to qual­ity web design, there are times of right­ful aban­don. As in life, design should be mod­er­ate in all things, includ­ing moderation.

In 1992, Robert Bringhurst wrote in his book The Ele­ments of Typo­graphic Style:

For the same reason that the tempo must not change arbi­trar­ily in music, [line height] must not change arbi­trar­ily in type….

Head­ings, sub­heads, block quo­ta­tions, foot­notes, illus­tra­tions, cap­tions and other intru­sions into the text create syn­co­pa­tions and vari­a­tions against the base rhythm of [reg­u­lar line height]. These vari­a­tions can and should add life to the page, but the main text should also return after each vari­a­tion pre­cisely on beat and in phase. This means that the total amount of ver­ti­cal space con­sumed by each depar­ture from the main text should be an even mul­ti­ple of the basic [line height].

In late 2006, Richard Rutter picked up the mantle and intro­duced this prin­ci­ple to the web design com­mu­nity. Over the next year, arti­cles at rep­utable sites con­tin­ued the theme:

• Set­ting Type on the Web to a Base­line Gridat A List Apart
• Typog­ra­phy: Base­line Rhythm Deci­phered at SitePoint
• Type that keeps the beat at 37Signals

Atten­tion to ver­ti­cal rhythm cer­tainly increases the qual­ity of web design. Align­ment of base­lines is imper­a­tive in adja­cent columns of body text. Mis­aligned base­lines com­mu­ni­cate neglect of detail. This is true with news­pa­per or neigh­bor­ing pages in a book. But rigid­ity of appli­ca­tion can leave a design as stale as a march penned by a com­poser des­per­ately need­ing intro­duc­tion to Coltrane.

While the music anal­ogy is help­ful, we must not forget that type is its own form. Set­ting of type must have visual appeal. Sit­u­a­tions exist where ver­ti­cal rhythm no longer makes sense. On this site, extra padding has been added between list items. A full line height was exces­sive. No padding called for room to breathe. We set­tled on one-​third of the stan­dard line height to buffer each list item. This sub­stan­tially increases read­abil­ity, par­tic­u­larly with long lists (see our Com­ment Policy as an example).

How­ever, as the padding is applied to lists of vary­ing count, there is no guar­an­tee the list height will total an even mul­ti­ple of the basic [line height]. In the list of links above, we actu­ally lost one-​third of a line-​height — did you notice? Com­pro­mise like this will cause the base­line of the side­bar text to mis­align with the body text. But that is a small com­pro­mise for visual balance.