CP 8 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; and
  • 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: 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.

Tip: Often the same visual effects can be produced using a technique called CSS that styles real text and adds background images. Ask a teccie for more information.

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