Typography

Legible typeface

• There is no one typeface that is optimal to all people
• Consider a typeface that emphasizes clarity and legibility. Look out for:
  • less character ambiguity, e.g.
    • Il1 (upper case i, lower case L, and the number 1)
    • O0 (upper case O and the digit 0)
  • mirroring letters, e.g. db, qp
  • letter spacing is adequate, not too tight
  • typeface that scale well to different sizes
  • typeface that is appropriate to the audience and brand
• Use limited number of typefaces, fonts, and font variations

Examples of more accessible typefaces:

• Serif: Times New Roman, Georgia
• Sans-serif: Tahoma, Verdana, Helvetica, Roboto, Calibri, Arial, Atkinson Hyperlegible, Open Sans
• Slab-serif: Arvo, Museo Slab, Rockwell

Additional resources:

• Accessibility of typefaces
• Site to help pair different typefaces

Font size

• Primary body text - at least 16px (1rem in relative units)
• Secondary text (e.g. captions, footnotes) - at least 12px
• Use relative font size units, e.g. em, rem, percents

Line length

The optimal line length for body text is 50–75 characters

Additional resources:

• The optimal line length

Text alignment

Left align body text for LTR languages, right for RTL.

This provides the eye a constant starting point for each line, making text easier to read.

Resize text

• Text remains readable and usable when zoomed to 200%
• No loss of clarity or functionality
• Specify font and container sizes using relative units such as em, rem, percents

Text spacing

Text remains readable and usable when spacing is changed using custom styles to at least:

• 1.5 times line height
• 2 times spacing after paragraphs
• 0.12 times letter spacing
• 0.16 times word spacing

without content being hidden, cut off, or broken.

Specify font and container sizes using relative units such as em, rem, percents

Images of text

Text must be actual text, not images of text, unless a specific visual presentation is absolutely necessary (e.g. logo)