em / rem vs px
Side-by-side comparison, when-to-use-each guide, and instant conversion. Reviewed for 2026.
Font sizes, padding/margin, anything that should scale with user settings.
Borders, shadow offsets, small icons, image dimensions, things that should never scale.
| Aspect | em / rem | px |
|---|---|---|
| Definition | px: fixed pixel | em: relative to parent / rem: relative to root |
| Browser zoom | Both scale | Both scale |
| User font size override | Doesn't respect | Respects (rem strongly recommended) |
| Compounding | No | em compounds; rem doesn't |
| Best for | Borders, fine detail | Font, padding, layout |
Frequently asked
Why is rem better than em?
em compounds: a 1.5em child of a 1.5em parent is 2.25× root size. rem always refers to the root, so size is predictable. Use em only when you want compounding (rare).
Should I never use px?
Use px sparingly. Borders (1px solid), shadow offsets (0 2px 4px), thin icons — px is fine. For anything that affects readability or layout proportions, use rem.
Frequently asked questions
Why is rem better than em?
em compounds: a 1.5em child of a 1.5em parent is 2.25× root size. rem always refers to the root, so size is predictable. Use em only when you want compounding (rare).
Should I never use px?
Use px sparingly. Borders (1px solid), shadow offsets (0 2px 4px), thin icons — px is fine. For anything that affects readability or layout proportions, use rem.