How to convert PX to EM
To convert pixels (px) to ems (em), divide the target pixel size by the parent element's base font size.
EM = Pixels ÷ Parent Font Size Example: 24px ÷ 16px (default parent) = 1.5em
While rem units always evaluate against the root (<html>) element, em units inherit relative to their immediate parent container. If a parent container has a font size set to 20px, then 1em = 20px inside that specific sub-tree.
PX to EM conversion table (Default 16px Base)
Standard CSS design system pixel metrics converted to EM values assuming a 16px default parent context:
| Pixels (px) | Em (16px Base) | Em (20px Parent) | Typical Web Design Use Case |
|---|---|---|---|
| 4px | 0.25em | 0.20em | Tight icon padding / subtle border-radius |
| 8px | 0.5em | 0.40em | Standard element margin / small gap |
| 12px | 0.75em | 0.60em | Form caption / footer micro-copy |
| 14px | 0.875em | 0.70em | Secondary text / UI button labels |
| 16px | 1.0em | 0.80em | Standard body copy baseline (1rem = 1em) |
| 20px | 1.25em | 1.0em | Subheadings (H3 / H4) / card title |
| 24px | 1.5em | 1.20em | Section headings (H2) |
| 32px | 2.0em | 1.60em | Hero headlines (H1) / modal titles |
| 48px | 3.0em | 2.40em | Large display titles / landing hero banners |
When to use EM vs REM vs PX
Choosing between absolute and relative CSS units depends on component portability and design intent:
| Unit | Inheritance Source | Best Suited For | Key Advantage |
|---|---|---|---|
| EM | Parent Container / Current Element | Component-level padding, icons, button padding, line-height | Scales relative to local typography changes |
| REM | Root Element (<html>) | Site-wide typography, main layout grids, structural margins | Avoids unwanted compounding bugs across nested wrappers |
| PX | Absolute Hardcoded Value | Borders, subtle drop shadows, media queries | Exact pixel-perfect rendering regardless of parent size |
Understanding the EM compounding trap
Because em units multiply down the DOM tree, nesting multiple relative containers can produce unexpected sizing spikes. For example:
- Parent container:
font-size: 1.2em;(19.2px) - Child container:
font-size: 1.2em;(23.04px) - Grandchild container:
font-size: 1.2em;(27.65px)
To prevent unwanted compounding while maintaining responsive flexibility, use PX to REM for global font sizing and restrict em to local padding or icon alignment. Reverse your values anytime using our EM to PX Converter.
Frequently asked questions
How do I convert px to em?
Divide the pixel value by the parent element's font size (e.g., 20px ÷ 16px = 1.25em).
What is the difference between em and rem?
rem always resolves against the single root (<html>) font size (typically 16px), whereas em resolves relative to its immediate parent element's font size.
How many em is 16px?
With a standard 16px base font size, 16px equals exactly 1.0em (16 ÷ 16 = 1.0).
How do I convert em back to px?
Multiply the em value by the parent element's base font size, or use our EM to PX Converter.