Goal
Ensure that when the text in a container resizes due to a zoom command, the container does too, so that the text doesn’t get covered, cropped, or run into another container.
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 changes size but its container doesn’t, the text will either be cut off or overflow its container. This can cause a mess of unreadable text and other elements on the page.
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.
Using the same relative unit for both the font and the container means that they’ll zoom to the same proportion. This is one of the advantages of sizing everything in your system using rems and ems.
How to test
Zoom the page to 200% to confirm that when the text grows larger…
- The text and the container zoom in proportion to each other.
- The text is not truncated.
- The text does not overflow its container.