Use of Fonts

Fonts are used to create most types of webpage elements: headers and footers, links, navigation bars, menus, buttons, lists, tables, etc. - not to mention the text that will convey most of your website's content. This topic describes how fonts affect legibility and general usability.

Effects of Fonts on Legibility

In HTML, fonts are described in terms of face, style, size, and color. All of these may be used as attributes on the FONT tag.

Font faces fall into two general categories:

Currently, however, computer screens do a better job of displaying san-serif than serif fonts, so we recommend that you use sans-serif fonts for text on all NEES websites.

It is important to note that different browsers support different font faces. For that reason, the NEES guides and the templates we provide for your webpages specify multiple fonts. In particular, they specify the two sans-serif faces most likely to be supported on Windows, Unix, and Macintosh platforms.

Hint: use <font face="Arial, Helvetica"> to specify a sans-serif font that most browsers can display successfully. Arial is used by browsers on Windows and Unix, Helvetica on Macintosh.

Font style refers to the use of boldface, italics, or underlining (or some combination thereof) to emphasize textual elements. Don't use underlining on your webpages, as users have come to associate that with links (see Effective Use of Links). Use boldface judiciously, since it is highly visible and therefore can become visually intrusive (see Helping Users Find Key Content). Italics can be used to define terms or emphasize an occasional word, but they should be infrequent since they are not very legible on computer screens.

Font size can be specified in HTML in either relative or absolute terms. Avoid absolute font sizes, as they prevent users from adjusting text size to match the requirements of their display devices. That is, instead of specifying a font as SIZE="14pt", use SIZE="+1" or SIZE="200%". Better yet, use HTML's style tags (e.g., <H2>), since these apply typography standards to vary text size only in certain increments. If you are keeping your webpages short and following other guidelines, there should be very little need to vary the font size at all - it's best to let the user control the size of text.

Example: In this guide, the user's default is used for everything except section headings (which use HTML's style tags for headings) and the navigation bar and footer, where the font is reduced one size to make the page content stand out more.

Font color refers, of course, to the color used to draw the text. Color should be chosen carefully, to maximize legibility against your background color while minimizing any confusion with the standard link colors (see see Effective Use of Links). If the background is light - which we recommend - this means a dark blue, dark green, dark brown, or black font. If the background is dark, text will be harder to read; the color should be white, pale yellow, pale orange, or pale green. Avoid blue or light blue letters on a dark background. Since color can be very distracting, a general guideline is to use just one or possibly two font colors per page, other than the link colors.

Finally, don't get carried away in using font faces, styles, sizes, and colors. Too much variation is highly distracting, and runs the risk that users will miss the most important content.

Fonts That Are Really Images

Avoid the use of .gif or .jpg images of text to get special effects, except for logos and header/footer images. There are several reasons for this. First image files take substantially longer to load and rarely display as clearly as text generated by the browser. Second, they do not usually resize properly, and can be particularly problematical when the display screen is very small. Third, since they are not really text at all, they cannot be interpreted and read aloud by browsers that have been voice- enabled for visually impaired users. For guidelines concerning image format, etc., see Use of Images.