Checklist for Better Web Typography

Typography influences whether or not viewers read the content, as well as having a subtle effect on how they perceive your site. Choosing appropriate typefaces and controlling their presentation is critical to conveying your message.

The following checklist serves to summarize the major points and to help you ensure you’ve done all you should before finalizing any web site you are creating.

Use this navigation and jump directly to content :

{Layout} {Typefaces and Formatting} {Content} {Graphic Text}

Layout—Did you:

1. Chunk content with headers, small paragraphs, bulleted lists, sidebars, indenting an entire a paragraph of text, or pull quotes?

2. Limit line length to 350–550 pixels by splitting wide pages into two or more columns?

3. Increase leading to improve readability on longer lines of text and to lighten the overall “color” of a page?

4. Increase spacing between letters or words for emphasis?

5. Use either an indent at the beginning of a paragraph, or double spacing between paragraphs, but not both?

6. Avoid indenting the first paragraph following a header?

7. Use double spacing before headings but single spacing between the heading and the content it introduces?

Typefaces and Formatting—Did you:

1. Use a non-decorative, screen-optimized typeface at a legible size for body copy?

2. Use looser leading appropriately for longer lines of text, for emphasis, or to lighten the density of the page?

3. Use wider letter and word spacing for emphasis?

4. Set body copy as justified left, ragged right?

5. Employ contrasting elements like different typefaces, size, weight, color, form, structure, bold, italic, reversing the type and background colors, all caps, texture, direction, rhythm, spacing, and embellishment to emphasize special areas of type?

6. Use restraint on those elements just listed?

7. Make use of CSS to set special capitalization rules (all uppercase, all lowercase, title case) automatically?

8. Avoid using all caps in body text?

9. Apply underlining only for links?

10. Test the site in grayscale to make sure that foreground text contrasts sufficiently in value with background text?

11. If using light text on a dark background, consider making the text bolder or choosing a typeface with inherently thicker strokes?

12. Avoid strikethrough like this unless you are attempting to display edited versions of documents?

13. Consider using CSS to style the first-letter or first-line of text for decorative effect?

Content—Did you:

1. Check spelling, grammar, and sentence structure?

2. Limit the use of exclamation points?

3. Specify proper typographic characters, including en dash, em dash, curly quotes, true ellipse, and upper and lowercase numerals?

Graphic Text—Did you:

1. Make use of graphic text only when absolutely necessary, to avoid excessive download times?

2. Choose appropriate embellishment, anti-aliasing, and kerning?

3. For very small text, use typefaces designed for a specific size and turn off anti-aliasing?

Don’t forget to look at “All In One Design Checklist” after this article.