Font

Back to full list

What do I need to do?

Use font sizes in relative rather than absolute terms. Do not use font size, color or type to convey information.

How do I do this?

Relative font sizes are measured by em or percentage, and both methods work the same way. For example, instead of setting font size at 2 and 4, set the default font as P {font-size: 1em; } or P {font-size: 100%; }. To double these font sizes, simply code P {font-size: 2em; } or P {font-size: 200%; }.

Another option is to use pixels to set font size. Although using em or percentage is preferred, some older browsers may not recognize this code. For example, set P {font-size: 16px; } as the default and P {font-size: 32px; } to double the font size.

Why does this matter?

Font size in absolute terms cannot be changed, while fonts created using relative size will increase or decrease depending on the user's personal settings. People cannot always use the font style that was originally intended. Those who have low vision may use screen amplifiers, or people may simply want to increase font size to reduce eye strain.

Using font size, color or type to convey information should be avoided because it may be hidden to people using software such as screen readers and can be indistinguishable to the 10 percent of the population who are color blind.

For more detailed information, consult the WebAIM tutorial.