Page Content

There are two main concerns here. One is ensuring that default font sizes are not too small. Another is ensuring that text can be expanded to 200% on Web sites.

  1. For traditional computer monitors, a size of 12-14 points/pixels for body is generally recommended for body text (depending on audience).
  2. Ensure that default fonts are no smaller than 9 points/pixels. Smaller sizes may be illegible beyond the Windows platform.
  3. The WCAG Guidelines recommend ensuring that text can be zoomed to 200%. Along with that goes a recommendation for liquid layouts which can accommodate 200% text.

    WCAG Guideline 1.4.4—Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

  4. When using CSS, most font sizes should be made in relative terms (e.g. %, em). This allows fonts to be displayed relative to a particular monitor setting or device.

CSS: Relative Font Sizes

A current accessibility recommendation is to use relative font sizes such as percentages or units of em instead of absolute sizes such as pixels or points. This allows text to be more easily resized appropriately across multiple devices and platforms.

Nine Point/Pixel Minimum

If you are using a WYSIWYG editor that gives you the option to make text smaller, make sure the size doesn’t go below 9 point or 9 pixels. Font sizes at 8 points or smaller can be illegible for many Mac users, as seen in the example below (see the section “Points Versus Pixels” below for an explanation of font sizing systems).

The minimum font size only applies to footers, such as a copyright statement. For body text, you should leave the font size set at the default, which is usually set between 12 and 14 point).

Eight Point Text on a Mac

The image below shows how 8 point text can be rendered in some Mac browsers.

8 point text in Times New Roman and Arial fonts

Beware CSS Sizes X-Small and XX-Small

If you’re assigning styles with CSS, be cautious when using {font-size: x-small} and {font-size:xx-small} which can render text at very small font sizes. See demo below.

Demo of Small Relative Font Sizes

  • Default Font Size
  • Small
  • X-Small
  • XX-Small

Top of Page