Zoom & Resizing Text
Table of Contents
- How Browsers Zoom and Resize Text
- Avoid Clipped, Truncated, Obscured, and Overlapping Text
- Avoid Horizontal Scrolling
- Development Best Practices
- Associated WCAG Criteria
Users with low vision may prefer to have their browser resize text or zoom into page content to make it easier to read.
Enlarging text is primarily the browser’s responsibility. Browsers accomplish this chiefly in one of two ways: enlarging the font size only, or zooming into the entire page and applying responsive styles, as appropriate.
Developers should code in such a way that does not interfere with the browser’s default ways of enlarging content. Developers should verify this for themselves.
Instructions for how to zoom or resize text in common browsers:
- Safari: changing font size and zoom level
- Chrome: zoom and set font size
- Firefox: font size and zoom
- Microsoft Edge: making text larger
It is also important to avoid providing images of text, as such text cannot be resized through text resizing, and may become blurry when zoomed.
A developer’s primary responsibility is to insure that, when enlarged, text doesn’t become illegible when zoomed because it overlaps with adjacent text or truncated altogether:
These kinds of probelms are more likely to occur with text resizing rather than with zooming content. While a page technically fulfills the WCAG criteria if it allows either text resizing or zooming, it is best practice for developers to accomodate both.
Internet users expect to scroll vertically. But, they may not be accustomed to scrolling horizontally, or may lack the motor ability to do so. Developers should avoid horizontal scrolling on viewports 320px wide and larger.
To allow for maximum support of browser zooming and resizing, developers should follow a few best practices:
- Use CSS, rather than tables, for layout.
- Define font sizes and text container dimensions in relative units, such as ems, rems, percents, or named font sizes. Avoid explicitly defining the width and height of containers in pixels.
- When scripting, calculate the size and position of elements such that they scale with text size.
- While WCAG 2.0 does not give a mandate a minimum font size, it is best that developers use generous, legible font sizes.
- Provide sufficent space between columns of text to mitigate the risk of text overflowing their containers.
- If images of text must be used, the text should be at least 18pt (24px).