Achieving Good Legibility and Readability on the Web

Typeface

As previously outlined, typefaces have an impact on the text they set. Selecting a good, appropriate typeface that honors the copy and caters for its requirements (for example, 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 text blocks. The best way to test a typeface as text is to set a paragraph of Lorem Ipsum in basic Roman, between 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 (for example, Georgia) or sans-serif (Arial). Typefaces are declared in CSS with the font-family property, and take descriptive values—either a generic family or specific font family. For example, here's a transitional serif font stack:

p {
    font-family:
        Baskerville,
        Times
        'Times New Roman'
        serif;
    }

Sizing

When setting type, select a comfortable size: 14 pixels and up is a good rule of thumb for most screen text fonts. Most of us lack 20-20 vision, so it's better to display your text slightly larger than too small. Note: JavaScript-powered text-sizing widgets ≠ accessibility. Avoid sizing 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 (for example, 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 1px in ems and 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.

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. Guh! This has the potential to be quite confusing. Richard Rutter developed a neat trick to simplify the sizing calculations of nested elements. Consider the following:

• Browsers have a common default size of 16px for text.
• Set the body to a font-size of 62.5%, resetting everything to 10px.

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 like a newspaper. Measures are set in CSS with the width property. Ideally, set the design or total page width in ems, and columns in percentages, so that columns, the grid, and entire page design scale proportionately. For example:

body {
    font-size: 62.5%;
    width: 96em;
   margin: 0 auto 0 auto;
    }
    div#content {
        width: 75%;
        float: left;
        }
    div#sidebar {
        width: 25%;
        float: right;
        }

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 a width of 720 pixels (75% of 960 = 720 pixels). This design scales perfectly, even when text-only zoom is available.

Leading

It's important to provide ample space between lines for ease of readability. 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 unitless number values (for example, 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. Unitless values are easier to keep track of, and 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 (that is, left-aligned, flush-left, or ragged-right). Justification is great if there's 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:

body { text-align: left; }
    div#content p { text-align: justify; }
    div#content p.verse { text-align: center; }

The Culmination (Contrast)

Legible and readable text has a high contrast with its surroundings without becoming an eyesore. 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 vice versa. Avoid clashing colors or a barely visible gray on a white background. In CSS, the text color is controlled by the color property, while the background is controlled by the background-color property, and takes numerical and descriptive values. Here's an example:

div#content p {
    color: #111;
    background-color: white;
    }

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:

div#footer p {
    color: white;
    background-color: #333;
    line-height: 1.8;
    font-weight: lighter;
    }

Closing

That's it. Applying these principles should provide your text with the elementary typographic goodness, as well as better legibility and readability.