em to px Converter
Convert relative em units to pixels and rem. Adjust the parent base font size to simulate nested CSS typography components.
Ems to Pixels Live Calculator
Type any value below. The base parent size defaults to 16px (meaning 1em = 16px at root level).
The Critical Difference: em vs rem
Both em and rem are scalable relative units, but their inheritance behavior is fundamentally different:
| Feature | EM Unit (em) | REM Unit (rem) |
|---|---|---|
| Reference Point | Immediate parent container's font size | Root <html> element's font size (16px) |
| Compounding Risk | ⚠️ Yes — compounds with every nested layer | ✅ No — stays predictable across entire DOM |
| Best Used For | Component padding, button margins, icon scaling | Global typography, headings, body text, grid spacing |
| Accessibility (WCAG) | Good, but can grow out of control if nested | Best — directly respects user browser zoom |
Common em to px Conversions (16px base)
| Ems (em) | Pixels (px) | Percent (%) | Common Use Case |
|---|---|---|---|
| 0.5 em | 8 px | 50% | Micro tags, superscript badges |
| 0.75 em | 12 px | 75% | Form captions & small labels |
| 0.875 em | 14 px | 87.5% | Secondary body & sidebar meta |
| 1.0 em | 16 px | 100% | Standard body text minimum |
| 1.125 em | 18 px | 112.5% | Comfortable longform reading copy |
| 1.25 em | 20 px | 125% | H4 subheaders & card titles |
| 1.5 em | 24 px | 150% | H3 section titles |
| 1.75 em | 28 px | 175% | H2 featured article sub-headlines |
| 2.0 em | 32 px | 200% | H1 primary page titles |
| 2.5 em | 40 px | 250% | Hero banners & landing headers |
| 3.0 em | 48 px | 300% | Display hero typography |
Frequently Asked Questions (FAQ)
How do you convert em to px in CSS?
Multiply the em value by the parent element's font size (which defaults to 16px if not overridden). Formula: px = em × parent_font_size. For instance, 1.5em on a 16px base equals 24px.
What is the key difference between em and rem?
em is relative to the font size of its direct parent container and compounds (multiplies) down nested elements. rem (root em) is anchored strictly to the root <html> element (16px default) and never compounds.
How many pixels is 1em?
With a default 16px parent or root font size, 1em = 16px. If a parent container has font-size: 20px, then 1em inside that container becomes 20px.
When should I use em instead of rem?
Use em for CSS padding, margins, borders, or icon sizes within a component when you want those spacing dimensions to automatically scale proportionally if the component's font size changes.