Skip to main content

Home  /  Unit Converters  /  Pixel to REM/EM Converter

Pixel to REM/EM Converter

Convert px to rem and em for CSS, with adjustable root and parent font sizes — because rem and em don't depend on the same thing.

⚡ Instant results 🎯 Adjustable root size 🆓 100% free, no sign-up

REM is always relative to the root (<html>) font size. EM is relative to the current element's own font size — which can be different everywhere it's used. Adjust the parent size above to see how the EM result changes independently of REM.

Converted to every unit:
Pixels (px)
0
REM (rem)
0
EM (em)
0
📌 Quick Reference — At the Default 16px Root
16px1rem
18px1.125rem
20px1.25rem
24px1.5rem
32px2rem
40px2.5rem

Instant & live

Every unit updates as you type — no "Convert" button, no waiting.

REM and EM kept separate

Independent root and parent font-size inputs, since they're not the same thing.

Private by design

Runs entirely in your browser. Nothing is ever uploaded or logged.

Convert PX to REM and EM Online

At the default 16px root font size, 16px equals 1rem. CurePDF's converter calculates rem and em from a pixel value (or converts back the other way), using whatever root and parent font size you specify — since not every site uses the browser default.

How PX to REM Conversion Works

rem = px / root font size

Worked examples (16px root): 16px / 16 = 1rem. 20px / 16 = 1.25rem. 24px / 16 = 1.5rem.

REM vs. EM: Not the Same Thing

REM is always relative to the root <html> element's font size — one single value for the whole page. EM is relative to the current element's own font size, which can be different at every level of nested content. That means the same pixel value can convert to a different EM value depending on where it's used, while it always converts to the same REM value.

em = px / current element's font size  ·  rem = px / root element's font size (constant across the page)

Why Use REM Instead of Pixels in CSS?

REM values scale automatically when a user changes their browser's base font size in accessibility settings, while fixed pixel values don't. That makes rem a more accessible default for text sizing, with em reserved for cases where a size genuinely should scale with its parent (like padding that should grow with a button's font size).

Frequently Asked Questions

What is 16px in rem?

At the default 16px root font size, 16px equals 1rem. The formula is rem = px / root font size.

Is REM the same as EM?

No. REM is always relative to the root (html) element's font size. EM is relative to the current element's own font size, which can be different at every level of nested content -- so the same pixel value can convert to a different EM value depending on where it's used.

Why use REM instead of pixels in CSS?

REM values scale automatically when a user changes their browser's base font size (for accessibility), while fixed pixel values don't -- making REM a more accessible unit for text sizing.

What is the default root font size?

16px, in every major browser's default settings. This converter uses 16px as the default but lets you change it to match a site's actual CSS.

Related Converters