Set Your Measure: Optimizing Line Length for Reading

This post is part of a series entitled Better Web Typography that I will be publishing over the coming months.

Widescreen monitors are quickly becoming ubiquitous and from high resolution desktop monitors down to little 13” laptops we’ve grown accustomed to designing for ample screen real estate. For many web designers this creates an overwhelming temptation to fill that space. Unfortunately, when setting blocks of type, this is often done at the readers expense. Services such as Readability, Instapaper, and Safari’s own Reader have grown in popularity in part to aid readers in overcoming this obstacle.

Simply put, though they can easily be found all over the web, long line lengths are difficult to read.

In The Elements of Typographic Style, Robert Bringhurst suggests:

  • Anything from 45 to 75 characters is satisfactory.
  • 66-character lines are ideal.
  • A line that averages more than 78 or 80 characters is likely too long for continuous reading.

How Can This Translate to the Web?

The most basic way to test the line length of our content is to subject it to the “alphabet test.” The ideal line length of 66 characters is approximately 2.5 alphabets (plus 1 character).

Below are the line measures for common web typefaces subjected to the 66 character alphabet test:

Typeface Line Length PX Line Length Em
Georgia 552px 34.5em
Helvetica 544px 34em
Times New Roman 496px 31em
Verdana 616px 38.5em

You can see that the ideal line length varies depending on the typeface, but that each of these examples falls into the range of 30-40em and all except the loosely spaced Verdana fall under 35em.

Line Lengths & Flexible Layouts

If you are using ems to size your text, they can also used for layout by applying the same basic formula. This ensures that content blocks will scale to the appropriate line length based on the browser’s default text size.

For example, we can take a div with an id of main, set to 544 pixels:

#main {
    width: 544px;
}

and instead write

#main {
    width: 34em;
}

To calculate this width I simply divided 544 by 16 (the default text size in pixels):

544px / 16px = 34em

When dealing with a flexible or responsive layout, we can set minimum and maximum widths to maintain decent line lengths regardless of browser width.

#main {
    min-width: 30em;
    max-width: 38em;
}

In Ethan Marcotte’s Responsive Web Design article he makes a passing reference to responsive typesetting and offers a quick demo. Using media queries would allow us to avoid setting a minimum width for our content block and instead gradually decrease the text size to maintain a nice measure.

@media (max-width: 600px) {
    #main {
        font-size: 0.875em; 
        /* 14px / 16px = .875em */
        max-width: 30em;
        }

}

Conclusion

Though it may vary by typeface, the ideal line length seems to fall between 30 and 35 em. Consider your readers and select a considered measure for large chunks of content.