Enhance Typography for Legibility

Choose typefaces and styles that are easy to read, especially for body text. Highly stylized fonts, as well as variants like italics, bold, and all-caps tend to be more challenging to read, so use these sparingly.

Typesetting

  • Give plenty of line-height and character spacing.
  • Keep text aligned to the left (or to the right for right-to-left languages), especially for body text.
  • Only use centered alignment for headings and other short strings of text.
  • Avoid justified alignment, which creates uneven spacing between words that can be hard to read.
  • Limit body text to a width that is comfortable for eyes to scan, aiming for around 60-100 characters per line.
A paragraph of text in a sans-serif font, along with a serif heading. Below is a short blockquote with italic paragraph text and a small citation in uppercase beneath.

In this example, Lexend is used as a base typeface, with Besley for headings.


Font Size

Set the base font size of designs to one that feels comfortable to read. Keep in mind that user settings may override the design, so plan for flexibility by ensuring layouts do not break when the font size is changed.

  • 18px is a good baseline for body text in most typefaces (though there is no strict rule).
  • Use oversized text carefully, as it may truncate at smaller viewport sizes or with user zoom settings.
  • Avoid very small text 14 pixels and under, as it can be difficult to read. 

Be sure to test designs in multiple viewport sizes, and adjust proportions as needed.

On the left, a mobile phone frame with a large heading on the screen where a single word is broken into multiple lines. On the right, the same frame but with a smaller heading as well as a few paragraphs of text, no words breaking.

The font size on the left here may work on larger screens, but it is too large for a phone’s viewport.

Copywriting with Clarity

Use plain language and define any acronyms or jargon used. People with cognitive disabilities may have difficulty understanding overly complex or ambiguous language. Everyone can appreciate text that’s clear and easy to read! 


WCAG 2.1 AA Success Criteria