CSS Units Reference Matrix
A definitive handbook covering the relationship between CSS reference pixels, font-relative scales, viewport dimensions, and physical print units.
All CSS Length Units
| Unit | Name | Category | Relative To | Formula / Screen Definition | Example |
|---|---|---|---|---|---|
| rem | Root Em | font | Root font size | px = rem × rootFontSize | 1rem |
| px | Pixel | absolute | CSS reference pixel | Canonical unit (identity) | 16px |
| em | Em | font | Parent/current font size | px = em × contextFontSize | 1em |
| pt | Point | absolute | 1/72 inch (CSS pixel ratio) | px = pt × (96 / 72) | 12pt |
| pc | Pica | absolute | 12 points = 16px | px = pc × 16 | 1pc |
| in | Inch | absolute | 96 CSS pixels | px = in × 96 | 1in |
| cm | Centimeter | absolute | 96 / 2.54 pixels | px = cm × (96 / 2.54) | 1cm |
| mm | Millimeter | absolute | 96 / 25.4 pixels | px = mm × (96 / 25.4) | 10mm |
| ex | x-Height | font | Font's x-height (approx. 0.5 × context) | px = ex × (contextFontSize × 0.5) | 2ex |
| ch | 0-Width | font | Font's '0' character width | px = ch × (contextFontSize × 0.5) | 20ch |
| vw | Viewport Width | viewport | Viewport width | px = (vw / 100) × viewportWidth | 10vw |
| vh | Viewport Height | viewport | Viewport height | px = (vh / 100) × viewportHeight | 50vh |
| vmin | Viewport Minimum | viewport | Smaller viewport dimension | px = (vmin / 100) × min(viewportWidth, viewportHeight) | 10vmin |
| vmax | Viewport Maximum | viewport | Larger viewport dimension | px = (vmax / 100) × max(viewportWidth, viewportHeight) | 10vmax |
| % | Percentage | relative | Context reference value | px = (% / 100) × referenceValue | 50% |
rem vs. em: The Real Difference
Both units scale dynamically with font sizes, but their reference elements differ significantly:
- rem (Root Em): Directly proportional to the font size of the root (
<html>) element only. It never compounds down the DOM tree. If the root is 16px,1.5remis always 24px anywhere in the application. - em (Element Em): Relative to the font size of its immediate parent or current element. This causes compounding when nested: 3 levels of
1.5emfont sizes will scale by 1.5 × 1.5 × 1.5 = 3.375×!
💡 Rule of thumb: Use rem for layout, spacing, and base font sizes for predictability. Use em when a component (like a button icon or badge) should scale in proportion to its parent text.
Viewport Units (vw, vh, vmin, vmax)
Viewport units represent a percentage of the browser window’s initial containing block:
1vw= 1% of the viewport width. On a 1440px monitor,10vw = 144px.1vh= 1% of the viewport height. On a 900px screen,50vh = 450px.1vmin= 1% of the smaller dimension. Ideal for square hero elements or mobile responsive bounds.1vmax= 1% of the larger dimension.
⚠️ Notice: Converting viewport units to pixels requires knowledge of the active viewport resolution. DevCraft asks for this context so your calculations are mathematically exact.
Physical Units & The CSS Reference Pixel
In CSS, units like inches (in), centimeters (cm), millimeters (mm), points (pt), and picas (pc) are strictly mapped to the CSS reference pixel at 96 DPI:
Because monitors have varying pixel densities (retina displays with 200–400 physical hardware pixels per inch), holding a physical ruler up to a screen will not match a CSS centimeter. These units are intended for print media stylesheets (@media print) or fixed coordinate systems.