Articles & Notes

5 Principles And Ideas Of Setting Type On The Web

Smash­ing Mag­a­zine: 5 Prin­ci­ples And Ideas Of Set­ting Type On The Web

Optimal Line Height

The theory and the appli­ca­tion of opti­mal line height — called lead­ing in typo­graphic cir­cles — varies greatly in web design. Typog­ra­phy ref­er­ences con­sis­tently put ideal line height at 1.2 ems (a mea­sure of type equiv­a­lent to the the letter height or point size of a typeface).

Yet, pre­mier web design­ers (and typog­ra­phy affec­tion­atos) reg­u­larly set line height to 1.5 ems or more. That is a 33% over­state­ment of the pre­ferred height. This cre­ates a strip­ing of text, rather than the desired grey­ing. When Jason Santa Maria crafted the cur­rent A List Apart design, he set the line height to a whop­ping 1.8 ems. Why is this done?

This is partly explained when one con­sid­ers the line length of the sub­ject designs. The designs require line lengths (or mea­sure) notably longer than those rec­om­mended in typo­graphic ref­er­ences. The increased line length demands increased line height to aide eye track­ing. This does not make for ideal type, but it does make for the best typog­ra­phy for the sub­ject design. James Felici says it well in his book The Com­plete Manual of Typography:

An axiom of com­put­er­ized type is that lead­ing should gen­er­ally be 1.2 times the point size of type. This isn’t a ter­ri­bly useful guide­line, because it’s clear that lead­ing must increase along with the measure.

One con­se­quence of this is other web design­ers look at what the elite are doing, and apply that line height regard­less of line length. This leads to line heights that are unnec­es­sar­ily out of proportion.

So as a gen­eral rule, an opti­mal line length is 60 to 65 char­ac­ters, or 30 ems. At that mea­sure, the ideal line height should be approx­i­mately 1.2 ems. As line length increases, line height should follow pro­por­tion­ately. The body text in the KING­desk design is set to a mea­sure of nearly 27 em and a line height of 1.2 ems.

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:

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.

From the PortfolioTurnAround Schools

A very clean and min­i­mal­ist design that places empha­sis on the con­tent. This web­site con­sists pri­mar­ily of static html pages, but incor­po­rates a blog­ging con­tent man­age­ment system into a sub­di­rec­tory. Refresh the front page a few times, and notice the photos and tes­ti­mo­ni­als update.

TurnAround Schools

Since the web­site redesign, Turn­Around Schools has seen a dra­matic increase in online reg­is­tra­tions for their train­ing insti­tutes. This was a pri­mary objective.

From the PortfolioKINGdesk

A con­trast in bold color and subtle tex­ture. The rich bur­gundy makes a strong state­men while its tex­ture mimics that of a upscale leather desk — paying homage to the site’s name. Less noticed is the parch­ment tex­ture behind the main con­tent block.

KINGdesk web design

This design chal­lenges many norms in web design. While lack­ing a tra­di­tional header and footer, the order of the site still makes intu­itive sense. By push­ing the design hor­i­zon­tal, the dimen­sion of the site works well with today’s widescreen monitors.

Typog­ra­phy played an impor­tant role in this site’s devel­op­ment. Many design­ers shy away from jus­ti­fied mar­gins because of the dif­fi­culty of hyphen­ation on the web. KING­desk incor­po­rates a hyphen­ation engine that allows for jus­ti­fied text with­out ghastly over­sized word spaces. Nearly every spa­cial dimen­sion of the site is depen­dent upon the text size. This allows for zoom­ing of the site in every modern browser by resiz­ing the text. A widget has been specif­i­cally devel­oped and included in the side­bar to con­ve­niently facil­i­tate this.

A Lack of Monetary Incentive

Designing 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 paying 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, during 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 narrow. Before I roll these out for public con­sump­tion, I need to get a little fur­ther along with the KING­desk design. They may draw a little atten­tion, and we need to have our Sunday’s Best on. Stay tuned…

Safari Run-in Errors

Safari 3 run-​in errors:

  1. Loses posi­tion on text resiz­ing, caus­ing text overlap
  2. Top margin improp­erly col­lapses when fol­low­ing an unordered list
  3. Loses posi­tion when page is returned to using back button (mobile Safari only)

But Safari does sup­port display: run-in;, which is more than can be said for Fire­fox 2 or IE 7.