Accessibility settings like "increase text size" or browser zoom are exactly the scenario rem and em were designed to handle gracefully — but "handle gracefully" doesn't mean "handle identically." The two units respond in genuinely different ways once a user changes their default font size.
What Actually Happens When a User Zooms
Browser zoom (Ctrl/Cmd + or the browser's zoom setting) scales the entire page uniformly, including px values — this affects every unit equally and isn't where rem vs em differences show up. Technically, zoom makes each CSS pixel larger: at 200% zoom, one CSS pixel covers twice as many device pixels in each direction.
That has a side effect worth knowing. On a 1280px-wide browser window, 200% zoom leaves only 640 CSS pixels of viewport width, so a @media (max-width: 768px) rule kicks in and the user gets your tablet layout. Zoom is effectively a responsive-design test, which is why a well-built responsive site usually handles it well.
The more interesting case is a user changing their browser's default font size in accessibility settings — not zoom, but the actual base font-size preference — which is what rem and em respond to, and px does not.
Three Different Settings, Three Different Results
| User action | px | rem | em | Page reflows? |
|---|---|---|---|---|
| Page zoom (Ctrl/Cmd +) | Scales | Scales | Scales | Yes, viewport shrinks in CSS px |
| Default font size (e.g. 16px → 20px) | No change | Scales | Scales, if the chain is relative | Only where text and spacing grow |
| Pinch-zoom on mobile | Magnified | Magnified | Magnified | No, it only magnifies the visual viewport |
Firefox also offers a "Zoom text only" option, which enlarges text while leaving other dimensions alone. That mode is a good stress test for containers with fixed pixel heights, because the text inside them grows but the boxes do not.
How REM Responds
Since every rem value traces back to the root <html> font size, and that root size is exactly what the user's accessibility setting changes, rem-based layouts scale up predictably and uniformly. A user who bumps their default font size up 25% sees every rem-based measurement on the page — text, padding, margins — scale by that same 25%, keeping proportions intact.
| Value in CSS | Default 16px | User default 20px | User default 24px |
|---|---|---|---|
1rem | 16px | 20px | 24px |
1.5rem | 24px | 30px | 36px |
2.5rem | 40px | 50px | 60px |
24px | 24px | 24px | 24px |
This only works if your stylesheet leaves the root relative. html { font-size: 62.5%; } still scales (10px becomes 12.5px at a 20px default), but html { font-size: 16px; } pins 1rem to 16px and quietly disables the user's setting for the whole site.
How EM Responds Differently
Em also responds to that same root change, but indirectly: each em font size is relative to its parent's computed font size, so the user's change travels down the tree one ancestor at a time. If every ancestor uses relative units, the result is just as proportional as rem — a 1.25em heading inside a 0.875em sidebar still scales by exactly the same 25%.
The problem appears when the chain is broken. If any ancestor sets its font size in px, everything inside it stops responding:
.sidebar { font-size: 14px; } /* breaks the chain */
.sidebar h3 { font-size: 1.25em; } /* always 17.5px */
.main h3 { font-size: 1.25rem; } /* 20px, or 25px at a 20px default */With a 20px default, the main heading grows to 25px while the sidebar heading stays at 17.5px. The user made one change, but parts of the page ignore it — a mismatch that is easy to miss because everything looks fine at the default size. Em-based spacing follows the same logic, since it is tied to the element's own font size.
What Happens to Media Queries
Px breakpoints do not move when the default font size changes. Em or rem breakpoints do, because in media queries they refer to the browser's initial font size. With @media (min-width: 48em), the desktop layout starts at 768px by default but at 960px for a user with a 20px default. That can be helpful: enlarged text gets the single-column layout sooner instead of being squeezed into narrow columns. Whichever you choose, keep it consistent across the project.
What This Means Practically
For anything you want to scale predictably and uniformly with a user's accessibility preference — body text, headings, page-level spacing — rem gives a much more reliable result. Reserve em for cases where parent-relative scaling is actually what you want, like an icon that should track its own specific button's size regardless of what the rest of the page is doing. Our explainer on what em is in CSS covers those component-level uses.
See the full breakdown in our REM vs EM comparison, or convert specific values with our PX to REM converter.
Accessibility Requirements to Keep in Mind
The Web Content Accessibility Guidelines (WCAG) include two success criteria that relate directly to this topic:
- 1.4.4 Resize Text — text should be resizable up to 200% without loss of content or functionality.
- 1.4.10 Reflow — content should work at a width equivalent to 320 CSS pixels without two-dimensional scrolling, which is what a 1280px window looks like at 400% zoom.
Rem-based typography, flexible containers and no fixed heights on text boxes make both much easier to meet.
A Quick Testing Checklist
- Zoom to 200% and check that nothing overlaps or gets cut off.
- Reset zoom, then set the browser's default font size to its largest common option and reload.
- Look for text that did not grow — it is still set in px or sits inside a px-sized ancestor.
- Check buttons, badges and navigation for clipped labels caused by fixed
heightvalues. - Narrow the window to about 320px and confirm the page still reads in one direction.
For more pitfalls like these, see our list of common CSS unit mistakes.
Frequently Asked Questions
Does browser zoom change the value of 1rem?
No. 1rem still computes to 16px in CSS terms at any zoom level; zoom changes how large each CSS pixel is drawn. That is why getComputedStyle reports the same values at 100% and 200% zoom.
Do mobile browsers have a default font-size setting?
Many do, through browser settings or the operating system's text-size option, but support and behaviour vary between browsers and platforms. Relative units give your layout the best chance of responding correctly wherever such a setting exists.
Is it enough to test with zoom only?
No. Zoom scales px values too, so it hides any text still set in px. Always test a changed default font size as well.
Why does my layout switch to mobile view when I zoom in?
Because zoom reduces the viewport width measured in CSS pixels. At 200% zoom a 1280px window is 640 CSS pixels wide, so narrower breakpoints apply. This is expected and usually desirable.
Try It Yourself
Change your browser's default font size, then use the REM to PX converter with the new base to predict exactly what each rem value on your page will render at.