Type a number, pick the unit it's in (px, rem or em), set the base font size and press Run — all three units are worked out together and added below.

What's the difference between rem and em?

rem is always measured from the document root (the html element), while em is measured from the immediate parent. That makes rem predictable, whereas em compounds as elements nest. This tool uses the base font size you enter for both, so you can compare them side by side.

Why is the base 16px?

Most browsers set the document font size to 16px, so that's the default here. If your project sets a different root size, put that in instead. And because em comes from the parent, use the parent's size when you're matching a real page.

px ↔ rem ↔ em Converter (CSS Units)

px ↔ rem ↔ em Converter

Convert between px, rem and em against a base font size — 24px is 1.5rem. Handy when you're moving between units in a responsive layout.

Enter a value and a unit, then press Run —
the results build up here.

Settings

Value

Unit

Base font size (px)

Browsers usually default to 16px. Since em is measured from the parent element, put the parent's font size here to match a real page.

px ↔ rem ↔ em Converter

Settings

Frequently asked questions

px ↔ rem ↔ em Converter

Settings

Frequently asked questions

px ↔ rem ↔ em Converter

Settings

Related tools

Frequently asked questions

px ↔ rem ↔ em Converter

Settings

Related tools

Frequently asked questions