PX to EM
Convert pixels to em relative to the parent font size.
Convert Pixels (px) to EM (em). Results update as you type.
px
Browser default is 16px
px to em conversion table (base 16px)
| Pixels | EM |
|---|---|
| 1px | 0.0625em |
| 2px | 0.125em |
| 4px | 0.25em |
| 8px | 0.5em |
| 10px | 0.625em |
| 12px | 0.75em |
| 14px | 0.875em |
| 16px | 1em |
| 18px | 1.125em |
| 20px | 1.25em |
| 24px | 1.5em |
| 28px | 1.75em |
| 32px | 2em |
| 36px | 2.25em |
| 40px | 2.5em |
| 48px | 3em |
| 56px | 3.5em |
| 64px | 4em |
| 72px | 4.5em |
| 96px | 6em |
PX to EM Converter
Turn pixel measurements into em units that follow the font size of their context. Enter a pixel value, set the parent font size (16px by default), and the result appears immediately. The bulk box handles a whole list of values, one per line, and the table below lists common conversions for the base you chose.
How the conversion works
em = px ÷ parent font size
Unlike rem, the base is not fixed. It is the computed font size of the element the em value belongs to, so the same pixel value gives different em values in different places:
| Pixels | 16px parent | 20px parent | 12px parent |
|---|---|---|---|
| 12px | 0.75em | 0.6em | 1em |
| 18px | 1.125em | 0.9em | 1.5em |
| 24px | 1.5em | 1.2em | 2em |
Worked example: a scalable button
A design shows a button with 18px text, 12px vertical padding and 24px horizontal padding. Set the base to 18 and convert: 12px = 0.6667em and 24px = 1.3333em. Now write padding: 0.6667em 1.3333em. If you later make a large variant with font-size: 24px, the padding grows to 16px and 32px automatically, keeping the button's proportions intact.
Watch out for compounding
Because em is relative to the parent, nested elements multiply. Setting font-size: 0.8em on a nested list inside another 0.8em list gives 16 × 0.8 × 0.8 = 10.24px text. For font sizes that must not drift, rem is usually the safer choice; for spacing that should track a component's own text size, em is ideal.
When px to em is the right tool
- Padding and margins on buttons, badges, and form controls
- Icon sizes that should match the adjacent text
- Media queries, where em is based on the browser's default font size and behaves consistently across browsers
Converting against the root instead? Use PX to REM. To go back from em to pixels, try EM to PX.
Frequently Asked Questions
How do I convert px to em?
Divide the pixel value by the font size of the parent element. With a 16px parent, 24px ÷ 16 = 1.5em. With a 20px parent, 15px ÷ 20 = 0.75em.
Which font size should I enter as the base?
Enter the computed font size of the element whose em you are defining. For font-size, that is the parent element. For padding, margin, or width, it is the element's own font size.
Why do em values get smaller or larger in nested elements?
Each em is relative to the parent, so sizes multiply. A 0.8em list inside another 0.8em list ends up at 0.64 of the outer size, which is 10.24px when the outer text is 16px.
Should I use em or rem?
Use rem when a value should depend only on the root font size. Use em when a value should scale with its own component, such as button padding that grows with the button text.