[Size Units Explained] What Are px, em, rem, %, vw, vh?

This article provides a clear and accessible overview of common CSS sizing units.

Author

Shohei Yano

CSS Units: px, em, rem, %, vw, vh and Modern Best Practices

CSS offers a range of units for sizing elements—absolute units like "px" and relative ones like "em", "rem", and "%". There are also viewport-based units such as "vw" and "vh". In recent years, new tools like the clamp() function, container queries, and additional viewport units have made CSS more flexible and accessible.

Key Takeaways

px (pixels) – An absolute unit. Useful for fixed sizes but does not scale with user font settings.
em – A relative unit based on the parent element's font-size. Great for modular scaling.
rem – Relative to the root html element's font-size. Useful for maintaining global consistency.
% – Percentage of the parent element's dimensions. Works with layout and font sizes.
vw/vh – Based on the width/height of the viewport. Ideal for fullscreen designs.
svw/svh/lvw/lvh/dvw/dvh – New units that adapt to mobile UI changes.
vmin/vmax, vi/vb – Useful for adjusting layout based on viewport aspect ratio and text direction.

Overview of Fundamental Units

px (Pixels)

The most straightforward unit in CSS. It represents a fixed size, making it ideal for borders and icon sizes. However, it doesn't respond to user browser settings like zoom or font size preferences.

em

Calculated relative to the font size of the parent element. Perfect for components with internal scaling. Be cautious, though—nested em values can become complex.

rem

Relative to the root html element's font size. It allows for predictable scaling across the entire site. It's best to define the root size in percentages (e.g., 100%) rather than fixed pixels for accessibility.

% (Percentage)

Calculated based on the parent element. Useful for setting width, height, and even font-size. Unlike em, percentage values do not accumulate through nesting.

vw/vh, vmin/vmax, vi/vb

Units that depend on the viewport size. vi and vb align with the inline and block axes respectively, making them suitable for text direction-aware layouts.

svw/svh/lvw/lvh/dvw/dvh

Modern units addressing dynamic interfaces. These account for mobile browser UI changes like collapsing address bars, helping prevent layout shifts.

Practical Techniques for Responsive and Accessible CSS Design

1. Using `clamp()` for Fluid Sizing

font-size: clamp(1rem, 2.5vw, 2rem);

With clamp(), you can set a minimum, ideal, and maximum size in one line, allowing smooth scaling. Use rem for min/max values to honor user settings.

2. Leveraging Container Queries

Container queries adjust styles based on the size of a containing element—not the entire viewport. Here's a basic example:

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

@container (width > 700px) {
  .card h2 {
    font-size: 2em;
  }
}

This allows components to adapt to the size of their container, improving reusability and maintainability.

3. Combining Units with Accessibility in Mind

Prefer em/rem for elements that should respond to user settings.
Use px for precise control on non-scaling parts like borders.
Always define html font-size in relative units to avoid overriding user preferences.

Summary

Mastering CSS units is essential for building flexible, modern, and user-friendly websites. By combining absolute and relative units wisely, and embracing modern tools like clamp() and container queries, you can: