How to select an accessible font

Question

What fonts should we use serif or san serif? Are there any guidelines for html or email?

Answer

There is no single best typeface or font that can be recommended for both HTML and email, but we can take you through some points to help make your font selection easier for you, and also create a better experience for those viewing your web content.

  • Select a font that is simple, and familiar to users. Overly complex fonts can be more cognitively intense to a reader as they will need to orient themselves to new font patterns.
  • Avoid a font where some characters can appear similar to another (Think of 1 vs I, and C vs O)
  • Avoid using too many different fonts and typefaces.
  • Take note of the weight and spacing of your font. Weight is referring to the thickness of the text, and spacing is referring to the amount of space between characters.
  • Ensure that you are reaching color contrast ratios for regular text (4.5:1) and large text (18pt+ 3:1) - This will conform to WCAG 2.1 AA guidelines.

Some examples of recommended fonts:

  • Verdana
  • Lucida  Sans (PC)/Lucida Grande (Mac)
  • Tahoma
  • Georgia
  • Palatino (Mac)/Palatino Linotype (PC)/Book Antiqua (PC)
  • Andika

 

Additional resources:

https://webaim.org/techniques/fonts/

https://accessibility.psu.edu/legibility/fontface/

 

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.