CSS Units Reference: px, em, rem, %, vw, vh and More
CSS length units come in two families: absolute units fixed to a physical size, and relative units that scale with the font, the parent, or the viewport. For responsive design you'll mostly reach for the relative ones — especially rem, %, and the viewport units.
Updated 2026-07-06
Absolute units
| Unit | Meaning |
|---|---|
| px | Pixels — the base unit for screens. 1px is one device-independent pixel. |
| pt | Points — 1/72 inch. Common in print stylesheets. |
| in | Inches — 1in = 96px = 2.54cm. |
| cm | Centimeters — mostly for print. |
| mm | Millimeters — mostly for print. |
| pc | Picas — 1pc = 12pt = 1/6 inch. Rare. |
Relative units
| Unit | Meaning |
|---|---|
| % | Percentage of the parent element's corresponding value. |
| em | Relative to the element's own font size. 1.5em = 1.5× the font size. |
| rem | Relative to the root (html) font size. Predictable for consistent scaling. |
| ex | The x-height of the current font (rarely used). |
| ch | The width of the '0' character in the current font. |
| vw | 1% of the viewport width. |
| vh | 1% of the viewport height. |
| vmin | 1% of the smaller viewport dimension (width or height). |
| vmax | 1% of the larger viewport dimension. |
| fr | A fraction of the free space in a CSS Grid container. |
em vs. rem: the key distinction
Both scale with font size, but em is relative to the current element's font size (so it compounds through nested elements), while rem is always relative to the root font size (so it stays predictable no matter how deeply nested). When in doubt, rem for sizing and spacing gives the fewest surprises.
Related tools