CSS Units Table
| Unit | Type | Relative to / Definition |
|---|---|---|
| em | font-relative | Font size of the parent element (2em = 2× parent font size) |
| rem | font-relative | Font size of the root element (html); default 16px |
| ex | font-relative | x-height of the current font |
| ch | font-relative | Width of the 0 character in the current font |
| px | absolute | 1/96 of an inch (CSS reference pixel) |
| pt | absolute | 1/72 of an inch = 1.333px |
| pc | absolute | Pica = 12pt = 16px |
| in | absolute | Inch = 96px = 72pt |
| cm | absolute | Centimetre = 37.8px |
| mm | absolute | Millimetre = 3.78px |
| vw | viewport | 1% of viewport width |
| vh | viewport | 1% of viewport height |
| vmin | viewport | 1% of the smaller viewport dimension |
| vmax | viewport | 1% of the larger viewport dimension |
| % | parent-relative | Percentage of the parent element's corresponding property |
CSS has 15 length units, and choosing wrong is the most common accessibility mistake in front-end code. The units fall into three families: font-relative (em, rem) that scale with user preferences, absolute (px, pt, cm) that do not, and viewport (vw, vh) that track the browser window.
The unit you pick for font-size determines whether a user who sets their browser to 24px default gets readable text or a frustratingly small page. This table and filter help you pick the right unit for each property.
How to use
- Type a unit name or type (font, viewport, absolute) to filter the table.
- Read the type column: font-relative units scale with user settings, absolute units do not, viewport units track the browser window.
- Use rem for font sizes, em for padding that tracks text, px for borders, vw/vh for hero sections.
Frequently asked questions
What is the difference between em and rem?
em is relative to the parent element’s font size - it compounds when nested. rem is relative to the root element’s font size - it is flat and predictable. A 1.2em inside 1.2em inside 1.2em is 1.728rem, which compounds unpredictably in deep nesting. That is why rem became the accessibility standard.
Are px bad for accessibility?
For font sizes, yes - px overrides the user’s browser font-size setting, preventing low-vision users from scaling text. For borders, shadows and decorative spacing, px is fine. The rule: rem for anything you read, px for anything you draw.
When should I use viewport units (vw, vh)?
For full-screen hero sections (height: 100vh), responsive typography (font-size: 5vw), and layout containers that should track the window. Avoid them for body text: on mobile, 100vh includes the browser chrome, causing content to be hidden behind the toolbar.