← Back to Tools

PX ↔ REM

Bidirectional unit conversion with batch mode and CSS output

Base font size: px
16px 14px 10px 18px
Pixels (PX) px
REM rem
EM equivalent: — · EM is context-dependent (relative to parent font size, not root)
Input values (one per line) Accepts px or rem values — auto-detected
Results
Quick Reference — Common Values click any row to copy rem value
PX REM EM CSS (font-size)

PX vs REM vs EM — Which Unit Should You Use?

Choosing the right CSS unit is one of the most impactful decisions in frontend development. It affects accessibility, responsiveness, and how your layout scales across devices and user preferences.

Why REM over PX?

Pixels are absolute — they never change. REM (root em) is relative to the root font size set on the HTML element. If a user sets their browser default to 20px for accessibility, REM values scale with them. PX values don't.

What's the formula?

REM = Target PX ÷ Base Font Size. With a 16px base: 24px ÷ 16 = 1.5rem. To go the other way: PX = REM × Base. 1.5rem × 16 = 24px.

REM vs EM — what's the difference?

REM is always relative to the root (html) font size. EM is relative to the nearest parent element's font size. This makes EM harder to predict in nested components — REM is more reliable for most use cases.

What base size should I use?

Most browsers default to 16px, making it the standard base. Some teams set the root to 10px for easier math (10px base means 1rem = 10px, so 24px = 2.4rem). Use the preset chips above to switch instantly.

When should I still use PX?

Use PX for things that should never scale with font size: borders (1px), box-shadow offsets, and icon sizes where pixel-perfect rendering matters. Use REM for typography and spacing.

What is the batch converter for?

Paste your entire design token list — 12, 14, 16, 18, 24, 32, 48, 64 — and convert everything at once. Saves time when migrating a legacy codebase from pixels to relative units or documenting a design system.