Skip to content

Enlarged text

Overview

Users can easily change the font size in their web browser. They can either do this permanently within their browser preferences or do it on the fly using their browser’s zoom functionality.

All major desktop web browsers have built-in functionality that enables users to zoom in:

  • In Windows browsers: Ctrl and plus (+)
  • in Mac browsers: Command and plus (+)

To zoom out, use the same keystrokes with the minus key.

By default, browsers preserve the page proportions when users zoom in and out, so the content changes size but the layout does not change. However, this results in a need for horizontal scrolling which makes it difficult to read the page. Therefore, some users prefer to simply enlarge the text, not the entire page.

When users increase their browser’s default font size or enlarge text using their browser’s zoom functionality,  the page content should still be readable.

Techniques

WCAG 2.1 requires all content to still be readable if text is zoomed to 200%. Testing web pages to see if they meet this requirement is easiest in Firefox. Here’s how:

  1. Turning on text-only zoom (View > Zoom > Zoom Text Only).
  2. Zoom in six times using Command + (Mac) or Control + (Windows).
  3. Explore the page to be sure all content is readable. Watch especially for content that disappears beyond the margins of its container or overlaps with other text.

How to avoid loss of content when text is enlarged

Use responsive design to optimize the layout of your page for screens of various sizes. Wherever possible use percentages rather than pixels for sizing and placement. Especially avoid constraining the height of a container that includes text. Let the container grow as needed to accommodate the changing text size.

WCAG 2.1 success criteria

The issues described on this page, and associated Techniques pages, map to the following success criteria in the W3C’s Web Content Accessibility Guidelines (WCAG) 2.1: