DEV Community

Anzelika
Anzelika

Posted on

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
}
Enter fullscreen mode Exit fullscreen mode

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%
}
Enter fullscreen mode Exit fullscreen mode

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

.btn {
    font-size: 1.6rem;
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

Collapse
 
xogojiox profile image
Richard Sanders

I'm currently going through a web development bootcamp and I'm hyper focused on achieving a career change into Web Development. Your story has inspired me and seeing posts like this is awesome. Thank you for all you are doing and keep it up!