Images of Text

8. Avoid Using Images of Text

  • Images of text are problematic for mobile users: they cannot reflow, so the browser must resize them down, often resulting in very small text.
  • Images of text are problematic for users with low vision: JPG and PNG images of text cannot be scaled up by users with low vision without becoming blurry.
  • Images of text are problematic for screen reader users: all text in the image must be placed in the alternative text, in which all formatting is lost and all the text is read as a single object. This is not a problem for a few words, but anything more than that and the screen reader users has lost the ability to navigate within the text by lines, list items, headings, etc.

Whenever possible you should use real text, formatted and styled to fit your design, rather than an image of text.

Best Practices

  • Use "real" text as your page content whenever possible.
  • Always provide alternative text.
  • For "short" images of text (logos, graphics), upload plenty of extra resolution so they look good on high-resolution screens and can be enlarged by users with low vision: e.g., use a 640px image for a 320px spot or use a scalable vector graphic (SVG).
  • For "long" images of text (event posters), reproduce all the text in the image, either as formatted content next to the image, or as a downloadable file with "real" text (DOC, tagged PDF).

Don't do This

Image of Text Users are Expected to Read

Princeton University, Program of the Department, All interested or curious sophomores are cordially invited to an OPEN HOUSE,12:30 PM, Tuesday ~ February 21, 2017, 209 Prospect House food will be served.

Open House Flyer

Why Is This Wrong?

  1. This image cannot reflow for mobile.
  2. This image cannot be enlarged without becoming blurry.
  3. While the invisible alt text for the image contains all the text, a screen reader user can only hear it as a single block; if they missed the room number on the last line they have to start over and re-read the entire block of text to hear it again.

Do This

Image of Text as Visual Flourish

Program of the Department Open House

12:30 p.m. to 1:30 p.m. on Tuesday, February 21st; 209 Prospect House

All interested or curious sophomores are cordially invited. Food will be served.

Why Is This Better?

  1. The text can reflow for mobile.
  2. The text can be enlarged without becoming blurry.
  3. A screen reader user can jump between lines, skipping parts to skim or re-reading individual parts of interest. Even better, the header has been "pulled out" into the page structure to make it easier for them to find the event listing in the first place.
  4. Users who want to view the poster as a poster can click to enlarge it, and then view it full screen rather than crammed into a column.