Text Styles

Selecting fonts and styles to use on your website can be one of the most enjoyable aspects of managing a website, but making sure they are readable by the largest audience possible is a key component to accessibility.

Tips for selecting and styling web fonts

Pick readable fonts

Font selection takes into consideration usage for the largest audience, which includes users with low vision, cognitive disabilities, and reading disorders. There is no single font that everyone agrees is the “best.” However, Tahoma, Calibri, Helvetica, Arial, Verdana, and Times New Roman are often cited as accessible fonts, but there are more. Key is to select a clean, non-decorative font. Avoid decorative fonts, as comprehension will be lowered, especially for body copy.

Limit number of fonts

Use a limited number of fonts and variability. Selecting two complimentary accessible fonts — one for headings and one for body, for example — is recommended. Also, you can use a single accessible font in different weights for headings and body: “bold” for headings, “regular” for body. Sometimes this will be your brand font or you can select from numerous fonts within WordPress. Most important is to be consistent across the entire site.

Consider font size

Generally speaking, body copy should be at least 16px.

Pay attention to contrast

The basic rules of color contrast, as outlined on the Color Contrast page, apply to all copy within your site. This includes headlines, body copy, links, callouts, quotes, captions, and tables.

Other styling considerations

Limit use of all caps in headlines, and more importantly, any body text.

Limit overuse of italics