Creating Web Designs

Typography and Web Design

This excerpt is made available according to "Fair Use" guidelines for educators and the "TEACH" act. You are not allowed to retain or redistribute this excerpt.

Web Style Guide 2nd Ed.

excerpt from Typography

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:

Too patchy, inconsistent
inconsistent
Better layout of type blocks
better

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.

Web content must share the screen with other user elements
content sharing

Margins and space can be used to delineate the main text from the other page elements. And when used consistently, matgins 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.

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-justify ing text make that scanning much harder, because your eye needs to search for the beginning of each new line.

Left-justified text Left-justified 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.

Left-justified, ragged right
Left-justified
Centered, ragged left and right
Centered
Right-justified
A ragged left margin makes for difficult reading
Right-justified, ragged left
Right-justified

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.

Justified text, centered head
Left-justifed text, centered head
Left-justified text, left-justified head

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

I've spoken about the importanct of designing text at a readable line length already, but it's an important enough point to revisit. Remember to keep the line lengths limited to 8 - 15 words (or approx 45 - 65 characters long. The best way to measure this with CSS is to use EM space.

White Space

The vertical space in a text block is called leading, and it is the distance from one baseline of text to the next. Leading strongly affects the legibility of text blocks: too much leading makes it hard for the eye to locate the start if the next line, whereas too little leading confuses the lines of type, because the ascenders of one line get jumbled with the descenders of the line above. CSS offers wading control (referred to as "line spacing" in css terminology). In print the general rule is to set the leading of text blocks at about 2 points above the size of the type. For example, 12-point type could be set with 14 points of leading. I suggest most folks consider "line spacing" of 1.5x - 2x the current EM.