How to Convert Pixels to rem in CSS (Simple Guide)

Have you ever built a gorgeous, pixel-perfect website, only to realize it looks completely broken the second a user bumps up their browser’s default font size? Yeah, me too. That’s usually the exact moment we developers learn the hard way that hardcoding pixels (px) for absolutely everything is a recipe for an accessibility nightmare.

Enter the rem unit.

If you’re used to strictly thinking in pixels, switching to rem can feel a bit like trying to learn a foreign language on the fly. But don’t worry—once the concept clicks, it actually makes your life as a developer so much easier.

Let’s break down how to convert px to rem without needing a math degree.

Why Are We Even Talking About Rem?

Think of pixels like an absolute measurement. Imagine building a house and telling your contractor, “Make this window exactly 40 inches wide.” That window is going to be 40 inches wide no matter what happens to the rest of the house. That’s a pixel.

Now, think of rem as a relative measurement. Instead of using fixed inches, you tell the contractor, “Make this window exactly 3 times the width of our standard foundation bricks.” If you decide to use bigger bricks later on, the window automatically scales up proportionally.

In CSS, rem stands for “root em.” It simply means “relative to the root HTML element’s font size.” Because users can (and do) go into their browser settings to change their default font size for readability, using rem means your entire website will seamlessly scale to match their preferences. Your layout won’t break, and your text will stay perfectly readable. Win-win.

The Standard Math: How to Convert

Here’s the golden rule you need to memorize: By default, almost every modern web browser sets its root font size to 16px.

This means, unless you specifically override it in your CSS, 1rem equals 16px.

To convert any pixel value you have in your head into a rem value, you just use this basic formula:

Target Pixel Value ÷ Base Pixel Value (16) = rem Value

Let’s say you’re looking at a Figma design, and you need a heading to be 24px. You just divide 24 by 16.

24 ÷ 16 = 1.5
So, in your CSS, you write: font-size: 1.5rem;

Need a smaller caption that’s 14px?

14 ÷ 16 = 0.875
So, you write: font-size: 0.875rem;

Look, I get it. Doing division in your head while you’re deep in the coding zone is a total buzzkill. If you’d rather skip the mental gymnastics entirely, I highly recommend keeping a tool like this Pixel to Rem Converter open in a tab. You just punch in your pixels, and it does the heavy lifting for you instantly.

The “62.5% Trick” (Making the Math Stupidly Easy)

Now, if you don’t want to use a calculator for every single line of CSS, developers came up with a clever little hack called the 62.5% Trick.

Here’s how it works. You set the root html font size to 62.5% at the very top of your stylesheet:

html {
  font-size: 62.5%;
}

Why 62.5%? Because 62.5% of the default 16px is exactly 10px.

By doing this, you’ve essentially redefined your “standard foundation brick” to be exactly 10px. Suddenly, the math becomes ridiculously simple. Instead of dividing by 16, you just divide by 10 (which just means moving the decimal point one spot to the left).

Want 24px? Just write 2.4rem.
Want 14px? Just write 1.4rem.
Want 36px? Just write 3.6rem.

It feels like magic. Just keep in mind that if you are jumping into an existing project where the root font size was left alone, you’ll still need to rely on the standard divide-by-16 math.

The Ultimate px to rem Cheat Sheet

Whether you are dividing by 16 manually or just need a quick reference guide to keep on your second monitor, here is a cheat sheet for the most common font sizes (assuming the standard default browser size of 16px):

What You Want (px)	What You Write (rem)	The Math Used
10px	`0.625rem`	10 ÷ 16
12px	`0.75rem`	12 ÷ 16
14px	`0.875rem`	14 ÷ 16
16px	`1rem`	16 ÷ 16 (Base Size)
18px	`1.125rem`	18 ÷ 16
20px	`1.25rem`	20 ÷ 16
24px	`1.5rem`	24 ÷ 16
32px	`2rem`	32 ÷ 16
36px	`2.25rem`	36 ÷ 16
48px	`3rem`	48 ÷ 16
64px	`4rem`	64 ÷ 16

One Final Tip Before You Go

You don’t have to use rem for literally everything. It’s fantastic for font sizes, margins, padding, and layout widths. However, for tiny decorative things like a thin 1px border (border: 1px solid black), it’s totally fine—and usually preferred—to just stick with standard pixels!

Go forth and code responsibly. Your users (and their eyesight) will thank you.