Articles & Notes

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:

• 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 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.

Design­ing one’s own web­site has the same bless­ing and curse: there is no imme­di­ate finan­cial incen­tive to com­ple­tion. This can (and does) push the roll-​​out date, mostly as pay­ing jobs take priority.

But this also works as an advan­tage. With­out the bur­dens of time­lines or pro­duc­tiv­ity on my shoul­ders, I find that I am much more inno­v­a­tive. This inno­va­tion is not just a ben­e­fit to this site, but to my client’s sites as well — as these ideas are reused. In short, design­ing this site has become a play­ground, where I can try things that I would nor­mally not have time for.

In par­tic­u­lar, dur­ing the course of devel­op­ment of the new KING­desk design, I have assem­bled two sig­nif­i­cant advances in web design. One will have broad appli­ca­tion; the other more nar­row. Before I roll these out for pub­lic con­sump­tion, I need to get a lit­tle fur­ther along with the KING­desk design. They may draw a lit­tle atten­tion, and we need to have our Sunday’s Best on. Stay tuned…