Should I change the default HTML font-size to 62.5%?

There's a lot of conflicting advice and strong opinions out there about this one! My simple answer is: "No, you should never reduce the base HTML font-size". But let's go through the pros and cons together so you can make up your own mind.

Background: What and why?

By default, browsers set the HTML font size to 16px. That means 1rem (root element font-size) equates to 16px in browsers by default.

Users can change this default in their browser or OS settings, so this isn't strictly true all the time, but we'll come back to that later. For now, lets focus on 1rem === 16px.

Historically, the rem unit didn't exist. Its introduction unlocked a whole new world for accessibility (a11y) and for responsive design, because suddenly font-size could SCALE — It could grow and shrink depending on all sorts like zoom and personal preferences. Hallelujah!

But developers then encountered a problem. They (we) want to build everything to be responsive, right? So we want to use rem units, right? But designs always show everything in pixels 🤔…

Were you taught the 16-times table in maths class at school?! Me neither. You can understand why we FEDs did not particularly relish translating pixel-based designs into rem values.

I wish 1rem could equal a round number! Like 10. If 1rem was 10px, all my problems would be solved!

That's when lots of people started recommending this:

html {
  font-size: 62.5%;
}

Thanks to that small CSS snippet — hereafter referred to as the rem-font-hack — 1rem can now equal 10px. The maths is easy again! A design says 16px? I know that would be 1.6rem.

Developers are happy again, having made their own lives easier and unleashing a whole new accessibility nightmare for users (and possibly their future selves and colleagues) in the process.

Benefits (pros)

1. When 1rem equals 10px, converting pixel units from design files into rems becomes (pretty) easy to do in your head.

That's it, the only benefit. And it's 100% a benefit for you, not for site users.

You could argue this means it helps you write CSS a teeny bit faster, but as you progress you'll almost certainly have better options like Scss (Once using tooling that can do the maths for you anyway, then the rem-font-hack may actually SLOW you down!)

Negatives (cons)

The negatives affect site users AND developers.

1. Potentially huge accessibility problems for anyone who changes their default font size
2. Changing defaults is unexpected, so can confuse other developers (or even yourself in the future)
3. Hard to maintain and even harder to remove later on
4. Conflicts with third-party code
5. Many engineering teams will look negatively on job applicants who use this in their code, because they are aware of the issues it can cause.

⚠️ Some sites go beyond the 62.5% rem-font-hack and resize the root font size to different values at different screen sizes. Some developers probably thought it was a nice easy way to build in responsiveness. I plead with you to please never do this!. You'll create a nightmare for every developer who works on that site in future, as well as for users.

An A11y disaster (with demo)

Changing the default font size on a site can make that site unusable for those with a vision impairment.

Allow me to show you what happens by changing the default font size on this site and then adding in the rem-font-hack...

Can you see the glaring difference there? You may not think that's a big deal (I've used the biggest font size increase to make it super obvious), but for some people, that's the difference between inclusion and exclusion.

Beware the body resize "fix"

You may think you can fix everything by 'upscaling' the body font size back to 1.6rem.

That definitely helps. It mitigates a lot of the problems... but not all of them!

1. Not all font-sizes inherit. Think of form elements, for example.
2. You still keep all of problems 2-5 listed above

Alternative ways to work with REM

1. Of course there is manual math! Do you need an alternative? You can set up variables once at the start of a project and then leave the values alone.
2. As I mentioned earlier, modern methods like clamp() min() and max() functions mean everything is less static than it once was. Plus we even have new units now like container units! So you may not need to use rem as much.
3. Check out Utopia to generate fluid variables for you
4. The surprisingly powerful calc function can do all you need. For example: calc((32 / 16) * 1rem)
5. My favourite approach — Use a scss function! (Just like the one I use on this site)

@use 'sass:math';

/// Converts PX to REM
/// @access public
/// @param {string} $size - Value to be converted in PX.
/// @returns {string} - Returns REM string.
/// @example font-size: rem(24px);
/// @returns font-size: 1.5rem;
@function rem($size) {
  $remSize: math.div($size, 16px);
  @return #{$remSize}rem;
}

Using something like this Sass function makes it extremely easy to work with rem when you need to.

In conclusion

It doesn't matter what tutorials have taught you, or if you see others using the rem-font-hack. My years of experience have taught me that we should work with system defaults, not fight against them.

I hope you agree of course and break the habit ASAP if you're using the rem-font-hack in your sites.

But if I've not convinced you, that's OK too. It's your choice. Just be aware of all those negatives, and make sure you combat them wherever possible.

My goal here is simply to make sure you fully consider the implications of every engineering choice you make.