Rem vs Em: Practical Patterns

Choose by what should scale with what

The question is never which unit is better, but what a size should follow. Rem follows the root text size. Em follows the text size of the component it is in. This guide turns that into patterns you can copy. For the theory of how em values compound when nested, see the em vs rem guide.

Patterns by use case

• Body and heading sizes: rem, so they are the same wherever they appear.
• Button and badge padding: em, so the control grows with its own label.
• Icons beside text: em, so an icon sized at 1em matches the surrounding text.
• Page and section spacing: rem, for consistent rhythm.
• Container widths: rem or ch, so line length follows text size.
• Breakpoints: em or rem. Both are measured against the browser default size, so they respond to reader text settings.

.btn { font-size: 1rem; padding: 0.5em 1em; }
.btn--large { font-size: 1.25rem; }   /* padding grows with it */
.icon { width: 1em; height: 1em; }
@media (min-width: 48em) { .layout { display: grid; } }

Migrating from em to rem

1. Find font-size declarations in em that sit inside other em font sizes. These are the ones that compound.
2. Convert them to rem using the rem calculator, working out each final pixel size first.
3. Leave padding, margin and icon sizes in em where they should follow the component.
4. Test with the browser default text size raised, to confirm everything still scales.

Mistakes to avoid

• Mixing em font sizes in deeply nested markup.
• Using em for page-level spacing, which then changes whenever a parent font size changes.
• Changing the root size in px, which overrides reader settings.

To convert values, use the rem to px, px to rem or em, rem and px converters.