Skip to main content
Vlad
← Back to Articles

rem vs px vs vh: Choosing the Right CSS Units for Modern Front-End Development

A developer-focused guide breaking down CSS units like rem, px, vw, and vh — when to use each, and how they affect responsiveness and accessibility.

cssfrontendresponsivedesign systemsbest practices

Why CSS Units Matter

CSS units aren’t just a styling detail. They determine how your UI scales across devices, how readable your text is, and whether users who zoom or increase text size can still comfortably use your site.

Choosing the right unit makes your UI:

  • More accessible
  • Easier to scale and maintain
  • More predictable across devices and resolutions
  • Aligned with design system tokens and patterns

Let’s break down the most common units and their ideal use cases.

px — Pixels

Pixels are fixed-size units.

✅ Best use cases

  • Borders (1px)
  • Hairlines and dividers
  • Fine-tuned icon or control sizing

❌ Avoid for

  • Font sizes
  • Spacing
  • Layouts

Pixels don’t scale when users zoom text only, making them less accessible for typography.

rem — Root-Relative Units

rem scales based on the root (html) font size.

If the default browser size is 16px:

1rem = 16px
2rem = 32px
0.5rem = 8px

✅ Best use cases

  • Font sizes
  • Spacing (margins, padding, gaps)
  • Design tokens in component libraries
  • Consistent scalable UI systems
html {
  font-size: 100%; /* 16px */
}

h1 {
  font-size: 2.5rem; /* 40px */
}

p {
  margin-bottom: 1rem;
}

em — Element-Relative Units

em scales based on the parent element.

✅ Good for

  • Icon sizing relative to text (e.g., 1em)
  • Internal component spacing where scale should follow text size

❌ Avoid for

  • Global layout/sizing systems
  • Typography tokens

Nesting em can multiply sizes unexpectedly.

Viewport Units — vw, vh, vmin, vmax

Viewport units scale with screen size.

  • 1vw = 1% viewport width
  • 1vh = 1% viewport height

✅ Best use cases

  • Hero sections
  • Full-screen panels
  • Fluid typography
  • Responsive backgrounds

Mobile caution

Mobile browsers dynamically show/hide UI bars. Use modern safe variants:

height: 100svh;

% — Percentages

Percentage units scale relative to the parent element.

✅ Good for

  • Fluid widths (width: 100%)
  • Flexible containers

❌ Avoid for

  • Text sizing (can behave inconsistently)

Fluid Typography Example

Combine clamp(), vw, and rem for smart scaling:

h1 {
  font-size: clamp(2rem, 4vw, 4rem);
}

This means:

  • Minimum 2rem
  • Scales with viewport
  • Caps at 4rem

Practical Rules

Goal Use Avoid
Consistent text & spacing rem px, % (for text)
Component-local scaling em —
Thin borders px —
Full-height sections vh, svh %
Fluid headlines clamp() + vw Fixed sizes

Quick Cheatsheet

/* Typography */
font-size: 1rem;

/* Spacing */
padding: 1rem;
gap: 1.25rem;

/* Precise borders */
border-width: 1px;

/* Full-screen hero */
height: 100svh;

/* Responsive heading */
font-size: clamp(1.5rem, 3vw, 2.5rem);

Accessibility Notes

  • rem respects user font-size preferences
  • vw text can become too small on small screens if not clamped
  • Avoid px for type except for tiny UI elements

Your UI should adapt gracefully to user needs — scalable units help immensely.

Final Thoughts

Modern front-end systems mix units intentionally:

  • Use rem for foundation scale
  • em for local component-relative sizing
  • px for precision micro-elements
  • vw/vh for responsive and immersive layouts

Good unit choices support great UX, accessibility, and maintainable design systems.