pxtoremcalc.com PX to REM Calculator

16 px = 1 rem at 16px base

Settings

Controls how many digits after the dot can be typed and shown in the live conversion result.

Conversion Table

Popular px to rem conversions at your selected base font size.

Pixels (px) REM (rem)
1 px 0.0625 rem
2 px 0.125 rem
3 px 0.1875 rem
4 px 0.25 rem
5 px 0.3125 rem
6 px 0.375 rem
8 px 0.5 rem
10 px 0.625 rem
12 px 0.75 rem
14 px 0.875 rem
15 px 0.9375 rem
16 px 1 rem
18 px 1.125 rem
20 px 1.25 rem
24 px 1.5 rem
25 px 1.5625 rem
28 px 1.75 rem
32 px 2 rem
36 px 2.25 rem
40 px 2.5 rem
44 px 2.75 rem
48 px 3 rem
50 px 3.125 rem
56 px 3.5 rem
64 px 4 rem
72 px 4.5 rem
75 px 4.6875 rem
80 px 5 rem
90 px 5.625 rem
100 px 6.25 rem

Shortcuts

Hot keys

Increase or decrease the focused value by 1.
Shift Increase or decrease the focused value by 10.
Alt Increase or decrease the focused value by 0.1.

PX to REM Converter

Convert any pixel value to rem in real time. Set your project's base font size and every result updates automatically — the browser default is 16px, so 16px equals 1rem.

How to Convert PX to REM

To convert px to rem, divide the pixel value by your root font size. With the standard 16px base: rem = px ÷ 16. Enter your value above and the calculator handles the math instantly. Swap the units to go from rem back to px.

Conversion Formula

The formula is rem = px / base font size. At 16px base: 16px = 1rem, 32px = 2rem, 8px = 0.5rem. To reverse: px = rem × base font size. So 1.5rem × 16 = 24px. Change the base font size setting to match your project.

Common PX to REM Values

At the 16px default: 10px = 0.625rem, 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem. The conversion table above shows a complete list.

Why Use REM Instead of PX

REM scales with the user's browser font size preference, making your layout more accessible. It also simplifies responsive design — change the root font size once and everything scales proportionally. Most design systems and CSS frameworks use rem as their base unit.

REM vs EM

REM is always relative to the root element, so it stays consistent across your stylesheet. EM compounds with nesting — an element inside another inherits and multiplies the parent's font size. Use rem for global sizing and spacing, em for component-internal values that should track the component's own text size.