CSS Units Reference
Every CSS length unit with use cases and 2026 additions.
By Λ · Updated May 18, 2026
Absolute Units
Fixed sizes that do not scale with anything. Use sparingly; they fight responsive design.
| Unit | Definition | When to use |
|---|---|---|
| px | Pixels (1px = 1/96in on screen) | Borders, fine details, sometimes margins. Most common absolute unit. |
| pt | Points (1pt = 1/72in) | Print stylesheets only. |
| in / cm / mm | Inches / centimeters / millimeters | Print stylesheets only. |
| pc | Picas (1pc = 12pt) | Print typography. Rarely used in web. |
| Q | Quarter-millimeters | Very precise print. Almost never used. |
Font-relative Units
Sizes relative to a font measurement. Scale with user preferences when paired with rem.
| em | Relative to current element's font-size. 1em = parent font-size in most cases. |
| rem | Relative to ROOT element's font-size (usually 16px). The right default for most sizing. |
| ex | Height of lowercase 'x' in current font. Rare. |
| ch | Width of '0' (zero) character in current font. Useful for content width: max-width: 65ch for readable line length. |
| cap | Cap height (uppercase letter height) of current font. 2023+ unit. |
| ic | Width of CJK water ideograph. For non-Latin typography. |
| lh | Line-height of current element. 2022+ unit. |
| rlh | Line-height of root element. 2022+ unit. |
Viewport Units
Sizes relative to the viewport. The 2022 addition of dvh/svh/lvh fixed the mobile-browser-toolbar problem.
| vw | 1% of viewport width |
| vh | 1% of viewport height (originally; on mobile this can jump when toolbar shows/hides) |
| vmin | 1% of viewport's smaller dimension |
| vmax | 1% of viewport's larger dimension |
| dvh / dvw | Dynamic viewport. Updates as mobile toolbar shows/hides. The 2026 default. |
| svh / svw | Small viewport (toolbar visible). Use for elements that must always fit. |
| lvh / lvw | Large viewport (toolbar hidden). Maximum size of viewport. |
| dvi / svi / lvi | Inline equivalents (logical, respects writing-mode). |
| dvb / svb / lvb | Block equivalents. |
Grid units
| fr | Fraction of remaining space in CSS Grid. 1fr 2fr = 1:2 ratio of available space. |
| minmax(min, max) | Function for flexible grid tracks. minmax(200px, 1fr). |
Other
| % | Percentage of containing block. Meaning depends on property: width=container width, font-size=parent font-size, etc. |
| deg / rad / turn / grad | Angle units. 1turn = 360deg. |
| s / ms | Time units for animations and transitions. |
| Hz / kHz | Frequency units (for speech CSS, rare). |
| dpi / dpcm / dppx | Resolution units, mainly for media queries. |
Recipes I use daily
- Readable body text width:
max-width: 65ch - Full-page hero on mobile (no toolbar jump):
height: 100dvh - Fluid font size:
font-size: clamp(1rem, 0.5rem + 2vw, 2rem) - Responsive grid:
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) - Equal-height columns:
grid-auto-rows: 1fr - Square aspect ratio:
aspect-ratio: 1(a unit-less number works too) - Card with consistent padding:
padding: 1rem(rem, not em, to scale with root) - Border-radius proportional to font:
border-radius: 0.5em
Last updated