Optimal Line Height

The the­ory 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 let­ter 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 Man­ual of Typog­ra­phy:

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 use­ful 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 élite 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 fol­low 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.