Every CSS unit, grouped by what it's measured against. Tap any to copy it.
| Unit | Equals | Notes |
|---|---|---|
| px | 1 CSS pixel | The everyday absolute unit |
| pt | 1/72 inch | Print; common in typography |
| in | 96px | Inch — print |
| cm | 37.8px | Centimetre — print |
| mm | 3.78px | Millimetre — print |
| Unit | Relative to | Notes |
|---|---|---|
| em | Element's font size | Compounds when nested |
| rem | Root (html) font size | Doesn't compound — preferred |
| ch | Width of the '0' glyph | Handy for text column widths |
| ex | x-height of the font | Rarely used |
| Unit | Relative to | Notes |
|---|---|---|
| vw | 1% of viewport width | Responsive widths |
| vh | 1% of viewport height | Full-height sections |
| vmin | 1% of the smaller side | Smallest viewport dimension |
| vmax | 1% of the larger side | Largest viewport dimension |
| % | The parent / context | Percentage of the container |
| Unit | Measures | Notes |
|---|---|---|
| fr | A fraction of free space | CSS Grid track sizing |
| deg | Degrees | Rotations and gradients |
| turn | 1 full turn = 360deg | Rotations |
| s | Seconds | Animations and transitions |
| ms | Milliseconds | Animations and transitions |
CSS units split into two camps. Absolute units like px are fixed sizes — a pixel is a pixel regardless of context — which makes them predictable but unresponsive. Relative units are measured against something else, which is what makes layouts adapt. The two that matter most for type are em and rem: em is relative to the element's own font size and compounds when you nest elements, while rem is always relative to the root font size, so it stays predictable — which is why rem is the usual choice for scalable typography and spacing. For layout, the viewport units (vw, vh) size things against the screen, and fr distributes leftover space across CSS Grid tracks. A good default is rem for type and spacing, % or fr for layout widths, and px only where a fixed size is genuinely wanted, like a 1px border.