PX to REM: How to Convert (and When to Use Each One)

If you write CSS, sooner or later you ask the same question: should this be in pixels or rem? And how do I convert between them? The answer is simpler than it looks. This guide gives you the formula, a cheat sheet and clear rules for when to use each unit.

The formula: px to rem

rem = px ÷ root font size

Browsers set the root font size to 16px by default. So 1rem equals 16px. A heading that is 32px is 2rem. A padding of 24px is 1.5rem. If your site sets a different root size, divide by that number instead.

Don't want to do the maths? Use our free px to rem converter. It converts px, rem, em, pt and percent at once, and it can convert a whole block of CSS in one click.

Cheat sheet (16px base)

px	rem	px	rem
8	0.5	24	1.5
12	0.75	32	2
14	0.875	40	2.5
16	1	48	3
18	1.125	64	4
20	1.25	96	6

What is the difference between rem and em?

rem is always relative to the root font size, on the html element. It stays the same wherever you use it. em is relative to the font size of the element's parent. That sounds harmless, but it compounds. If a list sits inside a list and both use 1.2em, the inner text grows twice.

So the simple rule: use rem for most sizes, and use em only when you want something to scale with its own text, such as button padding.

Why rem is better than px for font sizes

Many people change the default text size in their browser because they find small text hard to read. Pixel sizes ignore that setting. Rem sizes follow it. Using rem means your site respects the reader's choice, which is also good for accessibility.

It also makes a design easy to scale. Change the root size, and everything built in rem changes with it.

When px is still the right choice

• Hairlines. A 1px border should stay 1px. It is the thinnest line a screen can draw.
• Box shadows and fine details that should not grow with text.
• Media query breakpoints are often written in em or rem now, but px is fine if you stay consistent.

A mistake to avoid

Don't set html { font-size: 16px; } in pixels. It overrides the user's browser setting. If you want to change the root size, use a percentage, like html { font-size: 100%; }.

You may also see the "62.5% trick", where the root is set to 62.5% so that 1rem equals 10px, which makes the maths easy. It works, but remember to set your body text back to 1.6rem. Our converter lets you choose a custom base for this.

Convert a whole file at once

Have a stylesheet full of pixel values? Open the CSS block tab in the px to rem converter, paste your CSS and copy the result. You can keep 1px values as they are.

A real example: converting a button

Here is a button written in pixels, and the same one in rem with a 16px root size:

/* before */
.btn { font-size: 18px; padding: 12px 24px; border-radius: 8px; border: 1px solid #ccc; }

/* after */
.btn { font-size: 1.125rem; padding: 0.75rem 1.5rem; border-radius: 0.5rem; border: 1px solid #ccc; }

Notice that the 1px border stays in pixels. That is on purpose.

Browser zoom and text size are two different things

This point confuses many people. When a visitor zooms in with Ctrl and +, the whole page grows, and pixel sizes grow too. So px does not break zoom. The difference only appears when someone changes the default font size in their browser settings. Rem follows that setting and px does not. If you want your site to work for people who set a larger default text size, rem is the right choice.

rem in Tailwind and other frameworks

Tailwind already uses rem. Its spacing unit is 0.25rem, so p-4 means 1rem and text-lg is 1.125rem. If you set a different root size, every Tailwind value moves with it. Bootstrap and most modern systems do the same. You only need to convert by hand when you move a design from a pixel-based file.

Moving a design from Figma to CSS

Figma shows sizes in pixels. A quick way to handle this:

1. Divide each size by 16 to get the rem value.
2. Round to a sensible number. 0.9375rem is fine, 0.94rem is easier to read.
3. Keep one-pixel lines in px.
4. Check the result with the browser's default size set to 16px, then try 20px to see how the design copes.

What about em for media queries?

Media queries written in em or rem respond to the user's text size, while px breakpoints do not. Both are valid. The most important thing is to use one unit across your whole stylesheet, so the breakpoints and the sizes agree with each other.

Frequently asked questions

How many px is 1rem?

16px in almost every browser, unless the user changed their font size.

Is rem better than px?

For font sizes and spacing, yes, because rem respects the user's text size. Use px for hairline borders.

How do I convert em to px?

Multiply the em value by the parent's font size. 1.5em in a 16px parent is 24px.

Handy next step: pick sizes that fit together with our type scale generator.