font inspectorEM to PX converter
Convert em values to pixels based on the font size they are relative to, with a reference table of common values.
font-size: 24px; /* 1.5em at 16px */
How do you convert EM to PX?
Multiply the em value by the font size it is relative to. For the font-size property that is the parent’s font size. For every other property, such as padding, margin or letter-spacing, it is the element’s own font size. So 1.5em is 24px inside 16px text and 30px inside 20px text.
Because em compounds through nested elements, it is best for things that should scale with the text around them, such as letter spacing and padding on buttons. For font sizes, rem is more predictable. See rem vs em vs px.
| EM | Pixels | EM | Pixels |
|---|---|---|---|
| 0.25em | 4px | 1.75em | 28px |
| 0.5em | 8px | 2em | 32px |
| 0.625em | 10px | 2.25em | 36px |
| 0.75em | 12px | 2.5em | 40px |
| 0.875em | 14px | 3em | 48px |
| 1em | 16px | 3.5em | 56px |
| 1.125em | 18px | 4em | 64px |
| 1.25em | 20px | 4.5em | 72px |
| 1.375em | 22px | 5em | 80px |
| 1.5em | 24px | 6em | 96px |
How many pixels is 1em?
As many as the font size it is relative to. In 16px text, 1em is 16px. In a 24px heading, 1em is 24px.
Why do em font sizes compound?
Each em font size multiplies its parent’s size. A list set to 1.2em inside another list set to 1.2em ends up 1.44 times the base. Rem avoids this because it always refers to the root.
What is em good for?
Spacing that should grow with the text: letter spacing, padding on buttons, and the gap between an icon and its label.
See how real sites set their type.
Font Inspector shows the font, size, line height and spacing of any text on any website, then copies it as CSS. Free, no account.