Why Your CSS Should Use Rem Units and How to Convert From Pixels

Source: Dev.to

The Conversion

1rem = the root element’s font size (usually 16 px by default).

To convert:

rem = px / 16

Reference Table

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
28px = 1.75rem
32px = 2rem
36px = 2.25rem
40px = 2.5rem
48px = 3rem
64px = 4rem

Where to Use rem, Where to Keep Pixels

Use rem for

• Font sizes (always)
• Spacing and padding on text‑adjacent elements
• Max‑widths for readable text containers
• Media‑query breakpoints (though these always use the browser default)

Keep Pixels for

• Borders (a 1 px border should stay 1 px)
• Box shadows
• Very small decorative elements
• Outlines

Reasoning: Borders and shadows are visual decorations that don’t need to scale with text size. A 1 px border remains visible at any zoom level, whereas a 14 px font becomes unreadable when zoomed.

CSS Custom Properties Make This Easier

Define a spacing scale with custom properties instead of memorizing rem values:

:root {
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
}

.card {
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  font-size: 1rem;
}

Now you’re thinking in a design system rather than individual pixel values, and every value automatically scales with user preferences.

PostCSS and Sass Functions

Sass Function

@function rem($px) {
  @return #{$px / 16}rem;
}

.heading {
  font-size: rem(24);      // 1.5rem
  margin-bottom: rem(16); // 1rem
}

PostCSS

Use the postcss-pxtorem plugin to automatically convert px values in your compiled CSS to rem based on a configurable root value.

Testing Your rem Implementation

1. Open your browser settings.
2. Change the default font size (e.g., to 24 px).
3. Reload your site.

All elements using rem should scale proportionally; those using pixels will stay fixed. If navigation text grows but its container doesn’t, you’ve found a pixel/rem inconsistency.

A quick converter is available at – it handles single values and batch conversions with any base size. Keep it open while writing CSS to save time.