Px to Em Converter
Convert pixels to em or rem for CSS, and back, against any base font size.
Common sizes at a 16px base
| Pixels | em | Percent |
|---|---|---|
| 8px | 0.5em | 50% |
| 10px | 0.625em | 62.5% |
| 12px | 0.75em | 75% |
| 14px | 0.875em | 87.5% |
| 16px | 1em | 100% |
| 18px | 1.125em | 112.5% |
| 20px | 1.25em | 125% |
| 24px | 1.5em | 150% |
| 32px | 2em | 200% |
| 40px | 2.5em | 250% |
| 48px | 3em | 300% |
| 64px | 4em | 400% |
The conversion
em = px ÷ base and px = em × base.
With the usual 16px base, 24px is 1.5em.
em and rem are not the same
rem is always relative to the root element, so the base is one fixed number for the whole page — which is what the table above assumes. em is relative to the parent element's font size, so it compounds: an element at 1.5em inside another at 1.5em renders at 2.25 times the root size. That compounding is useful for padding that should scale with its own text, and a trap for nested type.
Why bother with relative units
A reader who sets a larger default font size in their browser gets larger text everywhere that uses em or rem, and no change at all where you hard-coded pixels. Using rem for font sizes is the single easiest accessibility win in CSS.
Media-query widths are the exception: em in a
media query is always relative to the browser default, not to your root rule.