I remember seeing a website that had <html style="font-size: XXX%"> for the top-level element, and had JS that would dynamically recalculate that percentage on every resize event to keep the visual font size almost (exactly) constant. Made me think for a moment that my mouse wheel broke.

One of my pet peeves in the modern web is when someone displays an image and scales it to exactly the size of your screen, but I want to look more closely at a part of the image so I do a scrollwheel zoom, only for the image to actually shrink as every UI element except the thing I want gets bigger. And then you go "ok, right click on the image and do the "Open Image in new tab" thing and somehow the site defeats that and puts all of their UI crap in the new tab as well.

The modern version is to use @media to achieve the same annoying effect without js. Fortunately, there's a finite number of rules so I've found that if you zoom far enough the text does actually start getting larger. Though I expect that someone's already figured out how to use CSS Math to keep text tiny at all zoom levels.

>The modern version is to use @media to achieve the same annoying effect without js.

I think that is the up until about 2020 way, the modern way is using clamp to do it

https://css-tricks.com/linearly-scale-font-size-with-css-cla...