May 28, 2001

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.

Header text

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:

Body text

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:

Link text

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:

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.