Are font declarations sized in ems, rems or percentage?

Goal

Ensure that the text responds to attempts to zoom in, which makes the text larger on the screen.

Why this matters

People with low vision often zoom into the screen either with their browser or with a third-party application. When the font size is implemented using absolute units such as viewport width, the font can’t change size in response to a zoom command. This makes the text too small for some users to read.

How to implement

The Mozilla Developer Network CSS Values & Units page provides a primer on the different measurement units that CSS implements and how they differ.

WCAG Technique C28: Specifying the size of text containers using em units provides instructions for using ems specifically.

You can also use rems, percentage, viewport percentage, or named font values to set the font-size attribute.

How to test

1. Inspect the text in the browser’s code inspection tool and ensure that the CSS font or font-size properties are using any of the following units for measurement: ems, rems, percentage, named font size. (Other relative units may work as well, that’s why we test.)
2. Zoom the page to 200% to confirm that the text grows larger in proportion to the zoom level.