Text resizing
Except for captions and images of text, text can be resized without assistive technology up to 200% without any loss of content or functionality and without overlapping with other content.
Why it matters
Some people need to enlarge web content in order to read it and some need to change other aspects of text display (font, space between lines, and more). Most browsers allow users to change text size through text size settings, text-only zoom, and page zoom (which also zooms image, buttons, etc.). When resizing text, any of the following can make the page unusable:
- Text is not visible without scrolling horizontally
- Content disappears or is truncated
- Interactive elements overlap each other
Example of bad text zoom experience
Example of text being cut off by viewport
It is important that relative length units (em, rem, %, vw) are used for text in the code.
WCAG 2.0 reference: 1.4.4 Resize text
Example 1
Some users may choose to resize just their text. Setting a px based font-size on the html element suppresses this ability, but a percentage based value does not. In this example, 100% means “100% of the size the user chose in their browser or OS settings”
html {
font-size: 100%;
}Example 2
When changing the font size to Large in Chrome’s advanced settings, the font-size will increase as expected — that is, if no px sizes are used further down in the page’s CSS. To make sure line-height adjusts proportionately, define your CSS line-height using relative units like em or rem or unitless values. If you don’t, when the font size increases, the line height will remain the same, resulting in poor line height and reduced readability.
In this example, the line-height is always equal to 1.5 times the current font-size. So whether the text size may be increased or decreased, the line height will remain appropriate at any text size.
html {
font-size: 100%;
}
p {
font-size: 1em;
line-height: 1.5;
}Example 3
To make sure text resizing is possible via pinch zoom on touch devices, use the correct viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0">How to check for this
- Test zoom text only in Chrome and Firefox Manual
- Follow the steps described under Resize text checks Manual
- Check that all text gets larger, text doesn’t disappear or get cut off, text, images and other content do not overlap, all interactions and controls are visible and usable, horizontal scrolling is not required to read blocks of text. Manual