Legibility

Good typography depends on the visual contrast between one font and another and between text blocks, headlines, and the surrounding white space. Nothing attracts the eye and brain of the reader like strong contrast and distinctive patterns, and you can achieve those attributes only by carefully designing them into your pages. If you cram every page with dense text, readers see a wall of gray and will instinctively reject the lack of visual contrast. Just making things uniformly bigger doesn’t help. Even boldface fonts quickly become monotonous, because if everything is bold then nothing stands out “boldly.”

When your content is primarily text, typography is the tool you use to “paint” patterns of organization on the page. The first thing the reader sees is not the title or other details on the page but the overall pattern and contrast of the page. The regular, repeating patterns established through carefully organized pages of text and graphics help the reader to establish the location and organization of your information and increase legibility. Patchy, heterogeneous typography and text headers make it hard for the user to see repeating patterns and almost impossible to predict where information is likely to be located in unfamiliar documents:

Alignment

Margins define the reading area of your page by separating the main text from the surrounding environment. Margins provide important visual relief in any document, but careful design of margins and other "white space" is particularly important in Web page design because Web content must coexist on the computer screen with the interface elements of the browser itself and with other windows, menus, and icons of the user interface.
Screen shot: Argus Center for Information Architecture page sharing screen with interface elements
argus-acia.com

Margins and space can be used to delineate the main text from the other page elements. And when used consistently, margins provide unity throughout a site by creating a consistent structure and look to the site pages. They also add visual interest by contrasting the positive space of the screen (text, graphics) from the negative (white) space.

Text blocks have different ways of sitting within margins. Left-justified, centered, right-justified, and justified text are the alignment options available on the Web.

Justified text

Justified text is set flush with the left and right margins. Justified blocks of text create solid rectangles, and block headings are normally centered for a symmetrical, formal-looking document. In print, justification is achieved by adjusting the space between words and by using word hyphenation. Page layout programs use a hyphenation dictionary to check for and apply hyphenation at each line's end and then adjust word spacing throughout the line. But even with sophisticated page layout software, justified text blocks often suffer from poor spacing and excessive hyphenation and require manual refinement. This level of control is not even a remote possibility on Web pages. The most recent browser versions (and CSS) support justified text, but it is achieved by crude adjustments to word spacing. Fine adjustments are not possible on low-resolution computer displays and are impractical to implement in today's Web browsers. Also, Web browsers are unlikely to offer automatic hyphenation any time soon, another "must" for properly justified text. For the foreseeable future, the legibility of your Web documents will suffer if you set your text in justified format.
Illustration: Word spacing problems with justified text

Centered and right-justified text blocks

Centered and right-justified text blocks are difficult to read. We read from left to right, anchoring our tracking across the page at the vertical line of the left margin. The ragged left margins produced by centering or right-justifying text make that scanning much harder, because your eye needs to search for the beginning of each new line.

Left-justified text

Left-justified text is the most legible option for Web pages because the left margin is even and predictable and the right margin is irregular. Unlike justified text, left justification requires no adjustment to word spacing; the inequities in spacing fall at the end of the lines. The resulting "ragged" right margin adds variety and interest to the page without interfering with legibility.

Justification of headlines

Titles and headings over left-justified body text should also be flush left. Centered headings pair well with justified text, but justified text should not be used on Web pages. Centered display type contrasts with the asymmetry of the ragged right margin of left-justified body text and produces an unbalanced page.

Until typographic options for Web pages become more sophisticated, we recommend that you use left-justified text blocks and headlines as the best solution for most layout situations.

Line length

Text on the computer screen is hard to read not only because of the low resolution of computer screens but also because the layout of most Web pages violates a fundamental rule of book and magazine typography: the lines of text on most Web pages are far too long for easy reading. Magazine and book columns are narrow for physiological reasons: at normal reading distances the eye's span of acute focus is only about three inches wide, so designers try to keep dense passages of text in columns not much wider than that comfortable eye span. Wider lines of text require readers to move their heads slightly or strain their eye muscles to track over the long lines of text. Readability suffers because on the long trip back to the left margin the reader may lose track of the next line.

You can use invisible tables (BORDER="0") to restrict the text line length to about fifty to seventy characters per line (see Page Design, Page layout). The exact character count is difficult to predict because of the way different browser software and operating systems display type sizes. In conventional print layouts, columns of thirty to forty characters per line are considered ideal.

