Text on websites
Summary: website text should be clear, links should stand out, and all text should scale according to user preferences.
The web may be evolving significant multimedia capabilities, but it is still home to primarily one medium: text. Text forms the basis of most of the web's content, and so the way text is presented is very important. Rather than dealing with how to write for the web, this column will only tackle the appearance of text.
In many instances of text display and layout, there is a nearly insignificant disparity in terms of usability between one configuration and another, but some usability advocates are extreme, and dictate that text should only be default size, black serif on white, and nothing else. Or that links should be underlined and blue, and nothing else. While there may be slight benefits to such rigid guidelines, there is room for flexibility while ensuring superior usability. The trick is to be sensible, not neurotic.
Text, or graphic text, used as headers, serves to indicate document structure, and helps users scan the document. Well-defined headers should stand out from the body text, and should be:
- Larger than body text (for H2 and H1 headers)
- Body text colour, or a different colour (other than link text colour)
- Serif or sans-serif; not script
Body text forms the basis of most content; it occupies a large portion of the page. Even if a web page is filled with other elements, including graphics, and even if designers want to cram hundreds of separate ideas onto one page, text should almost never be set to a size smaller than the default size. For the occasional caption, text may be defined as relatively smaller than default text, but should never be set to a specific fixed point or pixel size. Most browsers allow users to scale the size of text so that it is a comfortable size, but text that is a fixed point or pixel size often won't scale.
Much debate has taken place about whether or not body text should be black serif text on a white background. Generally, black on white is best, especially considering the glow that CRT computer monitors generate when white text is placed on a dark background. As for serif or sans-serif fonts, there are advantages to a serif font that is large enough and clearly designed for the web, such as Georgia. However, many serif fonts look terrible on screen and may reduce usability, so a font like Verdana, which is a sans-serif screen typeface, is acceptable. For very long documents, black serif text on a white background is best.
Body text should usually have the following characteristics:
- Default size or slightly larger (1em or 100%; don't use px or pt measurements)
- High contrast versus background
- A screen font (preferably serif, but a well-designed sans-serif font is good; not script)
- Plain (no underlining; use bold and italic for emphasis)
- No more than double-spaced leading
- Relatively short or fixed line length (50-75% of a browser window or 400-500 pixels is good)
Link text, or text that is a link, both in body text and in other locations (such as a menu or list of links), has to stand out from other text. Otherwise, users won't be able to scan the page and find clickable keywords. If link text hardly looks any different from body text, users aren't going to be likely to pick up on the fact that the text is a link at all. Sometimes position and spacing contributes to the perception of links, but not necessarily, so noticeably different appearance is paramount.
Links do not have to be blue, although that is a de facto standard, and following it is an excellent idea. Using other colours can be problematic, and many users are colour blind and won't even be able to tell the difference. Therefore, other techniques for differentiating link text from body text can be useful. Consider the following guidelines for link text:
- Underlined (or bold; both is great)
- Blue or otherwise significantly different from body text; red should be avoided
- Visited links should be purple or different than the link text colour; active links should be red or the inverse (opposite) of the link text colour
- If stylesheets are used, use the A:hover property, which gives link text significant pliant response capabilities
Remember, you don't want your users to go blind
Obviously that's an exaggeration: tiny or low contrast text won't make your users go blind, but it might make them leave your website, or miss out on large parts of it. Be sure to give your users control over the text by using relative sizing mechanisms like ems and percentages instead of points and pixels. And, for goodness sake, make sure that links stand out from body text. Clear text is a hallmark of good websites.
Adam Baker is a user experience designer who's worked at Google, Apple, BlackBerry, and Marketcircle, and mentored startups in Vancouver.