What is the difference between px, rem, and em?

px is an absolute unit. rem (root em) is relative to the root element's font size (usually 16px). em is relative to the nearest parent's font size, which can compound unexpectedly in nested elements.

Why use rem instead of px?

rem units scale with the user's browser font-size preference, improving accessibility. They also make it easy to resize the entire UI by changing just the root font size.

How is the conversion calculated?

rem = px ÷ rootFontSize. For a root font size of 16px, 24px ÷ 16 = 1.5rem. This calculator uses whatever root font size you set.

What does em mean in CSS?

em is relative to the font-size of the element itself (or its parent for most properties). If the parent is 16px, 1.5em = 24px. em is less predictable than rem in nested contexts.

What root font size should I use?

Most browsers default to 16px. If your project sets a different root font size in CSS (e.g. html { font-size: 62.5%; } → 10px), change the root size field here to match.

PX to REM Converter

Developer Tools· 33 tools

Free px to rem converter for web developers. Enter a pixel value to see the equivalent rem and em, or enter rem to see the pixel value. Set any root font size (default 16px). Includes a quick-reference table of common values (12, 14, 16, 18, 24, 32px) and a batch converter — paste a list of CSS px values to convert them all to rem at once.

Root font size (px)

Pixels (px)

REM

EM (same parent = root)

1em

Common values at 16px root

px	rem	em
12px	0.75rem	0.75em
14px	0.875rem	0.875em
16px	1rem	1em
18px	1.125rem	1.125em
20px	1.25rem	1.25em
24px	1.5rem	1.5em
32px	2rem	2em
48px	3rem	3em
64px	4rem	4em

Click a row to load that value into the converter.

Batch converter

Paste a list of px values (separated by newlines, commas, or semicolons).

Frequently Asked Questions

References

CSS values and units — MDN Web Docs — MDN Web Docs

Related Tools

CSS Gradient Generator
Create beautiful linear and radial CSS gradients with a live preview and copy-ready code.
WCAG Color Contrast Checker
Check color contrast against WCAG 2.1 AA and AAA standards. Verify accessibility for text and UI.
Color Converter
Convert colors between HEX, RGB, and HSL formats with a live preview swatch. Essential for web designers and developers — copy any format with one click.

Frequently Asked Questions

References and sources

Related Tools