em to px converter
Convert em to px (and back) at any parent font size. Result updates as you type.
em is relative to the parent element’s font size. Set it above.
How em works
em is a CSS length unit that scales relative to the parent element’sfont size. One em equals the parent’s current font size in pixels. This is what trips most developers up: there is no global “1em equals 16px” rule. That only holds when the parent’s font size happens to resolve to 16px, which is the browser default at the root.
The math is straightforward: px = em × parent and em = px / parent. At a 16px parent, 1em is 16px. At a 24px parent (a typical <h2>), 1em is 24px. The same em value renders differently in different contexts — which is the unit’s whole point.
Worked examples
A button. Your button has font-size: 14px and padding: 0.5em 1em. The browser computes 0.5 × 14 = 7px vertically and 1 × 14 = 14px horizontally. Bump the button to 18px and padding scales automatically to 9px and 18px. That proportional response is the reason to use em here over px.
Nested em values. A <div> has font-size: 20px. Inside, a <span> with font-size: 1.5em becomes 30px. A <strong> inside that span at 1.2em is 1.2 × 30 = 36px. em compounds through nesting, which is powerful and also the source of most em bugs.
Margins tied to type. A heading at 32px with margin-bottom: 1em gets 32px of space below it. Good for visual rhythm anchored to the type itself; less good if you want a consistent gap below every heading regardless of size.
Reference table
em values at common parent font sizes.
| Parent | 0.5em | 0.75em | 1em | 1.25em | 1.5em | 2em |
|---|---|---|---|---|---|---|
| 12px | 6px | 9px | 12px | 15px | 18px | 24px |
| 14px | 7px | 10.5px | 14px | 17.5px | 21px | 28px |
| 16px | 8px | 12px | 16px | 20px | 24px | 32px |
| 18px | 9px | 13.5px | 18px | 22.5px | 27px | 36px |
| 20px | 10px | 15px | 20px | 25px | 30px | 40px |
| 24px | 12px | 18px | 24px | 30px | 36px | 48px |
em vs rem vs px — when to use what
Use emwhen the spacing or sizing should track the element’s own font size. Button padding, icon size next to text, line-height — these all benefit from scaling with the type they live alongside.
Use remwhen the value should be consistent across the page and tied to the root. Page-level spacing, breakpoints, the top-level type scale — rem keeps these predictable. rem ignores parent context, which is usually what you want for layout.
Use pxwhen the value must not scale at all. Hairline borders, fixed icon sizes, pixel-perfect alignment with raster images. Reach for px sparingly — most things benefit from being relative.
The practical rule: rem for the layout grid, em for component-internal sizing that should respond to type changes, px for atomic visual details that must stay fixed.
Accessibility
Users can change their browser font size, and that change cascades from the root. Anything sized in em or rem scales with them; anything in px does not. For em-sized button padding, that scaling is doubly useful — if a user enlarges text, the padding grows too, keeping the touch target proportionate.
The trap is fixed-px font sizes anywhere up the chain. A font-size: 16px on the body breaks the scaling because em only responds when the chain back to the root is in relative units. Set the root in rem-friendly terms (html { font-size: 100% } is the safest default) and let em compound from there.
Common mistakes
- 1. Using em where rem belongs. Setting
margin-top: 2emon a heading means the margin changes depending on the heading’s own size. If you want a consistent gap above every heading, switch to rem. - 2. Forgetting em compounds. A 1.5em font size inside a 1.5em parent gives 2.25× the grandparent. Three levels of nested em sizes will surprise you. If you need predictable scaling across nesting, use rem.
- 3. Assuming em equals 16px. It only does when the parent’s font size resolves to 16px. The moment you change a parent’s type, every em inside shifts.
- 4. Mixing em and px in the same property.
calc(1em + 4px)works but obscures intent. Pick a unit per property.
FAQ
What’s the difference between em and rem?
em is relative to the parent element’s font size. rem is relative to the root element’s font size (the <html> tag). em compounds through nested elements; rem does not.
Why does 1em equal 16px on my page?
Because somewhere up the cascade, the parent’s font size resolves to 16px — usually because that’s the browser default and nothing has overridden it before reaching your element.
Does em work for everything, or just font-size?
em works on any property that takes a length: padding, margin, width, gap, border-radius, line-height, and more. On font-size, em is calculated against the parent’s font size. On other properties, em is calculated against the current element’s font size.
When is em better than rem?
For component-internal sizing that should scale with the component’s own type. A card’s padding in em scales naturally if you change the card’s font size; the same in rem would stay fixed.
Is em more accessible than px?
For text-related sizing, yes. em responds to browser font-size changes; px does not. Use em or rem for type and type-adjacent values wherever possible.