Website Text Design Guidelines

Readability

Ensure that the content is readable:

• Use text that is simple, clear, and easy to read.
• Use text that is unambiguous for the target audiences:
  • Use complete dates (e.g., March 6, 1925 instead of 3/6/25) that are unambiguous in both North America and Europe.
  • Ensure that titles and headings are meaningful, even outside of the context of the current webpage (e.g., Introduction is inadequate as a title if you do not know for sure the context of the webpage).
• Use the language of the business and the users.
• Avoid codes, abbreviations, and accronyms.
• Avoid inappropriate technical jargon (e.g., computer software or Web terminology).
• Write about the subject matter even if it contains hyperlinks rather than about user actions and interface interactions (e.g., clicking buttons and linking to home pages). Thus, provide meaningful names to links.
• Similarly, avoid writing about writing. For example, replace "The following is an alphabetical list of commercial airliners:" with "Commercial airliners include:".
• Avoid unnecessarily redundant links that minimize readability by only making a link out of the first occurance of a concept (and possibly key uses of the concept on a large webpage).
• Ensure that business terms are used consistently with their meanings as documented in the project glossary.
• Copy edit all content for:
  • Spelling,
  • Grammer, and
  • Readability.
• Run all content through a spell checker (and possibly a grammer checker and reading-level analyzer).

Rationale:

• Content is valueless if it is not readable.
• Hyperlinks should not be overused because they change the way text is read by stressing link identifiers and forcing readers to decide about whether or not to following the links.
• Keeping to the subject matter at hand makes it more likely to be read and shortens the amount of text by eliminating unnecessary noise words.
• Misspelled words and bad grammer look unprofessional and make the reader question the quality of the content.
• Developers and content management personnel spend more time editing than writing content.

Typography

Use proper typography:

• Use a font family that is consistent with the brand identity.
• Use a highly readable, sans-serif font family such as verdana, arial, geneva, or helvetica.
• Avoid the use of itallics that are difficult to read on most monitors.
• Avoid the use of underlining for anything other than links.
• Use a large enough font size.
• Increase the line spacing (leading) to improve readability.

Rationale:

• All of these guidelines make text easier to read, parse, and understand.

Consistent Fonts

Consistently use different font styles, sizes, and colors for:

• Logos and tag lines.
• Headers.
• Text.
• Links.

Rationale:

• This makes the different classes of information easy to differentiate.

Error Messages

Ensure that error messages are meaningful to the user as well as to someone who is debugging the application. Explain to the user what the problem is and what the workaround is for it. Better yet, modify the interface to prevent the error from occurring.

Rationale:

• Everyone hates incomprehensible or obvious error messages such as "An error has occurred."

Line Width

Limit the width of lines to about 4 inches or to between 9 and 15 words. Use frames or tables to limit the width of text. Do not use the Netscape Navigator < MULTICOL > tag to limit text width.

Rationale:

• This makes the text easier to read and is the width of text in most books.
• The Netscape Navigator tag is not supported by Internet Explorer.

Limit Centering

Limit the use of centering (e.g., to logos, top-level headers, images) to where it is really needed.

Rationale:

• Lots of centered text is hard to read and looks unprofessional.

Glow and Shadows

Do not use glowing or blinking text. Do not use shadows behind text.

Rationale:

• Glowing text typically looks unprofessional and rarely relates to the content.
• Blinking text is annoying, is never needed, and often detracts from the content.
• It is difficult to ensure that the shadows under text are formed by a consistent light source.

Mixing Fonts

Avoid unnecessary fonts:

• Avoid using lots of different font faces, font sizes, and font attributes (e.g., bold, underline, italic).
• Avoid using artistic, non-default font faces.
• Limit the use of italics.
• Avoid using underlined text.

Rationale:

• Using lots of different fonts (i.e., more than 3 or 4, not counting the unique font for the brand logo and possibly the tag line) is visually confusing and looks unprofessional.
• Different platforms (e.g., Windows, UNIX, Macintosh) do not have the same fonts, and rarely do all platforms support the same artistic fonts.
• Italics are hard to read on computer screens, especially laptop screens.
• Use of the HTML underline tag < U > confuses the reader into thinking that the text is a navigational link; it is also being deprecated.

Internationalization

Consider internationalization requirements and issues:

• Ensure that content is properly translated.
• Avoid ambiguities in American and British English such as the ordering of dates and the meaning of the term million.
• Avoid the use of jargon, slang, and abbreviations.

Rationale:

• This will ensure that the website is usable by members of multiple nationalities.