Techniques for WCAG 2.0

On this page:

-

# C14: Using em units for font sizes

## Applicability

CSS

This technique relates to:

- Success Criterion 1.4.4 (Resize text)
  - How to Meet 1.4.4 (Resize text)
  - Understanding Success Criterion 1.4.4 (Resize text)
- Success Criterion 1.4.8 (Visual Presentation)
  - How to Meet 1.4.8 (Visual Presentation)
  - Understanding Success Criterion 1.4.8 (Visual Presentation)

## 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 CSS is defined in a style element, keyed off an element as in the examples. When using inline style with the "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.

- Cascading Style Sheets, Level 2 (CSS2), Fonts

- CSS 2 Font Size Property

- CSS-Discuss Font Size Using Ems

## Related Techniques

- C12: Using percent for font sizes
- C13: Using named font sizes

## 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

- Check #2 is true

- Top
- Contents
- Intro
- Previous: Technique C13
- Next: Technique C15