Px to em converter
Turn pixel values into relative em units, or convert back to pixels. Set your parent font size and keep both fields synchronized in your browser.
px
em
16px equals 1em at a parent size of 16px.
The font size defined on the immediate parent element.
Common sizesUnlike
rem which always refers to root HTML, em cascades. Use em when child components should resize with their parent.Tip: press Enter in either field to copy the em value.
Common sizes
Based on a parent element font size of 16px.
| Use | Pixels | Em | Actions |
|---|---|---|---|
| Caption | 12px | 0.75em | |
| Small text | 14px | 0.875em | |
| Body text | 16px | 1em | |
| Large body | 18px | 1.125em | |
| Subheading | 24px | 1.5em | |
| Heading | 32px | 2em | |
| Large heading | 48px | 3em | |
| Display | 64px | 4em |
How it works
1
Set the parent size
Use 16px unless your parent element defines a custom font size.
2
Type a value
Enter pixels or em. The other field updates as you type.
3
Copy the result
Copy the em value with its unit, ready to paste into your CSS.