The CSS Unit Landscape
CSS offers more than a dozen unit types, each suited to different contexts. Understanding when to use each unit is fundamental to building responsive, accessible, and maintainable stylesheets.
Units fall into two categories: Absolute units which have a fixed size regardless of context (px, pt, cm, mm, in), and Relative units which have a size relative to something else (rem, em, %, vw, vh, ch, ex).
Pixels (px): The Foundation
A CSS pixel (1px) was originally intended to represent one physical pixel on a screen. On modern high-DPI (Retina) displays, this is no longer true. The CSS pixel is now defined as approximately 1/96 of an inch at arm's length.
Use px for borders, box shadows, specific fixed-size elements like icons, and when you explicitly do not want the size to scale with user preferences.
rem: The Accessibility Unit
rem (root em) is relative to the font size of the html element. The browser's default root font size is 16px, meaning 1rem = 16px unless changed.
html { font-size: 16px; } /* default */
h1 { font-size: 2rem; } /* 32px */
p { font-size: 1rem; } /* 16px */
.small { font-size: 0.75rem; } /* 12px */
The accessibility advantage is that users can set their preferred base font size in browser settings. Elements sized in rem respect this preference; elements sized in px do not. For accessibility compliance (WCAG), use rem for font sizes.
em: The Contextual Unit
em is relative to the font size of the current element. This can cascade in unexpected ways:
.parent { font-size: 20px; }
.child { font-size: 0.75em; } /* 15px (0.75 x 20) */
.grandchild { font-size: 0.75em; } /* 11.25px (0.75 x 15) */
em is useful for spacing (padding, margin) that should scale proportionally with the element's own text size. Prefer rem over em for font sizes to avoid cascading complexity.
Viewport Units: vw, vh, vmin, vmax
Viewport units are relative to the browser window size:
| Unit | Definition |
|---|---|
| 1vw | 1% of viewport width |
| 1vh | 1% of viewport height |
| 1vmin | 1% of the smaller dimension |
| 1vmax | 1% of the larger dimension |
| 1svh | 1% of small viewport height (mobile) |
| 1dvh | 1% of dynamic viewport height |
Common uses:
.hero { height: 100vh; } /* Full-screen hero section */
.fluid-text { font-size: 4vw; } /* Text scales with window */
.max-width { max-width: 90vw; } /* 90% of viewport width */
On mobile browsers, 100vh includes the browser chrome. Use 100svh for content that should fit without scrolling on mobile.
Percentage (%): Parent-Relative
Percentage values are relative to the parent element:
.container { width: 800px; }
.child { width: 50%; } /* 400px */
For padding and margin, percentage values are relative to the parent's width (even for vertical padding/margin):
.aspect-ratio-box {
padding-top: 56.25%; /* Creates 16:9 aspect ratio */
}
ch: Character-Based Width
1ch equals the width of the "0" character in the current font:
input { width: 20ch; } /* Fits ~20 characters */
p { max-width: 65ch; } /* Optimal reading line length */
The optimal reading line length for body text is 45-75 characters (about 65ch in most fonts).
CSS Unit Quick Reference
| Unit | Relative To | Best For |
|---|---|---|
| px | Screen pixels | Borders, shadows, icons |
| rem | Root font size | Font sizes, spacing |
| em | Parent font size | Component-relative spacing |
| % | Parent element | Fluid layouts |
| vw/vh | Viewport size | Full-screen layouts, fluid text |
| ch | "0" character width | Input sizing, line length |
Conversion Formulas
px to rem: rem = px / root-font-size
rem to px: px = rem * root-font-size
px to vw: vw = (px / viewport-width) * 100
px to em: em = px / current-element-font-size
-> Try the CSS Unit Converter