Zoom

Vision disabilities often make it hard to perceive content on a web page. There are various assistive technologies available to help with this, and one of these tools is the ability to zoom a page.

There are at least three types of zoom:

1. "Pinch" zoom
2. Browser/OS zoom
3. Browser default font size

"Pinch" zoom is likely familiar to anyone who has used a browser on a tablet or smartphone. It zooms in on a particular part of the UI, but you then have to scroll left and right as well as up and down to see everything.

Browser/OS zoom works slightly differently. Effectively, this adjusts the size of a CSS pixel, meaning everything scales up as though the browser window were a little smaller, but because the browser window isn't any smaller everything is able to zoom in by the same amount.

Changing the default font size in your browser is the odd one out here. With some exceptions, both "pinch" zoom and browser/OS zoom generally work seamlessly for any responsive design, regardless of how it was put together. But changing the default font size in your browser only affects a web page if sizes are specified relative to the base font size.

If disabled users need to increase the base font size in their browser in order to make text easier to perceive without necessarily making significant changes to the layout, which is a likely consequence of using browser/OS zoom, websites should accommodate this.

Most typically, this means using rem units instead of px. Any font size (or anything else, like an element's padding) specified in rem will scale up or down with the browser's default font size, whereas if it is specified in px then it will be uncoupled from that setting.

To see an example of these differences, try adjusting these settings and using various different methods of zooming to see how the example pod changes.

If your base font size is set to the default 16px, then you likely won't notice any difference when changing between these settings. But if you try setting it to something else, you will start to see differences.

rem isn't the only relative CSS unit that can be used for this, though it is generally the most convenient.

Another pattern that shows up sometimes is using a combination of the clamp function and the vw unit, which is relative to the viewport width, to make a font's size able to scale smoothly with the size of the browser.

I've found this can be useful for applications such as labels on a graph, where scaling the font size along with the size of the component ensures it takes up the same amount of space. But the vw unit does not scale with the base font size:

For this example, changing the default browser font size will affect the relationship between the 1.5vw calculation and the minimum and maximum rem values in the clamp function. So changing the base font size can adjust the minimum and maximum font sizes, but while the result is between them the size of the font won't depend on the browser's default font size.