When to use rem
REM units are useful for global typography, spacing, and layout scales because they are relative to the root font size. They make it easier to keep a consistent design system and respect user font-size preferences.
When to use em
EM units are useful inside components where spacing should scale with the component’s font size. They can be powerful, but nested elements can compound values if you are not careful.
When to use px
Pixels are useful for borders, icons, fine details, and places where exact values matter. They are simple and predictable, but they are less flexible than rem for global typography and spacing systems.
How to choose in real projects
Use rem for most typography and spacing tokens, em for component-relative spacing, and px for small fixed details. Then test the layout at different viewport widths and root font-size settings.
CSS unit examples
A practical system often mixes units instead of forcing one unit everywhere.
:root { font-size: 16px; }
.card-title { font-size: 1.25rem; }
.button { padding: .75em 1em; }
.divider { border-width: 1px; }