Moderate Rhythm

Excel­lent design is all about bal­ance. The designer should be well grounded in the­ory and mind­ful of con­straints. But rules should, on occa­sion, be bro­ken. 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 rea­son 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 cre­ate 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 Rut­ter picked up the man­tle 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:

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 for­get 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 Pol­icy 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.

Jeffrey D. King

About the Author

Jef­frey D. King is a web designer and con­sul­tant in San Diego. Jeff is pas­sion­ate about the inter­sec­tion of busi­ness and the inter­net. As a stu­dent of design, usabil­ity, brand­ing, and entre­pre­neur­ial strate­gies, he can help your orga­ni­za­tion achieve online success.

Comments

  1. Great arti­cle and links. Inci­den­tally, the check­mark inserted after vis­ited links is brilliant.

  2. @Ammon Thanks for the kind words.

Leave a Comment

Please note our comment and privacy policies.

(required)
(required)