Page Content
List of Recommended Fonts
Below is a list of recommended fonts and fonts which should be used sparingly.
| Highly Recommend | Reasonably Accessible | CAUTION: Headers Only |
|---|---|---|
|
These fonts are highly recommended for legibility:
|
These fonts are also legible in many dimensions:
|
These fonts should be sparingly used in headers and decorative text:
|
Factors for Selecting Fonts
Below are some factors that can be considered when selecting a legible font.
Type of Fonts
Fonts can be classified as follows
- Serif: Strokes extend out from the top and/or bottom of the letterforms. Examples include Georgia, Times New Roman, and Palatino.
- Sans serif font: Strokes do not extend out from the top or bottom of the letterform. Examples include Arial, Helvetica, Verdana, and Lucida Grande (Mac)/Lucida Sans Unicode (PC).
- Monospace: Each letter has the same width. Monospace fonts can be serif (Courier New) or sans-serif (Andale Mono or Monaco [Mac]).
Sans-serif fonts such as Verdana and Arial were originally recommended over serif fonts like Times New Roman, because monitors were not able to render fonts with serifs very accurately. A lot of detail useful in print was lost in the transition to computer monitors.
However, advances in display technology can allow for more serif fonts to be used on the Web (if the audience is using recent operating systems and browsers).
Font Availability
The ideal font is one that is available to many members of the audience. Microsoft fonts are generally good choices, but some may be more recent than others, and therefore less common. Also, if your audience contains a lot of Unix users, be aware that their font selection can be different from that of Windows and Mac.
If you specify a font in a CSS, you should include alternate backup fonts whenever possible.
x-height
The x-height of a font is the height of any lowercase letter without ascenders or descenders. Letters used to measure x-height include lowercase x, o, a, r, m, and s. Letters with ascenders include lowercase b, d, h, and k, and those with descenders include p, q, g, and j.
Generally speaking the higher the x-height in relation to a capital letter, the more legible the font is likely to be.
Distinguishing Ambiguous Characters
Another factor in legibility is how well-distinguished similar characters are. Potentially problematic characters include capital I, number 1 and lowercase l (L), as well as 0 (zero) and capital O. Ideally, each letter or number form will be distinct.
Weight
Weight is a measure of a letterform’s thickness in comparison to its height. Some fonts, such as Verdana, are designed with more weight than others, such as Palatino. Weight can assist with legibility because it darkens letters, but too much weight, such as in Arial Black, can make a font unsuitable for body text.
Character Width
Generally speaking, wider fonts are more legible than narrower fonts (within reason). One way to check width is to examine the letters x and o. You may also want to check narrow letters such as lowercase i and j to see how legible they are. A related concept is tracking, or the width between adjacent letters.
Font Samples
Below is a list of fonts with notes on the legibility of each. Fonts are available on both PC and Mac unless otherwise specified.
| Fonts | Notes | x-height | I vs. 1 vs. l | Zero vs. O | Lower i,j |
|---|---|---|---|---|---|
| Verdana | Designed for monitors by Microsoft. Many sites on accessibility use Verdana. | Xx Oo Aa Rr | I vs. 1 vs. l | 0 vs. O | i,j |
| Lucida Sans (PC)/ Lucida Grande (Mac) |
Relatively new font. Used as a Mac system font. | Xx Oo Aa Rr | I vs. 1 vs. l | 0 vs. O | i,j |
| Georgia | Serif. Designed for monitors by Microsoft. | Xx Oo Aa Rr | I vs. 1 vs. l | 0 vs. O | i, j |
| Fonts | Notes | x-height | I vs. 1 vs. l | zero vs. O | Lower i,j |
|---|---|---|---|---|---|
| Helvetica | Traditional print font. Available on Mac, Unix and newer versions of Windows. Some letterforms can be confused. | Xx Oo Aa Rr | I vs. 1 vs. l | 0 vs. O | i,j |
| Arial | A Windows analogue to Helvetica. Some typographers prefer Helvetica, but the two are generally similar. | Xx Oo Aa Rr | I vs. 1 vs. l | 0 vs. O | i,j |
| Trebuchet MS | Available from Microsoft. Good x-height, but some letterforms (e.g. "g" and &") considered too unusual for some readers, especially if literacy is an issue. | Xx Oo Aa Rr | I vs. 1 vs. l | 0 vs. O | i,j |
| Tahoma | Available from Microsoft | Xx Oo Aa Rr | I vs. 1 vs. l | 0 vs. O | i,j |
| Candara | Available from Microsoft. A font which blends serif and sans-serif features. Similar to Optima. Some letter forms could be confused. | Xx Oo Aa Rr | I vs. 1 vs. l | 0 vs. O | i,j |
| Century Gothic | Sans-serif, somewhat Art Deco. Good x-height, but some letters can be confused. Weight is light. | Xx Oo Aa Rr | I vs. 1 vs. l | 0 vs. O | i,j |
| Bookman Old Style | Available from Microsoft. Traditional serif font designed for legibility. Good x-height, but may not be on all computers. | Xx Oo Aa Rr | I vs. 1 vs. l | 0 vs. O | i,j |
| Palatino (Mac)/ Palatino Linotype (PC)/ Book Antiqua (PC) |
Serif. Traditional print font. Weight can be light. | Xx Oo Aa Rr | I vs. 1 vs. l | 0 vs. O | i,j |
| Garamond | Available from Microsoft. Traditional font, but x-height relatively small and weight is light. | Xx Oo Aa Rr | I vs. i vs. l | 0 vs. O | i,j |
| Comic Sans | Although it has features optimized for legibility, it is criticized as being "childlike." May be appropriate for sites with younger audiences. | Xx Oo Aa Rr | I vs. i vs. l | 0 vs. O | i,j |
| Andika | Another font designed for beginning readers with non-English support. Get Andika font. | Xx Oo Aa Rr | I vs. i vs. l | 0 vs. O | i,j |
| Times New Roman | Serif. Relatively small x-height, but succeeds with regard to legibility. | Xx Oo Aa Rr | I vs. 1 vs. l | 0 vs. O | i, j |
| Fonts | Notes | x-height | I vs. 1 vs. l | zero vs. O | Lower i,j |
|---|---|---|---|---|---|
| Arial Black | Available from Microsoft. Very heavy. | Xx Oo Aa Rr | I vs. 1 vs. l | 0 vs. O | i,j |
| Arial Narrow | A narrow font that is probably too compressed for body text. | Xx Oo Aa Rr | I vs. 1 vs. l | 0 vs. O | i,j |
| Haettenschweiler, Impact | Available from Microsoft. Very narrow and heavy. | Xx Oo Aa Rr | I vs. 1 vs. l | 0 vs. O | i,j |
| Harrington | Available from Microsoft. letterforms are very ornate, which can slow down reading speeds. | Xx Oo Aa Rr | I vs. 1 vs. l | 0 vs. O | i,j |
| Monotype Corsiva | A cursive-style font. Italic-type slant can slow down reading. | Xx Oo Aa Rr | I vs. 1 vs. l | 0 vs. O | i, j |