Page Content

Summary

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 12pt (=16px) for body is generally recommended for body text (depending on audience).
2. Ensure that default fonts are no smaller than 9 pt (=12px). Smaller sizes may be illegible on some platforms.
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.

Points vs. Pixels

Font size specifications may come in points or pixels where

• 1 pixel (px) is usually assumed to be 1/96th of an inch
• 1 point (pt) is assumed to be 1/72nd of an inch.
• Therefore 16px = 12pt

MathML Conversion

$$\frac{16\text{px}}{96\text{px/inch}}\times \; <!--\; \times \; -->72\text{pt/inch}=12\text{pt}$$

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).

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 to determinw how the sizes will appear in various devices.

Top of Page