CSS Units Explained: px, em, rem, vw, and vh

Choosing the right CSS unit affects layout, typography, spacing, and responsiveness. This guide breaks down the major CSS units and shows when each one is useful.

Absolute Units: px

px (pixels) is the most commonly used CSS unit. It is an absolute unit, meaning 1px always represents one pixel on the screen. Because it is fixed, px gives you precise control over sizing.

.box {
  width: 300px;
  height: 200px;
  font-size: 16px;
}

When to use px: fixed-width borders, shadows, small precise adjustments like 1px lines and icon sizes.

When to avoid px: font sizes (use rem instead) and layout widths on responsive designs.

Relative Units: em and rem

em — Relative to the Element

em is a relative unit. It is calculated based on the font-size of the current element. If no font-size is set, it falls back to the browser default of 16px.

/* If parent has font-size: 20px */
.child {
  font-size: 2em; /* = 40px */
  padding: 1.5em; /* = 30px */
}

The problem with em: When you nest multiple elements, em calculations compound. A 1.2em inside a 1.2em inside a 1.2em quickly becomes unpredictable.

.parent {
  font-size: 16px;
}
.child {
  font-size: 1.2em;
} /* 19.2px */
.grandchild {
  font-size: 1.2em;
} /* 23.04px — surprise! */

rem — Relative to the Root

rem stands for “root em.” Unlike em, rem is always relative to the root html element’s font-size.

html {
  font-size: 16px;
}

h1 {
  font-size: 2.4rem;
} /* 38.4px */
p {
  font-size: 1rem;
} /* 16px */
small {
  font-size: 0.875rem;
} /* 14px */

Why rem is better than em for most cases:

• No compounding issue — all values reference the same base
• Predictable across nested elements
• Users can scale your entire UI by changing their browser font-size

Common rem setup for easier math:

html {
  font-size: 62.5%; /* 62.5% of 16px = 10px, so 1rem = 10px */
}

h1 {
  font-size: 2.4rem;
} /* 24px */
p {
  font-size: 1.6rem;
} /* 16px */

em vs rem: When to Use Each

Viewport Units: vw, vh, vmin, vmax

vw and vh

1vw equals 1% of the viewport width. 1vh equals 1% of the viewport height.

.hero {
  width: 100vw; /* full width */
  height: 100vh; /* full height */
  font-size: 5vw; /* scales with viewport */
}

Common use cases: full-screen hero sections, responsive typography, edge-to-edge layouts.

Mobile caution: On mobile browsers, 100vh can be taller than the visible area because it includes the address bar. Use 100dvh (dynamic viewport height) in modern browsers to fix this.

vmin and vmax

vmin is 1% of the viewport’s smaller dimension. vmax is 1% of the larger dimension.

When to use: elements that must always fit on screen, square elements that adapt to orientation, typography that should scale based on the smaller dimension.

Accessibility and User Settings

CSS unit choices affect accessibility. Users may increase their browser font size, zoom the page, or use system-level display scaling. Layouts that rely too heavily on fixed pixels can become harder to read when those settings change.

For body text and common UI spacing, rem is usually a strong default because it respects the root font size. If a user increases the browser default from 16px to 20px, rem-based type and spacing can scale more predictably.

Use px carefully for text. A 12px label may look tidy in a mockup but become hard to read on mobile screens, high-density displays, or accessibility settings. For tiny visual details such as borders, shadows, and icon strokes, px is still practical.

Practical Unit Strategy for Real Projects

A maintainable frontend usually mixes units instead of trying to use one unit everywhere.

Use this pattern as a starting point:

• rem for typography, section spacing, and design-system tokens
• em for component padding that should scale with local text size
• px for borders, hairlines, and precise icon dimensions
• % for flexible columns and container-relative widths
• vw, vh, or dvh for viewport-aware sections
• clamp() when a value should scale but stay within safe limits

For example:

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

This gives responsive scaling without letting the heading become unreadably small or comically large.

Quick Reference Cheat Sheet

Convert CSS Units Instantly

Need to convert between px, em, rem, vw, and vh? Use our free CSS Unit Converter to convert values instantly in your browser with a live preview.

Debugging Unit Problems

When a layout feels wrong, inspect the unit choice before changing random values. If text does not scale well, check for fixed px font sizes. If nested components feel oversized, check whether em values are compounding. If a mobile hero is too tall, check whether 100vh should become 100dvh or a min-height with content-aware spacing.

Unit problems are often system problems. Once you choose consistent defaults, future components become easier to size and review.

Related Guides

• CSS unit conversion for responsive design shows how to turn unit knowledge into a practical layout workflow.
• Color conversion guide for web designers covers the color side of frontend design tokens.
• Browse related utilities in the Design / Frontend Tools collection.

Conclusion

The best approach is to combine units strategically. Use rem for font sizes and global spacing. Use em for component-level padding and margins that should scale with text. Use px for borders and fixed-size elements. Use vw and vh for full-screen layouts and responsive typography. Understanding when to use each CSS unit will make your designs more responsive, accessible, and maintainable across all devices and screen sizes.

Related QuickToolFlow Tools

• CSS Unit Converter for converting common CSS units.
• Color Converter for translating design colors into CSS-ready formats.
• Lorem Image Placeholder for testing fixed and responsive image dimensions.