Achieving Good Legibility and Readability on the Web

Continuing straight on from my previous post, this article will examine legibility and readability more closely by exploring the elementary typographic factors that affect them.

Typography gained its prominence in the print world. As such, the basics of good legibility and readability are well understood, but on a digital medium, we need to take a few additional considerations into account.

Typeface

As previously outlined, typefaces have a significant impact on the text they set. Selecting a good and applicable typeface that honors the copy, and caters for its requirements (e.g. if you know you’ll be setting mathematical symbols, ensure the typeface has glyphs for them) is paramount.

Chances are, you’re setting larger blocks of text. You’ll want to pick a good text font—one that’s designed for setting lengthier blocks of text. The best way to test a typeface as a text face is to set a paragraph of Lorem Ipsum in the basic Roman, at size 12px to 14px with a leading of 1 to 1.5 (see § Leading below), and see how it reads. Text faces can be either serif (e.g. Georgia) or sanserif (e.g. Arial).

Sizing

When setting type, select a comfortable size: 14 pixels and up is a good rule of thumb for most screen text fonts. Not many of us have 20-20 vision, so better to display your text a tad large than too small.

Note: JavaScript-powered text sizing widgets ≠ accessibility.

Don’t size text arbitrarily; try to stick to a scale:

The “classical scale”.

Another scale.

A scale based on the Fibonacci sequence.

Type is best sized relatively, using ems. An em is the distance that’s horizontally equivalent to the type size in points (e.g. 1em of 12pt type is 12pt; 1em of 16pt type is 16pt). We set font size in CSS using the font-size property:

p { font-size: 1.2em; }

Remember that font sizes are inherited within the DOM by children from their parent elements. This can make em sizing calculations for nested elements difficult. A good idea is to size everything in pixels first, and then convert the measurements over to ems. Pixels are easy to work with, but fall short as a fixed unit—particularly when you’re scaling a website (see § Measure below).

To calculate the desired value in ems, find the value of 1 pixel in ems, then multiply by the desired font size (in pixels):

1 ÷ parent font-size × desired pixel value = em value

For example, if the parent font size (as defined by, say, the body element) is 16 pixels, but we’d like to size a paragraph—which is a child of the body element—at 12 pixels, we calculate: 1 ÷ 16 × 12, which gives us 0.75em.

The 62.5% trick

There is a neat trick to simplifying these calculations. Consider the following CSS:

p { font-size: 80%; }
blockquote { font-size: 80%; }

That styles this markup:

This is a short paragraph, followed by a quote:

Block quotes are blocks of quoted material, and can hold a
range of things, including paragraphs, lists, and even
headings of course.

[/xml]
80% of 16px is 12.8px, so p and blockquote elements will be that size, but what happens when we put a p element inside a blockquote element? The parent (blockquote) is 12.8px so the p will be rendered at 80% of that: 10.42px.

From this point, the calculations are similar for direct descendants of the body, for example, 12px = 1.2em; 8px = 0.8em; and so forth. Deeper nested elements are (still) relative, of course.

Measure

The measure is the line length. It’s important to keep lines at a comfortable length: not too long, and not too short.

The eye has difficulty going to the next line when measures are too long. A grand and almost infamous example of a website that could do better in this regard is Wikipedia, where the measure is relative to the length of the browser window; expand the window to full-screen on a widescreen monitor and notice how suddenly, where there was a comfortable 40 characters per line, you’ll have measures of 100 characters or more.

Conversely, ensure lines aren’t so short that the eye has to drop a line every few words. There are some publication styles where short measures are popular—for example, periodicals—but copy that’s set so short elsewhere begins to look cheap, as if, once read, it could be thrown away just like a newspaper.

In this example we’ve used the 62.5% trick to reset the base font size to 10 pixels in the body and defined a total design width of 960 pixels which is centered. Meanwhile, we’ve defined two div elements: one as a sidebar with a width of 240 pixels (25% of 960 = 240 pixels) and the other as a content container with width of 720 pixels (75% of 960 = 720 pixels). This design scales perfectly, even when only text-only zoom is available.

Leading

It’s important to provide ample space between lines so that the eye can read along and travel between lines with comfort and ease. A good rule is to give copy with short measures less leading, and longer measures more leading.

Leading is controlled in CSS using the line-height property. You can use it to set unit-less number values (e.g. 1.5), whereby it acts as a multiplier of the font size:

p { line-height: 1.5; }

This means the leading will be one and a half times the size of the font-size. Unit-less values are easier to keep track of, and to work with when setting leading for descendent elements. They also scale nicely.

Alignment

Alignment refers to the placement and arrangement of text. When setting blocks of copy, align text to the left margin or “gutter”, and don’t be afraid of having a ragged edge (i.e. “left-aligned”, “flush-left”, or “ragged-right”). Justification is great if there is a sufficient measure to cater for the adjustment of the word-spacing and, ideally, if automatic hyphenation is accessible. Avoid justification in narrow columns of text.

Alignment is controlled in CSS using the text-align property, and takes descriptive values, for example:

The culmination (contrast)

Legible and readable text has a high contrast with its surroundings without becoming an eye-sore. Good contrast is achieved by setting text with the above factors in mind, and by considering the color of the type and the background it’s placed on. A good guiding principle is dark text on a light background, or visa versa. Avoid clashing colors or a barely visible grey on a white background.

Pay attention to contrasts when working with light text on a dark background. Dark text on a light background generally has a higher contrast than light text on a dark background. Thus, when light text rests on a dark background check its contrast—increase leading and decrease font-weight as applicable.

Closing

Pascal is a standardista graphic, web and front-end designer, and a rampant typophile. Born in Mainz, Germany—the birthplace of Gutenberg—he now works in Canberra as a contract designer and studies at the Australian National University. He's been actively engaged in the Open Source community and local web industry, notably as one of the unorganisers to first bring BarCamp to Canberra. He enjoys drinking in as much good type as he can get and has been happily bending beziers since 2004.