Creating accessible assets: Typography

Clear, readable text is essential for an accessible website. Typography affects how easily users can scan, understand, and engage with your content. In this article, you’ll learn how to choose accessible fonts, set appropriate sizes and line spacing, and structure text for readability. Follow these guidelines to ensure your typography supports an inclusive experience for all visitors.

Requirements

• When using markup languages that support certain text style properties, adjusting these properties as follows won’t cause any loss of content or function:
  • Set line height (line spacing) to at least 1.5 times the font size;
  • Set spacing after paragraphs to at least 2 times the font size;
  • Set letter-spacing (tracking) to at least 0.12 times the font size;
  • Set word-spacing to at least 0.16 times the font size.
• Text can be resized up to 200 percent without loss of content or functionality without assistive technology.
• The page should still be functional. 
• The page must allow users to zoom in on mobile devices. The following is NOT allowed:
  <meta name="viewport" content="user-scalable=no">.
• Content can be presented without loss of information or functionality and without requiring scrolling in two dimensions for:
  • Vertical scrolling content at a width equivalent to 320 CSS pixels;
  • Horizontal scrolling content at a height equivalent to 256 CSS pixels.
• Provide a text alternative for informative CSS-generated content, and consider setting the CSS-generated text to aria-hidden="true".
• Don’t use text in images if you can use real text instead unless it’s essential (like a logo) or you need specific fonts, sizes, colors, or backgrounds.
• If it is required to use the image of text, follow guidelines for color and contrast. 
• Text needs to follow guidelines for color and contrast. 

Exceptions

Scrolling in two dimensions

It is allowed for sections of the content that need a two-dimensional layout for understanding or usability, e.g., large tables.

Text spacing for specific languages

Some text style properties may not apply to all languages and scripts. For instance, letter spacing might not apply to languages using logographs like Chinese. However, word spacing and line height would still be relevant in such cases.

Examples

	DO: When using general zoom in Chrome, the page doesn’t lose its functionality, and the layout stays useful and unbroken. Also, the order of elements stays the same.
	DON’T: Text overflows container when respaced.In this example, the div containing the text is set using pixels (px), so it does not expand with the content. Either setting the div height in relation to the font height using ’em’ or not setting the div height at all would prevent the text from overflowing the div.