PX to REM Converter

Convert pixels to rem and em for scalable, accessible CSS. Set your root font size (16px by default) and convert in either direction — with a table of the values you'll reuse constantly.

How to use this calculator

Choose the direction — px to rem, or rem back to px.
Enter the value and confirm your root font size (16px unless you changed the html font-size).
Press Calculate. Use rem for most sizing; em when you want scaling relative to the local element.

Formula used

rem = px ÷ root font size · px = rem × root font size

1rem always equals the root (html) font size — 16px by default. em is the same arithmetic but relative to the nearest parent's font size, so ems compound when nested while rems don't.

Example calculation

Worked example

At a 16px root, 24px = 1.5rem (24 ÷ 16). Common values: 12px = 0.75rem, 16px = 1rem, 20px = 1.25rem, 32px = 2rem.

The accessibility win: if a user sets their browser font to 20px, every rem-based size scales up proportionally — pixel-based sizes don't.

Why rem beats px for accessibility

Fixed pixel sizes ignore the user's browser font-size preference — a real accessibility failure for anyone who enlarges text to read comfortably. Because rem scales with the root font size, a rem-based layout respects that setting automatically, growing gracefully instead of clipping or overlapping.

The rem-vs-em choice comes down to compounding: rem is always relative to the one root, keeping sizes predictable across a deep component tree; em is relative to its parent, which is powerful for self-scaling components (padding that grows with a button's own font size) but treacherous when nested, since the factors multiply.

Why use this calculator?

Build accessible, user-scalable typography instead of rigid pixels.
Convert design-tool pixel specs into rem for your stylesheet instantly.
Handle non-standard root sizes (some sites use 62.5% = 10px for easy math).

Frequently asked questions

What is 1rem in pixels?

1rem equals your root font size — 16px in every browser by default, so 1rem = 16px unless the html element's font-size has been changed. That single anchor is what makes rem predictable.

Should I use rem or em?

rem for most things — font sizes, margins, layout — because it stays tied to one root and won't compound unexpectedly. Reach for em when you want a value to scale with its own element's font size, like padding inside a button.

What's the 62.5% trick?

Setting html { font-size: 62.5% } makes 1rem = 10px, so 1.6rem = 16px and the mental math becomes trivial (just divide px by 10). It's a popular convenience, though it can surprise teammates who expect the 16px default.