Why I Change the Font Size to 62.5% in Every Project

Small development trick that will help you to simplify your calculations.

Context

When I first started coding in CSS, I didn’t really pay attention to other sizing options such as rem, vw, vh, etc. I only stuck to the traditional pixel values and sometimes would use percentages to set like the width of a div to 100%.

But then, when I started to learn and use CSS more professionally, I started to look into rems and ems. A good source to learn more in-depth about them would be this awesome video by Kevin Powell.

The Problem

However, when you start using rems, it becomes hard to calculate every time how many pixels it would be or vice versa. Like you’d get a design that uses pixels, but you want to use rems.

If you’re using something like Tailwind CSS (learn more), you don’t really need to worry about calculations that much. You can just do it once, put it in the config file and forget about calculating them every time you need to use it.

On the other hand, if you’re using just CSS, SCSS, styled components, or basically anything that doesn’t do the calculations for you. You may need to use specific sizes, and every time you’d have to convert it from rems to px or vice versa.

Some people say you get used to it, but why worry about an extra thing when you can easily fix this by writing a couple of lines of CSS?

The Solution

So the solution to avoiding calculations is by adding the following lines to your CSS reset file.

html {
  font-size: 62.5%;
}

Why 62.5% you ask? Because 100% / 16px *10=62.5%

Ok now let’s break this down, shall we?

We divide 100 by 16 because 16px is the browser’s default font size, so that gives us 6.25, then we multiply that by 10, so when we try to convert from rem to px we can easily calculate it in our minds.

For example, with this setting the calculation would be something like this:

• 1.6rem = 16px
• 2rem = 20px
• 0.4rem = 4px
• 10rem = 100px

You get the point, take whatever number you have in your mind, let’s say 24px you divide it by 10 and you get your desired result in rem, which in this case will be 2.4rem.

But wait a minute, we’re not done yet. When changing the font-size in html we also overwrite users’ preferences, which is very bad, because it can mess with users’ accessibility settings.

A user may have their font-size set to 22px in their browser, and we as a developer have to respect their choice. But don’t you worry there is a solution for this as well.

So when setting font-size: 62.5% in html, you also should reset the font-size in body, like so:

html {
   font-size: 62.5%;
}

body {
   font-size: 1.6rem;
   // ...
   // the rest of your resets
   //...
}

This solves the issue that technically was created by us. By resetting font-size: 1.6rem, we’re saying that everything should go back to the browser's default settings.

We don’t scale down font-size in html to change the root font size, we do it because that number helps us to convert rem to px and another way around, more easily.

Yet if we don’t change it back to 1.6rem in body, it means that we just scaled down the root size and pretty much messed up users’ preferences without even them knowing about it.

If you’re more concerned about accessibility stuff you can check out Aleksandr Hovhannisyan’s article, he goes more in-depth about accessibility.

In Conclusion

You might’ve seen this trick somewhere or you have been using it for a while yourself, but it never crossed your mind that this can mess up someone’s preferences.

Honestly, I neither, until one day a friend of mine opened one of my projects and realized that the font size that he had put in the settings doesn’t work anymore.

And only then do I have to research and find a solution that was provided by Aleksandr, and that’s where the inspiration for this article came from. I just want more people to know how to use this cool trick without any pitfalls.

If this was helpful. consider sharing it, and don’t forget to follow me, so you don’t miss out on my future articles.

Further Reading

Let’s Connect

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Check out our Community Discord and join our Talent Collective.