Zoom & Resizing Text

Table of Contents

  1. How Browsers Zoom and Resize Text
  2. Avoid Clipped, Truncated, Obscured, and Overlapping Text
  3. Avoid Horizontal Scrolling
  4. Development Best Practices

How Browsers Zoom and Resize Text

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:

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.

Avoid Clipped, Truncated, Obscured, and Overlapping Text

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:

Google search results with text resized to 200%, showing overlapping and clipped text

These kinds of problems 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 accommodate both if possible.

Avoid Horizontal Scrolling

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.

Development Best Practices

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 does not give a mandate for a minimum font size, it is best that developers use generous, legible font sizes.
  • Provide sufficient 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).