How Browsers Calculate rem Units

Let’s be real for a second: sizing things in CSS used to be a massive headache. You’d build a beautiful website on your laptop, but the second someone looked at it on a phone or zoomed in, the whole layout would break.

Enter the rem unit. If you’ve been dabbling in web design, you’ve probably seen it everywhere. But what exactly is a rem, and more importantly, how the heck does your browser figure out what size it actually means on the screen?

Don’t worry, there’s no advanced calculus involved here. Grab your coffee, and let’s break down how browsers calculate rem units using some easy, real-world examples.

What Does REM Even Stand For?

rem stands for “root em.”

If you want to dive deeper into the history of typographical measurements, Wikipedia has a fascinating breakdown of the em unit and its physical roots in old-school printing presses

But for modern web design, all you really need to understand is the “root” part.

Picture a tree. The root is the base that feeds the rest of the tree. In an HTML document, the root is the <html> tag. So, a rem unit simply looks at the font size of the <html> tag (the root) and uses that as its baseline.

The “Master Recipe” Analogy

Think of rem like scaling a master recipe in the kitchen.

Let’s say your grandmother’s master recipe makes exactly 16 chocolate chip cookies.

If you want to double the batch, you multiply the recipe by 2. You get 32 cookies.
If you only want half a batch, you multiply it by 0.5. You get 8 cookies.

rem units work exactly the same way. The browser’s default root font size is usually 16px (our master recipe).

So, when you write 2rem in your CSS, the browser does a quick bit of math:
16px (base) × 2 (rem value) = 32px.

It really is that simple!

Let’s Look at Some Easy Examples

Let’s assume your website is using the standard browser default font size of 16px for the root. Here is how the browser translates your rem CSS into pixels:

Paragraph Text (1rem): 16px × 1 = 16px
A Large Heading (2.5rem): 16px × 2.5 = 40px
Small Footer Text (0.875rem): 16px × 0.875 = 14px

But what happens if you change the root size?

Let’s say you decide 16px is too small, so you write this in your CSS:

html {
  font-size: 20px;
}

Instantly, the browser updates its math for the entire website. It swapped out the master recipe. Now, those same rem values equal something completely different:

1rem is now 20px (20 × 1)
2.5rem is now 50px (20 × 2.5)
0.875rem is now 17.5px (20 × 0.875)

By changing just one line of code, your entire website scales up perfectly. Magic, right?

REM vs EM: The Russian Nesting Doll Problem

You might be wondering, “Why not just use em?”

While rem looks at the root element, regular em units look at the font size of their parent element. This sounds fine until you start nesting things inside each other, like a list inside a <div> inside another <div>.

Using em units is like playing with Russian nesting dolls. If a parent is 1.2em, and the child is 1.2em, and the grandchild is 1.2em, the browser multiplies them all together (1.2 × 1.2 × 1.2). Suddenly, your text is massive, and you have no idea why!

Because rem always looks back to the single root element, you never get this compounding snowball effect. It’s predictable, safe, and saves you from pulling your hair out.

Why Browsers (and Users) Love REM

You might be thinking, “If 1rem is just 16px, why don’t I just type 16px and save myself the math?”

The answer is accessibility.

Not everyone has perfect vision. Many people go into their browser settings and change their default font size from 16px to 20px or even 24px so they can read comfortably.

If you built your site using strictly px, your text is stubbornly locked in place. The user’s settings are ignored, and they can’t read your content.
If you built your site using rem, the browser says, “Ah! The user changed their root size to 24px!” It recalculates your rem values based on that new 24px baseline, and your whole site scales beautifully to accommodate them.

Your Quick REM Cheat Sheet

To save you from doing math every time you write CSS, here is a handy cheat sheet based on the standard 16px default. Feel free to bookmark this!

The Browser’s Math	What you write (in `rem`)	What you want (in pixels)
`16 × 0.75`	0.75rem	12px
16 × 0.875	0.875rem	14px
16 × 1	`1rem` (Base)	16px
16 × 1.125	1.125rem	18px
16 × 1.25	1.25rem	20px
16 × 1.5	1.5rem	24px
16 × 2	2rem	32px
16 × 3	3rem	48px
16 × 4	4rem	64px

(Pro tip: If you are calculating this yourself, just take your target pixel size and divide it by 16. For example: 24px ÷ 16 = 1.5rem).

If you’d rather skip the math entirely and save some time, you can always use our free rem to pixel converter to calculate the exact sizes instantly!

Wrapping Up

And there you have it! Browsers calculate rem units simply by multiplying your rem value by the root font size. It’s just a scalable recipe that keeps your code clean, prevents sizing nightmares, and makes the web a much friendlier place for everyone trying to read your content.

Do you have any specific elements on your site where you’re struggling to transition from px to rem? Let me know, and we can tackle the math together!