How to easily use REM units for font sizes without having to change your base font size

Date: 20 October 2023

You’ve probably read loads of articles about whether to use px, em or rem for font sizes when developing a website, and you might be lost about which is the best approach to take, like I was.

Now, I’m still not sure of the best way, but the approach I’ve started using when developing a website from scratch is to use rems. Before I explain the solution I now use, let me quickly explain the difference between the three units.

What’s the difference between px, em and rem?

• Pixels are the little dots on your screen that make up what you see. 1px is one of these dots.*
• Em is a relative unit. The value is a ratio of the element’s parent’s font size. For example, if an element has a font size of 2.5em and the parent’s font size is 16px, the element’s font size would be equal to 40px. However, ems are inherited, so the deeper an element is in the HTML, the harder it becomes to calculate the em value required.
• Rem is similar to em, but is based on the root font size. For example, if the root HTML element has a font size of 16px, an element has a value of 2.5rem and a parent with a font size of 20px, the font size of the element will be 40px as it is based on the root and not the parent.

* This isn’t entirely true, as more modern devices have different “pixel grids” to what they used to have. This subject is a bit more complicated than this article, but pixels are the closest unit to the device screen as you’ll get.

Why is this a problem?

While pixels are the most commonly used unit for font sizes, and are the most close to what the device renders, there is potential for accessibility issues when using them. If a user changes their default font size, it will change the font size of your root element in your HTML. However, if you have used pixel font sizes to set how large certain pieces of text should be, then this won’t change size when the user changes their default font size.

This is where relative units like em and rem come in because when the default font size changes, the fonts will change size relative to this value.

What is my solution?

I have decided to use rem values on new websites, but I have tried to make it as simple as possible to use.

The reason for this is that on any web page, you might have lots of different font sizes and calculating and remembering the rem value that you want isn’t easy.

For this reason I have decided to create CSS variables which I can use throughout the website without having to remember any rem values. If you don’t know about CSS variables, you can read about them over on the MDN Web Docs.

Here is my CSS that I use for font sizes, based on a root font size of 16px. I have created variables for every size between 14px and 40px. I probably won’t use all of these, but as a base, it covers all my options. If you need to calculate any extra values, you can use this calculator to help. It allows you to set the base font size too, if you aren’t using a base of 16px like I am.

:root {
    --font-14px: 0.875rem;
    --font-15px: 0.9375rem;
    --font-16px: 1rem;
    --font-17px: 1.0625rem;
    --font-18px: 1.125rem;
    --font-19px: 1.1875rem;
    --font-20px: 1.25rem;
    --font-21px: 1.3125rem;
    --font-22px: 1.375rem;
    --font-23px: 1.438rem;
    --font-24px: 1.5rem;
    --font-25px: 1.563rem;
    --font-26px: 1.625rem;
    --font-27px: 1.688rem;
    --font-28px: 1.75rem;
    --font-29px: 1.813rem;
    --font-30px: 1.875rem;
    --font-31px: 1.938rem;
    --font-32px: 2rem;
    --font-33px: 2.063rem;
    --font-34px: 2.125rem;
    --font-35px: 2.188rem;
    --font-36px: 2.25rem;
    --font-37px: 2.313rem;
    --font-38px: 2.375rem;
    --font-39px: 2.438rem;
    --font-40px: 2.5rem;
}

h1 {
    font-size: var(--font-40px); 
}
h2 {
    font-size: var(--font-32px); 
}
p {
    font-size: var(--font-18px); 
}
li {
    font-size: var(--font-14px); 
}

I hope this article helps you to start using relative font sizes on your website. Like I mentioned at the beginning of the article, this might not be the best solution, but I have found it to be the easiest solution for me to implement on our websites. If you have any questions, or are looking at starting a digital project, get in touch with us here at hello@wonderagency.co.uk and we’d be pleased to help.