← Back to Tools

EM ↔ PX Calculator

Instant conversion · Nested EM compounding · Live preview · Reference table

Root / Base Font Size (px)

EM Value

PX Value

Parent Element Font Size (px) — if different from root Live Preview Text

Result

—

Enter a value to convert

Live Preview

The quick brown fox

💡 EM is relative to the parent element's font-size. REM is relative to the root <html> element (always your base px above).

Root Font Size (px) Nesting Levels — each row is a child of the one above

Computed PX at Each Level

Add nesting levels to calculate compounding.

💡 The nesting trap: font-size: 0.8em on a child of a child compounds — 0.8 × 0.8 = 0.64em of root. This calculator shows you the real pixel output at each level.

Base Font Size for Table (px)

Click any row to load values into the converter.

PX	EM / REM	Common Use

Common Base Sizes Quick-Switch

💡 62.5% trick: Set html { font-size: 62.5%; } (= 10px on default browser). Then 1rem = 10px, so 1.6rem = 16px. Math becomes trivial.

💡 Tailwind scale uses a 4px base grid. text-base = 16px = 1rem. text-sm = 14px = 0.875rem.