CSS offers a rich vocabulary for expressing measurements, from physical dimensions to temporal durations and even angular rotations. Understanding these units is fundamental to building responsive, accessible, and maintainable websites.
The landscape has evolved significantly beyond simple pixel values. Container query units and dynamic viewport units enable truly component-driven responsive design, reflecting the web's progression from fixed-width layouts to fluid, user-centric experiences. Whether you're sizing typography, creating fluid layouts with CSS Grid, or animating interface elements, the units you choose directly impact how your designs adapt across devices and user preferences.
This guide explores every CSS unit category, explaining when to use each and how they interact with modern browser features to create performant, accessible interfaces. For comprehensive documentation on these standards, see the MDN CSS Values reference.
Absolute Units
Absolute units in CSS represent fixed physical measurements that don't scale with viewport size, font settings, or parent elements. These units derive from real-world measurements and were originally designed for print-oriented styling, though pixels have become the de facto standard for screen-based designs.
| Unit | Name | Definition |
|---|---|---|
| px | Pixels | 1/96th of an inch (CSS reference pixel) |
| cm | Centimeters | 1cm = 37.8px approximately |
| mm | Millimeters | 1mm = 3.78px approximately |
| in | Inches | 1in = 96px exactly |
| pt | Points | 1pt = 1/72nd of an inch |
| pc | Picas | 1pc = 12 points |
| Q | Quarter-millimeters | 1Q = 1/40th of a centimeter |
When to Use Absolute Units
Pixels provide predictable, consistent sizing that designers often appreciate. They're excellent for borders, shadows, and precise spacing where exact measurements matter. However, pixels don't adapt to user font size preferences, which can create accessibility barriers for users who need larger text. The CSS Values and Units Module Level 4 introduces newer units to address these limitations while maintaining backward compatibility.
Physical units like centimeters, millimeters, and inches exist primarily for print stylesheets where physical dimensions matter. For screen-based designs, pixels provide sufficient precision without the complexity of converting physical measurements. The key insight is that absolute units serve specific purposes--they provide fixed sizing when intentional, not when developers default to familiar values without consideration.
1/* Fixed sizing for precise layouts */2.box {3 width: 300px;4 padding: 20px;5 border: 1px solid #ccc;6}7 8/* Print-oriented physical units */9@media print {10 .page {11 width: 210mm;12 height: 297mm;13 margin: 1cm;14 }15}Font-Relative Units
Font-relative units scale proportionally with font metrics, making them ideal for typography and spacing that should maintain visual relationships with text. These units respond to both inherited and root font sizes, enabling consistent scaling across component hierarchies in modern responsive web design.
| Unit | Reference Point | Use Case |
|---|---|---|
| em | Element's font size | Component-relative spacing |
| rem | Root (html) font size | Typography and layout spacing |
| ex | x-height of the font | Rarely used, font-dependent |
| ch | Width of '0' character | Character-based container widths |
| cap | Cap height of the font | Uppercase-relative sizing |
| lh | Element's line-height | Vertical rhythm spacing |
| rlh | Root line-height | Consistent vertical rhythm |
The rem (root em) unit provides the solution to em's compounding complexity. Rem values scale relative to the font size of the root html element, not the current element. This single reference point creates predictable scaling throughout a document.
Using rem for typography and layout spacing enables systematic scaling through a single configuration point. Setting the root font size and expressing all other measurements in rem creates coherent, proportional designs that respond consistently to user preference adjustments. The root reference also simplifies calculations--1.5rem always means one-and-a-half times the root font size, regardless of nesting depth.
Modern best practices often recommend rem as the primary unit for typography, with em reserved for component-specific spacing that should scale with individual component text sizes. This approach aligns with accessibility requirements while maintaining design consistency.
1/* Typography using rem for systematic scaling */2html {3 font-size: 16px; /* Base size */4}5 6h1 { font-size: 2.5rem; } /* 40px */7h2 { font-size: 2rem; } /* 32px */8h3 { font-size: 1.5rem; } /* 24px */9 10/* Component-relative spacing with em */11.button {12 padding: 0.5em 1em;13 font-size: 1.125rem;14}15 16/* Character-based width for readable line lengths */17.prose {18 max-width: 65ch;19}Viewport Units
Viewport units size elements relative to the browser viewport dimensions, enabling truly fluid layouts that adapt to the available screen space. These units have evolved to address various viewport measurement scenarios, including dynamic viewport considerations for mobile browsers with address bars that appear and disappear during scroll.
For mobile optimization best practices, Google's web.dev guide on sizing units provides comprehensive guidance on implementing these units effectively.
| Unit | Description | Use Case |
|---|---|---|
| vw | 1% of viewport width | Full-width sections |
| vh | 1% of viewport height | Full-viewport hero sections |
| dvh | 1% of dynamic viewport height | Mobile-friendly viewport sizing |
| svh | 1% of smallest viewport height | Conservative mobile sizing |
| lvh | 1% of largest viewport height | Maximum mobile viewport |
| vmin | 1% of smaller viewport dimension | Aspect-ratio-based sizing |
| vmax | 1% of larger viewport dimension | Maximum aspect-ratio sizing |
| vi | Viewport inline dimension | Logical writing-mode aware |
| vb | Viewport block dimension | Logical writing-mode aware |
1/* Full-viewport hero section */2.hero {3 min-height: 100vh;4 display: flex;5 align-items: center;6 justify-content: center;7}8 9/* Dynamic viewport for mobile */10.mobile-section {11 min-height: 100dvh;12}13 14/* Aspect-ratio-based square element */15.square {16 width: 100vmin;17 height: 100vmin;18}19 20/* Fluid typography with viewport units */21.fluid-text {22 font-size: clamp(1rem, 5vw, 2rem);23}Container Query Units
Container query units represent a paradigm shift in responsive design, sizing elements relative to their container rather than the viewport. This enables true component-driven responsive design where components adapt to their available space regardless of where they're placed in the layout, a practice that complements our custom web development approach.
| Unit | Reference Point | Use Case |
|---|---|---|
| cqw | 1% of container width | Proportional component width |
| cqh | 1% of container height | Proportional component height |
| cqi | 1% of container inline size | Logical inline dimension |
| cqb | 1% of container block size | Logical block dimension |
| cqmin | Smaller of cqi or cqb | Aspect-ratio-based sizing |
| cqmax | Larger of cqi or cqb | Maximum aspect-ratio sizing |
1/* Define a container */2.card-grid {3 container-type: inline-size;4 container-name: card;5}6 7/* Use container query units */8.card-title {9 font-size: clamp(1rem, 5cqw, 1.5rem);10}11 12.card-content {13 padding: 1cqi; /* 1% of container inline size */14}15 16/* Responsive grid based on container size */17@container card (min-width: 400px) {18 .card {19 display: grid;20 grid-template-columns: 1fr 2fr;21 }22}Angle, Time, and Other CSS Units
Beyond length measurements, CSS supports units for angles, time, frequency, and resolution. These units serve specialized contexts including animations, media queries, and print styles, adding depth to the web development toolkit. Our front-end development services leverage these modern CSS capabilities to build sophisticated user interfaces.
| Unit | Description | Use Case |
|---|---|---|
| deg | Degrees (360 per circle) | Transform rotations, gradients |
| grad | Gradians (400 per circle) | Specialized cartographic use |
| rad | Radians (2π per circle) | Mathematical rotations |
| turn | Turns (1 per circle) | Full rotations (most readable) |
| Unit | Description | Use Case |
|---|---|---|
| s | Seconds | Animation and transition durations |
| ms | Milliseconds | Short durations (1s = 1000ms) |
| Unit | Description | Use Case |
|---|---|---|
| dpi | Dots per inch | Physical display density |
| dpcm | Dots per centimeter | Metric display density |
| dppx | Dots per pixel | Device pixel ratio (2x, 3x) |
| Unit | Description | Use Case |
|---|---|---|
| fr | Fraction of available space | Grid layout track sizing |
1/* Rotation using turns (most readable) */2.spin {3 transform: rotate(0.25turn);4}5 6/* Animation duration */7.fade-in {8 animation: fadeIn 300ms ease-in-out;9}10 11/* High-DPI media query */12@media (min-resolution: 2dppx) {13 .retina-image {14 background-image: url(image-2x.png);15 }16}17 18/* Grid layout with fr units */19.grid {20 display: grid;21 grid-template-columns: 1fr 2fr 1fr;22 gap: 1rem;23}Best Practices for Modern CSS
Selecting appropriate units requires understanding their behaviors and implications for responsiveness, accessibility, and maintainability. Modern CSS development emphasizes relative units for most contexts while preserving pixels for specific use cases where intentional fixed sizing serves the design goals.
Typography: Use rem
Use rem for typography to enable systematic scaling through root font size while respecting user preferences and accessibility needs.
Component Spacing: Use em
Use em for component-relative spacing like button padding, where scaling should match the component's own text size.
Layout Spacing: Use rem
Use rem for layout margins, padding, and gaps to maintain consistent vertical rhythm throughout the design system.
Component Layout: Use container units
Use container query units (cqw, cqh, cqi) for component layouts that should adapt to their container's available space.
Full Sections: Use viewport units
Use viewport units (dvh, dvw) for full-viewport hero sections and layouts that should span the complete viewport.
Avoid px for Everything
Avoid relying exclusively on pixels, which creates accessibility barriers and prevents fluid responsive adaptation.
Accessibility Implications
Unit selection directly impacts accessibility outcomes. Relative units that respect user preferences enable accessible experiences, while absolute units that ignore preferences can create barriers for users with visual impairments who rely on adjusted font sizes for readability.
Respect User Preferences
Users with visual impairments adjust browser font sizes. Designs using rem for typography scale proportionally, maintaining visual hierarchy.
Browser Zoom vs. Font Size
Browser zoom magnifies everything proportionally. Font size preferences affect only text unless em units cascade through the design.
Touch Target Sizes
Maintain minimum 44×44 CSS pixel touch targets for interactive elements. Relative units help maintain accessible targets as settings change.
Readability Line Lengths
Use ch units to constrain line lengths to 45-75 characters for optimal readability across font choices and sizes.
Frequently Asked Questions
CSS Units FAQ
Conclusion
CSS provides a comprehensive vocabulary for expressing measurements. From pixels to container query units, understanding each unit's behavior enables intentional, effective styling decisions that serve both design goals and user needs.
Modern CSS development emphasizes relative units--rem for typography, container query units for component layouts, and viewport units for full-viewport sections. This relative approach creates more maintainable, accessible, and responsive designs than pixel-based approaches that create rigidity and accessibility barriers.
The key insight is that unit choice carries meaning and consequence. Choosing pixels because they're familiar differs from choosing pixels because fixed sizing serves a specific purpose. Understanding the full range of available units and their behaviors empowers developers to make deliberate choices that serve their designs and users effectively.
We encourage experimentation with these modern CSS units in your projects. Start with rem-based typography, explore container queries for component architecture, and embrace dynamic viewport units for mobile-first experiences. Each unit serves a purpose--discover how they can elevate your responsive web development workflow. For additional learning resources on modern CSS techniques, explore our web development resources.