Martin Hähnel

CSS (not only) Font Sizing Using the rem Unit

Just a quick note, since I knew about the general idea, but never looked into it more:

The difference between rem units and em units is that em units are relative to the font size of their own element, not the root element. As such they can cascade and cause unexpected results. — Rem in CSS: Understanding and Using rem Units

rem units are nice, because the are always relative to the font size of the root element, which makes them consistent (and accessible) no matter the Zoom, etc. that the use may have chosen.

As long as you always use rems in your CSS, everything will scale according to the root elements font-size property. This can be used for more than "just" the font-size on individual elements and there are moments in complex layouts where scaling everything off of the :root's font-size is too simple an approach, but it's a good starting assumption.

So how does it work in practice?[1]

html {
    font-size: 62.5%; /* 0.1rem = 1px, 1rem = 10px, 1.4rem = 14px, etc. */
}

body {
	font-size: 1.6rem; /* 1.6rem = 16px */
}

So this would set any child element of the body to have an initial font size of 1.6rem which equates to 16px in modern browsers - which is standard regardless - but using the 62.5% trick as it is called makes calculations much easier since it sets the initial font-size to 10px in all modern browsers which means 0.1rem = 1px. So in this way you can have your cake and eat it too: Preserve the default font-size of 16px (so you won't need to set it on all elements) but you also need to do less (hard) maths.

That quoted overview article links to the OG of this approach and a couple of others that were interesting, too:

I am not at all a frontend person, although I have been more interested recently to go back to basics in this regard and so I found searching css-tricks for rem and skimming those articles to refresh my memory very helpful.

One last thing: If you're not rolling your own CSS you may not want to use the 62.5% trick. From the article I linked that explains that trick:

We saw that this math trick doesn’t fundamentally change font size scaling and is still accessible. But just because you can do something doesn’t mean that you should.

In fact, there’s one major drawback to using this approach that we haven’t talked about yet: It makes it much harder to integrate with libraries that don’t use this technique. For example, if your CSS has a root font size of 62.5%, and you import a library component that was styled under the assumption that 1rem = 16px, then the computed values are going to be way off.

So while the 62.5% trick can be useful, I don’t recommend using it unless you know you’re never going to need to import other UI component libraries (or that other teams won’t need to import your components into their code). Alternatively, you could opt to use an unstyled UI library and apply the styling yourself. — The 62.5% Font Size Trick - Should You Use This Technique?

So if you're planning to use Tailwind or Bootstrap or whatever this is not applicable, but in that case you would use their relative sizing utilities anyways.

  1. Not going to put here a full example, at least not yet... ↩︎

  2. Although, as I said, setting the font-size on the body to 1.6rem seems to make his point moot. ↩︎