In the end, the decision to restrict line length is a philosophical one. From a design standpoint, a measure that is comfortable for reading is good practice. One of the fundamental principles of the Web, however, is that users should be able to structure their own view. Users with a large monitor may not want their text blocks circumscribed if it means that a large portion of their screen goes unused. A low-vision user with fonts set large will not appreciate being forced to view long pages with short lines of text. So although leaving text free to fill the browser window may affect readability, following conventions may also affect the accessibility and legibility of your documents.

Emphasis

A Web page of solid body text is hard to scan for content structure and will not engage the eye. Adding display type to a document will provide landmarks to direct the reader through your content. Display type establishes an information structure and adds visual variety to draw the reader into your material. The key to effective display type is the careful and economic use of typographic emphasis.

There are time-honored typographical devices for adding emphasis to a block of text, but be sure to use them sparingly. If you make everything bold, then nothing will stand out and it will seem as if you are shouting at your readers. A good rule of thumb when working with type is to add emphasis using one parameter at a time. If you want to draw attention to the section heads in your document, don't set them large, bold, and all caps. If you want them to be larger, increase their size by one measure. If you prefer bold, leave the heads the same size as your body text and make them bold. You will soon discover that only a small variation is required to establish visual contrast.

Italics

Italicized text attracts the eye because it contrasts in shape from body text. Use italics for convention — when listing book or periodical titles, for example — or within text for stressed or foreign words or phrases. Avoid setting large blocks of text in italics because the readability of italicized text, particularly at screen resolutions, is much lower than in comparably sized roman text.

Bold

Boldface text gives emphasis because it contrasts in color from the body text. Section subheads work well set in bold. Boldface text is readable on-screen, though large blocks of text set in bold lack contrast and therefore lose their effectiveness.

Underlined

Underlined text is a carryover from the days of the typewriter, when such options as italics and boldface were unavailable. In addition to its aesthetic shortcomings (too heavy, interferes with letter shapes), underlining has a special functional meaning in Web documents. Most readers have their browser preferences set to underline links. This default browser setting ensures that people with monochromatic monitors or people who are color-blind can identify links within text blocks. If you include underlined text on your Web page it will certainly be confused with a hypertext link.

Colored text

Although the use of color is another option for differentiating type, colored text, like underlining, has a special functional meaning in Web documents. You should avoid putting colored text within text blocks because readers will assume that the colored text is a hypertext link and click on it. Colored text does work well as a subtle means to distinguish section heads, however. Choose dark shades of color that contrast with the page background, and avoid using colors close to the default Web link colors of blue and violet.

Capital letters

Capitalized text is one of the most common and least effective methods for adding typographical emphasis. We recognize words in two ways, by parsing letter groups and by recognizing word shapes. Words or headlines set in all capital letters form rectangles with no distinctive shape. To read a block of text set in all capital letters we must parse the letter groups — read the text letter by letter — which is uncomfortable and significantly slows reading. As you read the following paragraph, notice how tiring the process is:

THE DESIGN OF THE SITE WILL DETERMINE THE ORGANIZATIONAL FRAMEWORK OF YOUR WEB SITE. AT THIS STAGE YOU WILL MAKE THE ESSENTIAL DECISIONS ABOUT WHAT YOUR AUDIENCE WANTS FROM YOU, WHAT YOU WISH TO SAY, AND HOW TO ARRANGE THE CONTENT TO BEST MEET YOUR AUDIENCE'S NEEDS. ALTHOUGH PEOPLE WILL INSTANTLY NOTICE THE GRAPHIC DESIGN OF YOUR WEB PAGES, THE ORGANIZATION OF THE SITE WILL HAVE THE GREATEST IMPACT ON THEIR EXPERIENCE.

Spacing and indentation

One of the most effective and subtle ways to vary the visual contrast and relative importance of a piece of text is simply to isolate it or treat it differently from the surrounding text. If you want your major headers to stand out more without making them larger, add space before the header to separate it from any previous copy. Indentation is another effective means of distinguishing bulleted lists, quotations, or example text (such as the capitalization example above). HTML lists are automatically indented (too far, in our estimation), and you can use the BLOCKQUOTE tag to indent blocks of text. You can define your own indents using CSS.