Skip to content Skip to navigation

Fonts and Typography

While font-choice and typography are generally a matter of design, it is important to remember that designs should be flexible enough to permit end-users to make adjustments to them. Assuring access to the content on the site is essential. Some of this flexibility is possible based on best coding practices such as using relative units for font size, and implementing CSS, coupled with strategic implementation of semantic markup.

The Fonts article from WebAIM includes the following list of key concepts:

  1. Use real text rather than text within graphics.
  2. Select basic, simple, easily-readable fonts.
  3. Use a limited number of fonts.
  4. Ensure sufficient contrast between the text and the background.
  5. Avoid small font sizes.
  6. Use relative units for font size.
  7. Limit the use of font variations such as bold, italics, and ALL CAPITAL LETTERS.
  8. Don't rely only on the appearance of the font (color, shape, font variation, placement, etc.) to convey meaning.
  9. Avoid blinking or moving text.

People who have low vision, reading disorders, or learning disabilities, are most affected by font and typography choices. It is best to use fonts that are typically available on the computers or mobile devices that site visitors use. Maintain appropriate contrast, and avoid using text that moves or blinks.

When you incorporate images of text into your site, rather than the text itself, site visitors can miss key information. Using real text not only helps screen reader users and those who may need to enlarge the text, but it also has other benefits, including search engine optimization. Note that icon fonts can be placed online accessibly; see the resources section for best practices.

Selecting fonts and making decisions about typography are both complex topics. As a result, we have only sketched the highlights, here. Consult the resource links for more details about specific use cases, along with code samples.

Target Audience: 
Content Creator
Designer
Developer
Last modified: 
April 22, 2015