Popular PX Values in EM
With a 16 px parent: 8px = 0.5em, 12px = 0.75em, 14px = 0.875em, 20px = 1.25em, 24px = 1.5em and 32px = 2em.
Convert pixels to EM for any parent font size. With a 16 px font size, 16 px = 1 em.
With a 16 px parent: 8px = 0.5em, 12px = 0.75em, 14px = 0.875em, 20px = 1.25em, 24px = 1.5em and 32px = 2em.
EM depends on the font size of the element (or its parent, for font-size itself). Here are the values for three common base sizes.
| Pixels (px) | EM (14px base) | EM (16px base) | EM (18px base) |
|---|---|---|---|
| 1px | 0.0714em | 0.0625em | 0.0556em |
| 2px | 0.1429em | 0.125em | 0.1111em |
| 4px | 0.2857em | 0.25em | 0.2222em |
| 6px | 0.4286em | 0.375em | 0.3333em |
| 8px | 0.5714em | 0.5em | 0.4444em |
| 10px | 0.7143em | 0.625em | 0.5556em |
| 12px | 0.8571em | 0.75em | 0.6667em |
| 14px | 1em | 0.875em | 0.7778em |
| 16px | 1.1429em | 1em | 0.8889em |
| 18px | 1.2857em | 1.125em | 1em |
| 20px | 1.4286em | 1.25em | 1.1111em |
| 22px | 1.5714em | 1.375em | 1.2222em |
| 24px | 1.7143em | 1.5em | 1.3333em |
| 28px | 2em | 1.75em | 1.5556em |
| 32px | 2.2857em | 2em | 1.7778em |
| 36px | 2.5714em | 2.25em | 2em |
| 40px | 2.8571em | 2.5em | 2.2222em |
| 48px | 3.4286em | 3em | 2.6667em |
| 56px | 4em | 3.5em | 3.1111em |
| 64px | 4.5714em | 4em | 3.5556em |
| 72px | 5.1429em | 4.5em | 4em |
em = px ÷ font size of the element
Example: a 24 px heading inside a 16 px paragraph is 24 ÷ 16 = 1.5 em. The same 24 px inside an 18 px block is 24 ÷ 18 = 1.3333 em. For font-size, the base is the parent's font size; for padding, margin and width, it is the element's own font size.
REM is always relative to the root, so it gives the same result anywhere on the page. EM is relative to the nearest font size, so it is perfect for spacing that should grow with its own text, such as button padding, but it compounds when nested. For most font sizes, rem is the safer choice; see PX to REM.
16 px = 1 em when the font size is 16 px, which is the browser default.
24 px = 1.5 em with a 16 px base, or 1.333 em with an 18 px base.
em is relative to the font size of the current element (or its parent for font-size), so it compounds when nested. rem is always relative to the root html font size.
Because em uses the font size of the surrounding element. If a parent is already 1.2em, a 1.2em child becomes 1.44 times the base size.
No. All conversions happen entirely in your browser. The values you enter are never sent to our server or saved.