Zooming in browsers is an accessibility feature. I’d say that any attempt to fight against it is bad form. Don’t do it. Leave it be.
I have seen compelling examples of ways to code that work with browser zoom that help make a site look nicer when high levels of zoom are applied. But they don’t fight against it.
You might say: but I zoomed my site in to 500% and it looks bad! It might, it’s true. But that’s just, like, your opinion, man. Zoom works consistently. People that use it know what it does. They know what to expect. They aren’t you, they might have a different approach an expectation than you do.
I wanted to write all that before I share this snippet. This is a variation of what someone sent me the other day as a way to size type that scales with the window:
html {
--size-factor: (0.00188323 * 100vw);
font-size: calc(12 * var(--size-factor));
}Code language: CSS (css)Their version was a bit more exotic, incorporating different scaling numbers for pages in landscape vs. portrait and such. This has the effect of “fluid type” on a website, the bigger the window, the bigger the type, and vice versa. The magic number you see above there is essentially so that that you can multiply against it with reasonable numbers that maybe feel something close to pixel (px) numbers, 12px in this case. In that way, it’s a lot like the font-size: 62.5%; thing we used to see a lot such that the math works out that 1.2rem would be 12px (you can do it in your head easier). I’d suggest scrapping that thinking. Don’t think about font sizing in pixels at all — it isn’t useful.
What is ultimately going on here though is that the font-size is being set in viewpoint units only. This is what “fights” the browser zoom. I could have done html { font-size: 3vw; } and the effect would have been basically the same.
Bad news bears.
The advice: any time you are setting a font-size, it cannot only be viewport units. It has to factor in some other kind of unit. Heck, even px works to maintain some scaling. Even this freaks me out a little bit because it affects that rate of scaling and if you speed that up or slow that down too much, that’s also messing up with the natural exceptions of how zoom works.
The best approach that I know of is to use clamp() so that font-size can’t get too big or too small based on window size alone, then include a rem value (that’s somewhere in the vicinity of 1) in the calculation such that zooming still works normally.
See the Fluid Type Scale website for easy to generate snippets.
And this goes for using container units too!
