Formula
em = px ÷ parent font size
At the browser default root size of 16px: 16px = 1em.
Identical arithmetic to rem, but the divisor is the parent element's font size rather than the root — so em compounds when you nest it.
Converter
—
px to em conversion table
| Value | 10px root | 12px root | 14px root | 16px root | 18px root | 20px root |
|---|---|---|---|---|---|---|
| 1px | 0.1em | 0.0833em | 0.0714em | 0.0625em | 0.0556em | 0.05em |
| 2px | 0.2em | 0.1667em | 0.1429em | 0.125em | 0.1111em | 0.1em |
| 4px | 0.4em | 0.3333em | 0.2857em | 0.25em | 0.2222em | 0.2em |
| 6px | 0.6em | 0.5em | 0.4286em | 0.375em | 0.3333em | 0.3em |
| 8px | 0.8em | 0.6667em | 0.5714em | 0.5em | 0.4444em | 0.4em |
| 10px | 1em | 0.8333em | 0.7143em | 0.625em | 0.5556em | 0.5em |
| 12px | 1.2em | 1em | 0.8571em | 0.75em | 0.6667em | 0.6em |
| 14px | 1.4em | 1.1667em | 1em | 0.875em | 0.7778em | 0.7em |
| 16px | 1.6em | 1.3333em | 1.1429em | 1em | 0.8889em | 0.8em |
| 18px | 1.8em | 1.5em | 1.2857em | 1.125em | 1em | 0.9em |
| 20px | 2em | 1.6667em | 1.4286em | 1.25em | 1.1111em | 1em |
| 22px | 2.2em | 1.8333em | 1.5714em | 1.375em | 1.2222em | 1.1em |
| 24px | 2.4em | 2em | 1.7143em | 1.5em | 1.3333em | 1.2em |
| 28px | 2.8em | 2.3333em | 2em | 1.75em | 1.5556em | 1.4em |
| 32px | 3.2em | 2.6667em | 2.2857em | 2em | 1.7778em | 1.6em |
| 36px | 3.6em | 3em | 2.5714em | 2.25em | 2em | 1.8em |
| 40px | 4em | 3.3333em | 2.8571em | 2.5em | 2.2222em | 2em |
| 44px | 4.4em | 3.6667em | 3.1429em | 2.75em | 2.4444em | 2.2em |
| 48px | 4.8em | 4em | 3.4286em | 3em | 2.6667em | 2.4em |
| 56px | 5.6em | 4.6667em | 4em | 3.5em | 3.1111em | 2.8em |
| 64px | 6.4em | 5.3333em | 4.5714em | 4em | 3.5556em | 3.2em |
| 72px | 7.2em | 6em | 5.1429em | 4.5em | 4em | 3.6em |
| 80px | 8em | 6.6667em | 5.7143em | 5em | 4.4444em | 4em |
| 96px | 9.6em | 8em | 6.8571em | 6em | 5.3333em | 4.8em |
| 112px | 11.2em | 9.3333em | 8em | 7em | 6.2222em | 5.6em |
| 128px | 12.8em | 10.6667em | 9.1429em | 8em | 7.1111em | 6.4em |
| 144px | 14.4em | 12em | 10.2857em | 9em | 8em | 7.2em |
| 160px | 16em | 13.3333em | 11.4286em | 10em | 8.8889em | 8em |
| 192px | 19.2em | 16em | 13.7143em | 12em | 10.6667em | 9.6em |
| 224px | 22.4em | 18.6667em | 16em | 14em | 12.4444em | 11.2em |
| 256px | 25.6em | 21.3333em | 18.2857em | 16em | 14.2222em | 12.8em |
| 320px | 32em | 26.6667em | 22.8571em | 20em | 17.7778em | 16em |
| 384px | 38.4em | 32em | 27.4286em | 24em | 21.3333em | 19.2em |
| 448px | 44.8em | 37.3333em | 32em | 28em | 24.8889em | 22.4em |
| 512px | 51.2em | 42.6667em | 36.5714em | 32em | 28.4444em | 25.6em |
Set it up once in CSS
/* 62.5 % makes 1rem = 10px, so 1.6rem = 16px.
Convenient, but it overrides the user's browser preference at the root —
prefer keeping the default and doing the maths. */
html { font-size: 100%; } /* 16px, respects user preference */
:root {
--step-0: 1rem; /* 16px */
--step-1: 1.25rem; /* 20px */
--step-2: 1.5rem; /* 24px */
--step-3: 2rem; /* 32px */
}
/* Fluid type without a converter, using clamp() */
h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); }Questions
How do I convert px to em?
em = px ÷ parent font size. With the browser default root font size of 16px, 16px = 1em.
What if the root font size is not 16px?
Then every value changes proportionally. The table above shows all six common root sizes side by side. Note that the root font size is whatever html computes to — if a user has increased their browser's default text size, the pixel result changes accordingly.
How do I convert em back to px?
Invert the formula, or use the em to px converter.
Other conversions
Common px values
Conversions follow the CSS Values and Units specification, in which 1in is defined as exactly 96px. Values are computed, not tabulated by hand.