PX to REM

Type a pixel value to see it in rem, or a rem value to see it in pixels — both fields stay linked. The root font size defaults to the browser standard of 16 px but is fully configurable for projects that change the html font-size.

Below the converter, a reference table lists common spacing and type sizes (4 px through 64 px) in rem at your chosen root, handy while translating a pixel-based design into rem-based CSS.

Common uses

• Convert a designer's pixel spec into rem units
• Check what 1.25rem means in pixels on a 10 px root
• Keep a rem cheat sheet open while writing CSS

Example

24 px at a 16 px root

1.5 rem

How many pixels is 1rem?

16 pixels by default, because every major browser ships a 16 px root font size. If a stylesheet changes the html element's font-size, 1rem equals that value instead — which is why this converter lets you set the root.

How do I convert px to rem manually?

Divide the pixel value by the root font size: 24 px ÷ 16 = 1.5rem. Going the other way, multiply — 1.25rem × 16 = 20 px.

Why use rem instead of px in CSS?

Rem values scale with the user's browser font-size setting, so people who raise their default text size see your layout grow proportionally. Pixel values ignore that preference, which hurts accessibility for font sizes in particular.

What is the 62.5% font-size trick?

Setting html { font-size: 62.5% } makes the root 10 px (62.5% of 16), so 1rem = 10 px and mental conversion becomes trivial — 1.6rem is 16 px. Set the root field to 10 here to work in that convention.

Do the values I type leave my browser?

No. The conversion runs locally in JavaScript with no network requests, so your inputs are never sent or stored anywhere.