Popular EM Values in Pixels
With a 16 px base: 0.5em = 8px, 0.75em = 12px, 1em = 16px, 1.2em = 19.2px, 1.5em = 24px, 2em = 32px and 2.5em = 40px.
Convert EM to pixels for any font size. With the 16 px browser default, 1 em = 16 px.
With a 16 px base: 0.5em = 8px, 0.75em = 12px, 1em = 16px, 1.2em = 19.2px, 1.5em = 24px, 2em = 32px and 2.5em = 40px.
Pixels for common em values with three base font sizes.
| EM | Pixels (14px base) | Pixels (16px base) | Pixels (18px base) |
|---|---|---|---|
| 0.25em | 3.5px | 4px | 4.5px |
| 0.5em | 7px | 8px | 9px |
| 0.625em | 8.75px | 10px | 11.25px |
| 0.75em | 10.5px | 12px | 13.5px |
| 0.875em | 12.25px | 14px | 15.75px |
| 1em | 14px | 16px | 18px |
| 1.125em | 15.75px | 18px | 20.25px |
| 1.2em | 16.8px | 19.2px | 21.6px |
| 1.25em | 17.5px | 20px | 22.5px |
| 1.5em | 21px | 24px | 27px |
| 1.75em | 24.5px | 28px | 31.5px |
| 2em | 28px | 32px | 36px |
| 2.5em | 35px | 40px | 45px |
| 3em | 42px | 48px | 54px |
| 4em | 56px | 64px | 72px |
Each nested element with font-size: 1.2em is 1.2 times its parent, so sizes grow quickly. This is the most common surprise with em.
| Nesting level | Font size |
|---|---|
| Page (16px) | 16px |
| Level 1 (1.2em) | 19.2px |
| Level 2 (1.2em) | 23.04px |
| Level 3 (1.2em) | 27.648px |
| Level 4 (1.2em) | 33.178px |
Use rem when you want a size that ignores nesting. Convert with REM to PX.
px = em × font size of the element
Example: 2.5 em × 16 = 40 px. Inside an element whose font size is 18 px, 2.5 em = 45 px.
1 em equals the current font size. With the browser default that is 16 px.
2.5 em = 40 px with a 16 px base, or 45 px with an 18 px base.
1.2 em = 19.2 px with a 16 px base.
em compounds: a 1.2em element inside another 1.2em element is 1.44 times the base size. Use rem to avoid this.
No. All conversions happen entirely in your browser. The values you enter are never sent to our server or saved.