User-friendly way to set your CSS font size

Today I learned that from the perspective of accessibility, it's bad practice to hardcode a root font size in your application in pixels 🙈

html {
font-size: 10px
}

Why? Some users may have increased the default font size in their browser settings to help with the legibility. By hardcoding the root font size in your CSS with pixels, the web browser won't have an effect on your site and the user may end up struggling or resorting to manual zoom. And that's just bad UX.

So, how to solve the situation when you want your app's root font size to differ from the default 16px?

We need to tell our CSS to calculate it as a percentage from the default. If 16px is 100% then 10px is 62.5%.

html {
font-size: 62.5%
}

With this set-up, you can now set up the rest of your app's elements with rem:

.btn {
    font-size: 1.6rem;
}

Everyone wins!

• Your app has its custom settings
• Your app also listens to default browser settings and takes the user's chosen font size as the new root font size to make calculations from

💻 Information from Jonas Schmedtmann's Advanced CSS course