Updated June 29, 2026
CSS units reference
CSS sizes can be expressed in several units. Absolute units are fixed; relative units scale with the font, the viewport, or the parent, which is what makes layouts responsive.
Absolute
| Unit | Type | What it is |
|---|---|---|
px | Absolute | One CSS pixel; the most common fixed unit. |
pt | Absolute | Point, 1/72 inch; mostly used for print. |
cm / mm / in | Absolute | Physical units, mainly meaningful for print stylesheets. |
Font-relative
| Unit | Type | What it is |
|---|---|---|
rem | Relative | Relative to the root font size; ideal for scalable, accessible sizing. |
em | Relative | Relative to the current element's font size; compounds when nested. |
ch | Relative | Width of the '0' character; handy for sizing text columns. |
ex | Relative | Height of the lowercase 'x' in the current font. |
Viewport-relative
| Unit | Type | What it is |
|---|---|---|
vw | Relative | 1% of the viewport width. |
vh | Relative | 1% of the viewport height. |
vmin | Relative | 1% of the smaller viewport dimension. |
vmax | Relative | 1% of the larger viewport dimension. |
% | Relative | Percentage of the parent element's size. |
Prefer rem for typeSizing text in
rem lets it scale with the user's browser font setting, which px ignores. That makes rem the more accessible default for font sizes and spacing.References
Questions
What is the difference between em and rem?
em is relative to the current element's font size and compounds when elements are nested, while rem is always relative to the root font size, which makes it more predictable.
Should I still use px?
px is fine for borders, shadows, and fine details. For font sizes and spacing, rem is usually better because it respects the user's preferred text size.