While font-choice and typography are generally a matter of design, it is important to remember that designs should be flexible enough to ensure access for everyone.
Best Practice for Fonts & Typography
To make sure your digital property is as accessible as possible from the get go, make sure to:
- Use real text rather than text within graphics.
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 below for best practices.
Note: Logotypes (text that is part of a logo or brand name) are considered essential and are exempt from this rule. - Select basic, simple, easily-readable fonts.
It is best to use fonts that are typically available on the computers or mobile devices that site visitors use. See this article for familiar typefaces and easy-to-read fonts. - Use a limited number of fonts.
- Ensure sufficient contrast between the text and the background.
Don't put white text on light coloured backgrounds and make sure, if your brand colours are dual-tone, they are from opposite ends of the colour spectrum. Don't use colours that are too close to one another or which are difficult to differentiate for people with visual disabilities (see this article on Types of Colorblindness for reference). - Avoid small font sizes.
At least 16 point size is a good place to start. Have a read of this article entitled The Responsive Website Font Size Guidelines. - Use relative units for font size.
- Limit the use of font variations such as bold, italics, and ALL CAPITAL LETTERS.
- Don't rely only on the appearance of the font (color, shape, font variation, placement, etc.) to convey meaning.
- Avoid blinking or moving text.
Where do I start when thinking about what fonts my website should use?
You can hard-bake flexibility into your designs by using coding best practices such as relative units for font size, and implementing CSS, coupled with strategic implementation of semantic markup.
Why is this important?
People who have low vision, reading disorders, or learning disabilities, are most affected by font and typography choices.
Additional Resources
▪ Text-Typographical Layout suggestions - how to align or layout the text on your page