CSS Units Guide: px, rem, em, vh, vw and When to Use Each

Understanding CSS Units

CSS units determine the size of elements on your webpage. Choosing the right unit affects responsiveness, accessibility, and maintainability. Units fall into two main categories: absolute and relative.

Absolute Units

Pixels (px)

Pixels are the most common absolute unit. One pixel corresponds to one dot on the screen (though this is simplified - actual device pixels may differ).

.element {
  width: 200px;
  height: 100px;
  border: 2px solid black;
}

Pros:

• Precise control over sizing
• Easy to understand and use
• Consistent across different contexts

Cons:

• Not accessible (doesn't respect user font size preferences)
• Less flexible for responsive design
• Fixed sizing can break layouts on different devices

Best for: Border widths, shadows, fine-tuned spacing

Other Absolute Units

cm  - Centimeters mm  - Millimeters in  - Inches (1in = 96px) pt  - Points (1pt = 1/72 of an inch) pc  - Picas (1pc = 12pt)

These are rarely used in web design but can be useful for print stylesheets.

Relative Units

REM (Root EM)

REM units are relative to the root element's (html) font size. By default, 1rem = 16px, but this respects user browser settings.

/* Root font size */
html {
  font-size: 16px; /* 1rem = 16px */
}

.heading {
  font-size: 2rem;    /* 32px */
  margin-bottom: 1rem; /* 16px */
}

.text {
  font-size: 1rem;    /* 16px */
  padding: 0.5rem;    /* 8px */
}

Pros:

• Accessible - respects user font size preferences
• Consistent sizing throughout the page
• Easy to scale entire design by changing root font size
• Predictable - always relative to root

Cons:

• Can be confusing at first
• Requires mental math to convert from pixels

Best for: Font sizes, spacing (margin, padding), component dimensions

EM (Relative to Parent)

EM units are relative to the font size of the parent element. This creates a cascading effect that can be useful but also tricky.

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em;  /* 24px (16px × 1.5) */
  padding: 1em;      /* 24px (relative to child's font-size) */
}

.grandchild {
  font-size: 1.5em;  /* 36px (24px × 1.5) - Compounding! */
}

Pros:

• Creates proportional relationships
• Useful for component-based scaling
• Good for typography rhythm

Cons:

• Compounding can be confusing
• Hard to predict sizes in deeply nested elements
• Debugging can be difficult

Best for: Padding/margin relative to font size, media query breakpoints

Percentage (%)

Percentage units are relative to the parent element's corresponding property.

.container {
  width: 1200px;
}

.half-width {
  width: 50%;        /* 600px (50% of parent) */
}

.text {
  font-size: 120%;   /* 1.2× parent font size */
  line-height: 150%; /* 1.5× current font size */
}

Best for: Fluid layouts, responsive images, relative sizing

Viewport Units

VW (Viewport Width)

1vw = 1% of the viewport width. Great for full-width sections and responsive typography.

.hero {
  width: 100vw;      /* Full viewport width */
  padding: 5vw;      /* Responsive padding */
}

.responsive-text {
  font-size: 4vw;    /* Scales with viewport */
  /* But add min/max for readability */
  font-size: clamp(1rem, 4vw, 3rem);
}

VH (Viewport Height)

1vh = 1% of the viewport height. Perfect for full-height sections.

.full-screen {
  height: 100vh;     /* Full viewport height */
}

.half-screen {
  min-height: 50vh;  /* At least half screen */
}

VMIN and VMAX

/* vmin: 1% of viewport's smaller dimension */
.square {
  width: 50vmin;
  height: 50vmin;    /* Always square */
}

/* vmax: 1% of viewport's larger dimension */
.cover {
  width: 100vmax;
  height: 100vmax;   /* Always covers viewport */
}

Modern CSS Units

CH (Character Width)

1ch = width of the "0" (zero) character in the current font. Perfect for controlling line lengths for readability.

.readable-text {
  max-width: 65ch;   /* Optimal line length */
  /* 45-75 characters per line is ideal for readability */
}

EX (x-height)

1ex = height of the lowercase "x" in the current font. Rarely used but useful for vertical alignment.

Responsive Design Patterns

Fluid Typography

/* Using clamp() for responsive typography */
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  /* min: 2rem, preferred: 5vw, max: 4rem */
}

/* Using calc() for smooth scaling */
p {
  font-size: calc(1rem + 0.5vw);
}

Container Queries (Modern)

.container {
  container-type: inline-size;
}

.card {
  padding: 1rem;
}

/* Card adjusts based on container, not viewport */
@container (min-width: 400px) {
  .card {
    padding: 2rem;
    font-size: 1.25rem;
  }
}

Best Practices Decision Tree

For Font Sizes

• 1st choice: rem (accessible, scalable)
• 2nd choice: em (component-relative)
• Avoid: px (not accessible)

For Spacing (Margin/Padding)

• 1st choice: rem (consistent spacing system)
• Alternative: em (relative to font size)
• Small values: px (1-2px for fine details)

For Widths

• Containers: % or max-width in rem/px
• Full width: 100vw
• Content width: ch for text blocks

For Heights

• Full height: 100vh
• Minimum height: min-height with rem/px
• Usually: Let content determine height

Common Conversion

Default browser font size: 16px px    rem 8     0.5 12    0.75 14    0.875 16    1 18    1.125 20    1.25 24    1.5 32    2 48    3 64    4

CSS Custom Properties for Units

:root {
  /* Spacing scale */
  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */
  
  /* Typography scale */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
}

.button {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--text-base);
}

Accessibility Considerations

• Always use rem/em for font sizes: Respects user preferences
• Test with zoomed browsers: Ensure layout doesn't break at 200% zoom
• Avoid absolute units for text: Especially avoid px for body text
• Use relative units for breakpoints: em-based media queries scale better

Try Our Development Tools

Build better websites with our developer tools: