Home / Best Practices / Typography

Typography

Basics

  1. Pages should be resizable up to 200% with no loss of legibility or functionality.
  2. Use legible fonts and relative font sizes.
  3. Avoid small fonts, and limit styles like bold and italics.
  4. Ensure sufficient contrast between text links and text and between text and the background.
  5. Don't rely on color alone to convey information.  Use secondary cues.
  6. Avoid text in images.

In depth

Improving the legibility of your content means more people will be able to read and understand it.  People with low vision often need to increase the size of text so they can read it. Many people have difficulty distinguishing certain colors or colors with low contrast. Users with some cognitive impairments have difficulty reading long lines of text, and 80-character lines have been shown to be the most legible for all users.

Text resizing (zoom)

Pages should be resizable up to 200% without assistive technology with no loss of legibility or functionality. Using responsive layout design and relative font sizes (see "Fonts" below) allows pages to be more easily resized.

Legibility

Fonts

  • Font choice: The choice of font should be dictated by legibility. ASU web standards require the embedded font Roboto, an open source font developed by Google specifically for its mobile operating system and widely regarded as a legible web font.
  • Relative font sizes: Use relative font sizes, which allow text to be resized and improve legibility. Relative font sizes ensure that a page's font size is inherited from the browser.  The default text size for most browsers is 16px. Therefore, setting your font size to 1em essentially means you are setting it to 16px for most users, except for those who need larger font sizes and have adjusted their browser default. 
  • Font size: Small fonts are difficult to read for those with low vision and should be avoided.
  • Font styles: To improve legibility, use the following sparingly: italics, bold, all capitals, justified text and decorative fonts. Never underline text unless it’s a link.
  • Text color contrast ratio: The visual ratio between text and background colors should be 4.5:1. ASU web standards require websites to use font color #2a2a2a for text and #fff for the page background, which is a ratio of 14.35:1--enough to meet level AAA requirements.
  • Link color contrast ratio: Text links should have 3:1 contrast between the link text color and the surrounding non-link text color. (See more on Color and Contrast.)
  • Secondary visual cues: Don't rely on font color alone to visually convey important information. If font color transmits something meaningful on a page (such as a link), provide a secondary method to communicate the information (such as underlining). (See more on Color and Contrast.)
  • Text graphics: Use actual text whenever possible, rather than graphic text. Text in images cannot be seen by search engines, screen readers and other assistive devices. (See Images: Graphic Text.)

Text blocks

  • Line length: The line length of content text should be no more than 80 characters or glyphs. Especially for people with some cognitive disorders, longer line lengths cause users to lose their place while reading.
  • Justification: Studies have shown that content text that's left-justified is more legible.
  • Line spacing: For optimum legibility, line spacing (leading) should be at least 1.5 within paragraphs, and spacing between paragraphs should be at least 1.5 times larger than the line spacing.

How to test

Text resizing

The best way to check that text can be resized without loss of content or diminished layout functionality is to display a website in a browser and increase the size of the text only to 200%. You should be able to read everything on the page.

In Firefox go to View > Zoom, then check "Zoom Text Only." Press Ctrl and + six times to get to 200% zoom level.

If you do not have access to Firefox:

  • Internet Explorer:  View > Text size > Largest will increase the text size, but not to 200%.  You can increase the entire page size (Page > Zoom > 200%) and check text, but this may not be fully accurate.
  • Chrome:  You can increase the entire page size and check text, but this may not be fully accurate.  Press Ctrl and + six times to get to 200% zoom level.

Other typography tests

Manually check line-length, line-spacing, justification, use of font styles and graphic images.  See Color and Contrast testing techniques.

Relevant W3C WAI documents

  • WCAG 2.1 Guideline 1.4.8 Visual Presentation: For the visual presentation of blocks of text, a mechanism is available to achieve the following:
    • Foreground and background colors can be selected by the user.
    • Width is no more than 80 characters or glyphs (40 if CJK).
    • Text is not justified (aligned to both the left and the right margins).
    • Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
    • Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.
  • How to Meet WCAG 2.1 Guideline 1.4.8