How to salvage an `html { font-size: 62.5%; }` situation, so that when I add new text elements to the page they aren't so tiny by default?

Question

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:

• increase the default font-size on my page to something more accessible?

without having to:

• manually rework all existing rem/em lengths through a large corpus of LESS styling rules?

Answer 1

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 !

Answer 2

If you set it like so while designing (for the sake of easy pixel-to-rem conversion):

html {
  /* 62.5% of 16px browser font size is 10px */
  font-size: 62.5%;
}

/* you should add... */
body {font-size: 1.6em;}
  
/* ...OR this also works (better for very old browsers): */
body {font-size: 160%;} 

You’ll have:

1. An easy way to convert pixels to rem. (Just divide the amount of pixels you need by 10—that's your rem size!)
2. A legible basic font-size of 16px, because everything you can see on a website falls between the body tags anyway.
3. Because body is a direct child of html, you can use em instead of rem; and
4. For everything else you'd like to use rem for, you can. Because if "everything else" is not a direct child, it’s always at least a descendant of html and/or body. Both children and descendants can use rem for sizing.

So you need not change “everything” in the CSS. Just add body {font-size: 1.6 rem} to get a legible font for your readers, and keep your other rem-styled elements as-is, because they still use the rem based on the 62.5% and therefore won’t change.

All this, provided I am not missing a point somewhere.