CSS Units Cheat Sheet

CSS units can be confusing. Should you use px or rem? When does vw make sense? What about ch and ex? Picking the right unit makes the difference between a layout that breaks and one that gracefully adapts to every screen size.

This reference breaks CSS units into two categories — absolute and relative — with clear examples of when to use each. Bookmark this page for your next responsive design project.

Absolute Units

Absolute units are fixed-length values. They don't scale with the viewport, parent element, or font size. Use them for print stylesheets, borders, and situations where precision matters regardless of screen size.

Relative Units

Relative units scale based on the context — the viewport, parent element, or root font size. They are the foundation of responsive and accessible design.

Font-Relative Units

Viewport-Relative Units

Percentage Unit

When to Use Each Unit

The table below maps common CSS properties to their recommended units.

Practical Examples

Fluid Typography with clamp()

The clamp() CSS function lets you set a font size that scales between a minimum and maximum value. This is the modern way to do responsive typography without media queries.

/* Fluid heading: scales from 1.5rem to 3rem between 320px and 1200px viewports */
h1 {
  font-size: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  line-height: 1.1;
}

/* Fluid body text */
p {
  font-size: clamp(0.875rem, 0.75rem + 0.5vw, 1.125rem);
  line-height: 1.6;
}

Full-Height Hero Section (Mobile-Safe)

.hero {
  /* dvh = dynamic viewport height — handles mobile browser toolbar */
  min-height: 100dvh;
  /* Fallback for older browsers */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

Consistent Spacing with rem

:root {
  /* Set root font size. Browser default is 16px = 1rem */
  font-size: 100%; /* Respects user preferences */
}

.card {
  padding: 1.5rem;    /* = 24px at default font size */
  margin-bottom: 1rem; /* = 16px */
  border-radius: 0.5rem; /* = 8px */
  gap: 0.75rem;       /* = 12px grid gap */
}

h2 {
  font-size: 1.25rem; /* = 20px */
  margin-bottom: 0.5em; /* relative to h2 font size */
}

16:9 Aspect Ratio Box

.aspect-16-9 {
  /* Padding % is calculated from parent width */
  /* 9/16 = 56.25% */
  width: 100%;
  padding-bottom: 56.25%;
  position: relative;
  overflow: hidden;
}

.aspect-16-9 > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Perfectly Centered Modal

.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}

.modal {
  width: min(90vw, 600px);  /* 90% of viewport width, max 600px */
  max-height: 90dvh;        /* 90% of dynamic viewport height */
  overflow-y: auto;
  padding: 2rem;
  background: #fff;
  border-radius: 0.75rem;
}

calc() in Practice

The calc()function lets you mix units freely. It's extremely useful for fluid layouts where you need arithmetic operations on CSS values.

/* Sidebar + main: 250px sidebar, rest is main */
.main-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 2rem;
}

/* Full-width container with fixed gutters */
.container {
  width: calc(100% - 3rem);
  max-width: 1200px;
  margin-inline: auto;
}

/* Fluid typography alternative */
h1 {
  font-size: calc(1.5rem + 2vw);
}

/* Height minus header */
.content {
  min-height: calc(100dvh - 4rem);
}

/* Background that extends beyond content area */
.hero {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

Unit Comparison Table

A quick comparison of how different units behave at different scales. Assumes root font size of 16px and a 1200px wide viewport.

Common Mistakes & How to Avoid Them

CSS units seem simple until a layout breaks. These are the mistakes developers make most often — and the fixes that prevent them.

1. Using px for Font Sizes Hurts Accessibility

pxfont sizes ignore the user's browser font-size setting, so users who increase their default font size (often for vision reasons) see no change on your site. Use rem for font sizes — it scales with the root font size — and reserve px for borders, shadows, and 1px hairline rules that should stay crisp.

2. Confusing em with rem

rem is always relative to the root element font size (usually 16px), so it is predictable anywhere in the tree. em is relative to the currentelement's font size, and because it compounds, nested elements can produce surprising sizes: a 1.5em padding inside a 1.5em font becomes 2.25em of effective spacing. Use rem for global spacing and typography; use em deliberately when a component should scale with its own font size (icons, button padding).

3. Using 100vh for Mobile Full-Height Sections

On mobile browsers, 100vh refers to the largest viewport, which includes the area hidden behind the URL bar — so a 100vh section gets cut off or causes scroll jumps when the bar collapses. Use 100dvh (dynamic viewport height) for mobile full-height layouts, with 100svh as a fallback for older browsers.

4. Using vw for Font Sizes Without clamp()

A headline set to 4vw looks great on desktop but becomes unreadably small on phones and comically huge on ultrawide monitors. Wrap viewport units in clamp() with rem bounds: font-size: clamp(1.5rem, 4vw, 3rem). This gives you fluid scaling without ever crossing accessibility limits.

5. Expecting Percentage Heights to "Just Work"

height: 50% only works when the parent has an explicit height (not auto). A common trap is setting a child to 100% inside a parent whose height comes from content — the percentage resolves to autoand the layout collapses. If the parent's height is content-driven, use flexbox/grid stretch, min-height, or viewport units instead of percentages.