What is the difference between rem and em units in CSS

Short answer

rem (root em) is always relative to the root element's font size (typically 16px by default), while em is relative to the font size of the element's parent. Use rem for consistent global scaling and em for component-scaled spacing.

Details

Because em compounds when nested, a list inside a list with font-size: 0.9em will shrink progressively. This can be useful for creating self-scaling components but frustrating for global layouts. rem avoids compounding entirely, making it the preferred choice for margins, padding, and font sizes that should respond to a single user preference (such as browser default font size).

Component libraries often use em for padding on buttons so that the button scales proportionally if its font size is changed locally. For page-level layouts, rem provides more predictable results. If you are building a design system, you might also be interested in how to implement dark mode with CSS custom properties for consistent theming across units.

Tips

• Set the root font size to a percentage (e.g., 62.5%) only if you understand the accessibility implications; respecting the user's default is usually better.
• Use em for media query breakpoints if you want them to scale with the user's base font size.
• For more modern CSS techniques, see How to use CSS @layer to organize stylesheets when structuring your design tokens.