Text Appearance

There are several issues related to text characteristics that can help ensure a website communicates effectively with users:
• Use familiar fonts that are at least 12-points;
• Use black text on plain, high-contrast backgrounds; and
• Use background colors to help users understand the grouping of related information.

Even though it is important to ensure visual consistency, steps should be taken to emphasize important text. Commonly used headings should be formatted consistently, and attention-attracting features, such as animation, should only be used when appropriate.

Use Black Text on Plain, High-Contrast Backgrounds

When users are expected to rapidly read and understand prose text, use black text on a plain, high-contrast, non-patterned background. Black text on a plain background elicited reliably faster reading performance than on a medium-textured background. When compared to reading light text on a dark background, people read black text on a white background up to thirty-two percent faster. In general, the greater the contrast between the text and background, the easier the text is to read.

Format Common Items Consistently

Ensure that the format of common items is consistent from one page to another. The formatting convention chosen should be familiar to users. For example, telephone numbers should be consistently punctuated (800- 555-1212), and time records might be consistently punctuated with colons (HH:MM:SS).

Use Mixed-Case for Prose Text

When users must read a lot of information, use lower-case fonts and appropriate capitalization to ensure the fastest possible reading speed. Using ’mixed-case’ fonts for reading prose text means that most letters will be lowercase, with all letters that should be capitalized being in uppercase. Most users have had considerable experience reading lowercase letters and are therefore very proficient at it.

Ensure Visual Consistency

Ensure visual consistency of website elements within and between Web pages. Two studies found that the number of errors made using visually inconsistent displays is reliably higher than when using visually consistent displays. Visual consistency includes the size and spacing of characters; the colors used for labels, fonts and backgrounds; and the locations of labels, text and pictures. Earlier studies found that tasks performed on more consistent interfaces resulted in (1) a reduction in task completion times; (2) a reduction in errors; (3) an increase in user satisfaction; and (4) a reduction in learning time. However, users tend to rapidly overcome some types of inconsistencies. For example, one study found that the use of different-sized widgets (such as pushbuttons, entry fields, or list boxes) does not negatively impact users’ performance or preferences.

Use Bold Text Sparingly

Use bold text only when it is important to draw the user’s attention to a specific piece of information. In the following example with the Field Identifiers bolded on the left, users spent about four times as long looking at the bold Field Identifiers than the non-bold Field Values. In the example on the right, participants spent more time looking at the bolded Field Values. In addition, the non-bold Field Values elicited better search accuracy rates than did the bold Field Values. In situations like this example, it is probably best to not use bold for either field identifiers or field values. In general, bold text should be used sparingly.

Use Attention-Attracting Features when Appropriate

Use attention-attracting features with caution and only when they are highly relevant. Draw attention to specific parts of a web page with the appropriate (but limited) use of moving or animated objects, size differential between items, images, brightly-colored items, and varying font characteristics. Not all features of a website will attract a user’s attention equally. The following features are presented in order of the impact they have on users:
• Movement (e.g., animation or ’reveals’) is the most effective attention- getting item. Research suggests that people cannot stop themselves from initially looking at moving items on a page. However, if the movement is not relevant or useful, it may annoy the user. If movement continues after attracting attention, it may distract from the information on the website.
• Larger objects, particularly images, will draw users’ attention before smaller ones. Users fixate on larger items first, and for longer periods of time. However, users will tend to skip certain kinds of images that they believe to be ads or decoration.
• Users look at images for one or two seconds, and then look at the associated text caption. In many situations, reading a text caption to understand the meaning of an image is a last resort. Parts of images or text that have brighter colors seem to gain focus first. Having some text and graphic items in brighter colors, and others in darker colors, helps users determine the relative importance of elements. Important attention-attracting font characteristics can include all uppercase, bolding, italics, underlining, and increased font size.

Use Familiar Fonts

Use a familiar font to achieve the best possible reading speed. Research shows no reliable differences in reading speed or user preferences for twelve point Times New Roman or Georgia (serif fonts), or Arial, Helvetica, or Verdana (sans serif fonts).

Use at Least 12-Point Font

Use at least a 12-point font (e.g., typeface) on all web pages. Research has shown that fonts smaller than 12 points elicit slower reading performance from users. For users over age 65, it may be better to use at least fourteen-point fonts. Never use less than nine-point font on a website. Traditional paper-based font sizes do not translate well to website design. For instance, Windows Web browsers display type two to three points larger than the same font displayed on a Macintosh. User-defined browser settings may enlarge or shrink designer-defined font sizes. Defining text size using pixels will result in differently-sized characters depending upon the physical size of the monitor’s pixels and its set resolution, and presents accessibility issues to those individuals who must specify large font settings.

Color-Coding and Instructions

When using color-coding on your web site, be sure that the coding scheme can be quickly and easily understood. One study found that participants were able to answer questions significantly faster when the interface was color-coded, but only when information about the color-coding was provided. When both color-coding and information about how to interpret the colors were provided, user performance improved by forty percent. Be sure that the information provided does not require the user to read and comprehend a lot of text to understand it.

Emphasize Importance

Change the font characteristics to emphasize the importance of a word or short phrase. Font characteristics that are different from the surrounding text will dominate those that are routine. Important font characteristics include bolding, italics, font style (serif vs. sans serif), font size (larger is better to gain attention), and case (upper vs. lower). When used well, text style can draw attention to important words. The use of differing font characteristics has negative consequences as well–reading speed can decrease by almost twenty percent, and thus should be used sparingly in large blocks of prose. Do not use differing font characteristics to show emphasis for more than one or two words or a short phrase. Do not use underlining for emphasis because underlined words on the Web are generally considered to be links.

Highlighting Information

Do not use two (or more) different ways to highlight the same information on one page. One study found that participants were able to complete tasks faster when the interface contained either color-coding or a form of ranking, but not both. The presence of both seemed to present too much information, and reduced the performance advantage by about half.