Use of FontsFonts 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 faces fall into two general categories:
- Serif: Fonts that have small appendages at the tops and bottoms
of letter (e.g., Times Roman, Bookman, Century, Courier). In standard
typography, these are the preferred faces for large blocks of text since
serifs make it easier to read long lines.
- Sans-serif: Fonts that consist of only primary linestrokes and
therefore are simpler in shape (e.g., Helvetica, Arial, Futura). In
standard typography, these faces are primarily used for short phrases such
as titles, button labels, and outlines.
Example: In this guide, serif fonts are used only for the colored blocks of text marked "Hint" or "Example". All other text is sans-serif (unless, of course, your browser does not honor the font requests).
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 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="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.