Eastern Oregon University > Digital Accessibility At Eastern Oregon University > Digital Accessibility Guidelines > Text Resizing Guidelines

Text Resizing Guidelines

The font families and font styles used on your digital content can have a major impact on the readability of your content. Choosing easier to read fonts, and ensuring adequate whitespace in your text, helps reduce eyestrain. This improves usability for everyone, and is especially beneficial for people with limited vision.

Guidelines

  • The bulk of your text should be an easy-to-read sans-serif font. Serif fonts might be appropriate for headings and text with special emphasis, but the majority of your text should be a sans-serif font. EOU uses Tungsten, Gotham, and Arial fonts on the eou.edu website.
  • Do not use non-standard fonts on the website
  • When possible, choose em or rem font sizing when available, versus px sizing.     
    • px defines font size in pixels. It’s an absolute metric of measurement. This means font sizes don’t increase proportionally when you zoom into the page.
    • em defines the font size relative to the parent element’s font size. Defining font as having an em of 2.0 says it should be twice as big (in pixels) as other text within the same area.
    • rem is similar, it defines the font size relative to the default font size for the entire page, not the immediate parent element in HTML.
  • Using em or rem allows the text to stay proportionally sized when under significant zoom. Text defined as px will zoom in somewhat, but typically less so than other elements on the page.
  • Use generous line spacing. The line height should be at least 1.5x the font size, and the paragraph spacing should be at least 1.5x the line height.
  • Don’t use justified text alignment. Left-aligned text is best; right-aligned and center-aligned text can be used in moderation.
  • Consider breaking long paragraphs of text into smaller paragraphs of text, or into bullet lists.
  • Some people have difficulty reading lines of text longer than 80 characters. Consider using a multi-column page layout for text-heavy content.
  • Pages must be able to zoom in up to 200% without loss of functionality.

How to Test

  • Review the page, verify it uses a sans-serif font for body text.
  • Check that the line height, kerning (spacing between letters within a word) and paragraph height is easily readable.
  • Zoom in by using Ctrl + until you reach 200% zoom. Make sure the text resizes appropriately relative to the rest of the content, and that no functionality is lost. Pay special attention to tables and wide graphics. The page may switch to a mobile layout; this is fine.