We have an issue with a site that's been in development for nearly ten years: the default font-size on most new elements is too small for some of the stakeholders to read, comfortably.
That's odd, you might say! Isn't the default font-size: 16px a pretty reasonable size? Can't I just increase the root/body font-size to some reasonable default?
Ay, there's the rub!
Unfortunately this site started off following a fad of setting the root font size to 10 (!) pixels and making not just text but also element/box sizes all relative to that measure! (See CSS 62.5% why do developers use it? or https://benfrain.com/just-use-pixels/ for some retrospective.) So I guess hindsight is 20/20 — now if I simply change the "default" (root) font size, about 89% of my layout will grow with it. Imagine if all your Lego mini-figures suddenly grew to the size of Fisher-Price people… except for a random arm/leg over here that had a fixed size, or the scaling of an eyebrow that was relative to something else over there!
Is there any sort of "escape hatch" — out-of-the box CSS cleverness or some LESS compiler trick — that might let me:
font-size on my page to something more accessible?without having to:
rem/em lengths through a large corpus of LESS styling rules?I might be being a bit thick here but can't you just fall back to good old "search and replace".
Get a list of sizes used in your project, a quick search for "\d{1,3}\.?\d{0,5}rem" should cover most cases and then just filter the list. (1-3 digits, optional decimal full stop, optional 1-5 digits and then REM).
Search for any sizes in REM first, turning "1.6rem" to "1rem" and "2.4rem" to "1.5rem" etc.
Now you can probably see an issue here, you can't do it in one pass as you would obviously end up with a scenario where you change one value and it then collides in a further search and replace (you change a value from 3.2rem to 2rem and then do a pass to change all the 2rem sizes and inadvertently change larger items as well).
Instead I would set the values 100 times larger than they need to be on the first pass and then reduce them all by 100 after. (so 3.2rem would go to 200rem on the first pass, then 200rem to 2rem on the second pass, obviously if anywhere you do use 100+rem then change this to 2000rem etc.)
Then once you have done all of that just change the root font size from 62.5% to 100%.
That should catch about 95% of issues as if someone is then using em units the base units it is working from should end up the same size.
With this approach I can't see you having to do more than 50 search and replaces across even a gigantic application that uses REM for div sizing etc.
I can't think of any "gotchyas" with this approach, but I am sure there will be some so back up before you do it obviously 😋!