These fine people helped write this article:

Zoom & Resizing 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:

• 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.

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:

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.

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).

Zoom in and out of a website

Here’s how you can zoom in and out of individual websites.

1. Click the menu button on the right. The Firefox menu will open, and you will see the zoom controls at the bottom.
2. Use the + button to zoom in, and the – button to zoom out. The number in the middle is the current zoom level – click it to reset the zoom to the default zoom level. You can also see the current zoom level in the address bar:

Keyboard shortcuts: You can also use the zoom controls without a mouse. Press and hold Command Ctrl while pressing &#43 to zoom in, – to zoom out, or 0 to reset.

The zoom level is saved per hostname, even after you close Firefox. For example, all pages on support.mozilla.org share the same zoom level setting, but it is different from the zoom level setting of the pages on blog.mozilla.org.

Pinch to zoom

This feature allows users to zoom in and out of pages by using a pinch motion without affecting the layout of the page.

The pinch action is currently supported on Windows and Linux through touchscreen and high precision touchpads, and on Mac through touchpads.

How to only change the size of the text

Instead of changing the size of everything, you can just change the size of the text.

1. Press the Alt key to temporarily bring up the traditional Firefox menu. On the menu bar at the top of the screen, click View , then go to Zoom .
2. Select Zoom Text Only . This makes the controls only change the size of text; not images.

How do I zoom in on the text?