Penn State Learning Design Community Hub

The Best Choice...according to the experts

Recommended fonts include

Specify Multiple Fonts

Always specify multiple fonts in your formatting to cover multiple platforms.

• Unix computers include "Helvetica" and "Times," but not other fonts.
• Macintoshes have "Palatino", but Windows have the similar "Book Antiqua" font.

Rationale

1. Most users prefer sans-serif fonts for computer screens, while serif is designed for documents meant to be printed.
2. Verdana, Georgia, Arial, Tahoma, Times/Times New Roman found to be easier to read on computer monitors (Boyarski et al., 1998; Bernard & Mills, 2001)
3. Verdana, Georgia, Trebuchet MS Lucida Grande were designed for computer monitors
4. Arial Unicode MS and Lucida Grande include more foreign language characters and math symbols than other fonts.
5. Fonts with higher x-heights and more open letters (e.g. Verdana, Georgia, Trebuchet MS, Palatino) tend to be more legible

Basic Information

Determining Legibility

The research on what makes a font more legible is not always clear, but fonts designed for computer monitors focus on:

1. Making the height of the body of lowercase letters (specifically the "x-height") taller in comparison to the height of a capital letter.
2. Making the space inside round letters (specifically the "counter") larger and wider
3. Examining the letter "o" can show both x-height and counter.

Font Types

Serif: Strokes extend out from the top or bottom of the letterforms and include Georgia, Times New Roman, and Times.

Example: Serif fonts have proportional characters, in that the widths of the different characters vary; therefore, characters utilize different amounts of space.

Sans serif font: Strokes do not extend out from the top or bottom of the letterform and include Arial, Helvetica, Verdana, and Geneva.

Example: Sans-serif fonts have proportional characters, in that the widths of the different characters vary; therefore, characters utilize different amounts of space.

Monospace font: Strokes do not extend out from the top or bottom of the letterform and include Courier New, Courier, Andale Mono and Monaco (Mac) fonts.

Example: Monospace fonts do not have proportional characters; therefore, all characters utilize the same amount of space.>

Specify Multiple Fonts

Always specify multiple fonts in your formatting to cover multiple platforms.

1. Unix computers include "Helvetica" and "Times," but not other fonts.
2. Macintoshes have "Palatino", but Windows have the similar "Book Antiqua" font.
3. You may be able to specify less common fonts if you specify more common fonts as a backup.

A sample CSS formatting command with multiple fonts would be. The system would first search for Verdana, then Helvetica, then for the default sans-serif font

.sans {font-family: Verdana, Helvetica, sans-serif}

Note that if the none of the fonts are available on a computer, it will default to the user's browser's default font (whatever that may be).

Font Personalities

Select fonts based on the expectations of your audience

1. Use traditional fonts or fonts that are recognizable by viewers if you want to present a "professional" image.
2. You can use more "fun" fonts for younger audiences
3. Add decorative fonts in headlines or titles (where sizes are larger)

Non-English Text

Depending on the language, you may need to use fonts not listed above. See the Computing with Accents Font Suggestions page for more ideas.

References

Additional Links

• Penn State Accessibility and Fonts
• TRIO Typography for the Web
• WebAIM Accessible Fonts
• Web Style Guide Typography
• Penn State Computing with Accents Font Suggestions
• Web Design References: Typography (University of Minnesota)