DES 4.3 Avoid using images to display text

Text within images can be difficult to read, especially for some people because:

  • Images don't scale when text size is increased by the user;
  • Magnified images can appear highly pixilated
    (or fuzzy):
    • particularly for small (and anti-aliased) text.

Using text properly reduces file size, permits scaling and easy updates, and reduces potential for accessibility errors ( such as missed alt text).

  • If possible, always use text rather than images of text. Exceptions:
    • logos
    • Important special text effects;
    • Important brand communications;
    • Illustrations (such as in this document).
  • Avoid putting essential text within an image.
  • Avoid putting large paragraphs of text within an image.
  • Avoid using images of text for important navigation (menus, etc.).

Tip: Often the same visual effects can be produced using CSS to style text and background images.

Tip: Where text as images is used, check the clarity by magnifying the image. Sometimes minor adjustments to size or position can improve the fuzziness caused by anti-aliasing.

Text especially small text does not magnify well - use real text wherever possible  Good: The NDA  site has scalable text in the main navigation bars. They nav bars would not scale if they were images