DEV Community

alok-38
alok-38

Posted on

Why `rem` Should Be Your Default for Spacing in Modern CSS

#css #webdev #tutorial

Why Use rem Instead of px for Padding? 

/* Before */
padding: 24px 74px;

/* After */
padding: 1.5rem 4.625rem;
Enter fullscreen mode Exit fullscreen mode

But this is one of those small shifts that has a big impact in modern CSS, especially when building scalable and accessible interfaces.

rem Responds to User Accessibility Settings

The rem unit is relative to the root font size (typically the browser default of 16px).
If a user increases their default font size for readability — which is common for people with visual impairments — your layout should adapt gracefully.

px values do not scale → the layout becomes cramped and harder to read.

rem values do scale → spacing and layout grow proportionally.

This means a UI built with rem is more accessible and readable for all users.

Why Not Use em?

em values are relative to the element’s own font-size, which can lead to padding and spacing changing unexpectedly when typography changes.

rem keeps spacing consistent, even if a component’s font size is adjusted.

Quick comparision

Feature rem (Recommended) em
Relative to root font-size (html) ✅ Yes ❌ No
Padding stays consistent when element font-size changes ✅ Yes ❌ No
Ideal for layout spacing (padding, margin, gap) ✅ Yes ❌ No
Works well in design systems & token scales ✅ Yes ❌ No
Best for sizing elements relative to their own text ❌ No ✅ Yes
Common use Global spacing & layout Inline elements that scale with text

Final Takeaway

Switching from px to rem makes your UI:

  • More readable

  • More accessible

  • More visually consistent

  • Easier to maintain

  • Better prepared for responsive layouts

If you're building a modern design system or want your UI to scale gracefully across devices and accessibility settings, use rem for padding and layout spacing.

Top comments (0)