Resizable text

Text size in HTML documents can be affected by multiple factors including browser default styles, styles added by the HTML document and, if the code allows it, browser settings and user style sheets.

Recommendations

Style text with units that are resizable in all browsers.

Ensure content is visible* and usable* with text resized to 200% of normal*.

Ensure content is visible* and usable* with page zoomed to 200% of normal*.

Support zoom where it is available on a platform.

*visible: the content isn’t clipped, doesn’t overlap other content, and has sufficient spacing to make it readable.
*usable: links, forms, and other controls don’t overlap with other elements making them not actionable.
*normal: the default browser/HTML added styles and settings.

Why it matters

Standard browser features for resizing text or page zoom can make content accessible for many low vision users without the need for additional assistive technologies such as screen magnifiers or screen readers.

Text size settings affect the text and any styles based on text-size, whereas page zoom affects the whole page and may introduce horizontal scrolling. Ideally both should be supported to meet different user needs and preferences. For example, some users may adjust only text size settings to aid reading, other users may prefer to increase the size of all page content using zoom or a magnifier, and some users may need to do both.

Many browsers will not resize text styled with fixed units such as px or pt, so use relative units such as em, rem and %.

Browsers on mobile platforms support zooming with pinch in/out gestures. Aim to support device text size settings and not to disable the pinch zoom. This may need careful consideration for content that cannot reflow or interactive content that uses similar gestures, such as a zoomable map. Ensure support of at least one method of resizing text.

Examples

Recommended:

<style>
body {
    font-size: 1rem;
}
</style>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=yes;">
<!--when supporting pinch zoom, maximum-scale should be at least 2.0 if defined-->

Not recommended:

<style>
body {
    font-size: 13px; /* unresponsive to browser settings */
    overflow: hidden;
}
</style>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">

Testing

Using a browser that supports page zoom, increase the zoom level to 200%. Aim for text and other content to increase in size while remaining visible and useable.

Using a browser that supports text size in the settings, increase the default text size to 200%. Aim for text to increase in size while all content remains visible and useable.

Using a browser/device that supports pinch in/out to zoom content, check if these gestures increase and decrease the content zoom level. If they do not, change the default text-size of the device to 200% and check if the content respects that setting and increases the text size. Aim for at least one method to increase the size of text while content remains visible and useable.

��tv