Techniques for WCAG 2.0

Skip to Content (Press Enter)

-

C14: Using em units for font sizes

Applicability

CSS

This technique relates to:

User Agent and Assistive Technology Support Notes

In Internet Explorer 6, using ems for font sizes will cause the text to grow more than using % or named font sizes. So, text-size/largest, might cause the text to grow more than 200% and have clipping problems.

When font size is given in absolute units of measurement, such as points or pixels, the Text Size menu commands in Internet Explorer 7 and earlier do not resize the text.

Internet Explorer 7 only changes the text size when the text is styled via a page-wide CSS rule applied to the element type or class. When styling the text inline using an element's style attribute, the text size change is not supported.

Description

The objective of this technique is to specify text font size in em units so that user agents can scale content effectively. Since the em is a property of the font, it scales as the font changes size. If a font-size is specified for the body element, all other elements inherit that value, unless overridden by a more specific selector.

Examples

Example 1: Em font sizes in CSS

This example defines the font size for strong element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the strong words in this example will each be larger than their surrounding text.

Example Code:


strong {font-size: 1.6em}

...

<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him, 
it is <strong>very</strong> important to let him configure the text size.  </p>
…

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

  1. Examine all CSS properties that define font size for each rule set.

  2. Check that the value is expressed in em units.

Expected Results