Choosing the right CSS unit is the difference between a layout that scales gracefully and one that breaks. This cheat sheet groups CSS length units by type — absolute, font-relative, viewport, and percentage — plus the functions (calc, min, max, clamp) that combine them.
Each row explains what the unit is relative to and when to reach for it. For layout properties that use these units, see the <a href="/cheatsheet/css-flexbox">Flexbox</a> and <a href="/cheatsheet/css-grid">Grid</a> cheat sheets.
Absolute Units
| Unit | What it does |
|---|
px | Pixels — a fixed size that does not scale with font or viewport. |
pt | Points (1pt = 1/72 inch) — mainly used for print styles. |
cm / mm / in | Physical units for print; rarely used on screen. |
Font-relative Units
| Unit | What it does |
|---|
rem | Relative to the root font size — best for scalable, consistent sizing. |
em | Relative to the current element's font size; compounds when nested. |
ch | Width of the '0' character — handy for sizing text columns. |
ex | Height of the lowercase 'x'; rarely used. |
Viewport Units
| Unit | What it does |
|---|
vw | 1% of the viewport width. |
vh | 1% of the viewport height. |
vmin | 1% of the smaller viewport dimension. |
vmax | 1% of the larger viewport dimension. |
dvh / svh / lvh | Dynamic, small, and large viewport height — account for mobile browser bars. |
Percentage & Fractional
| Unit | What it does |
|---|
% | Relative to the parent element's corresponding size. |
fr | A fraction of the free space in a CSS Grid container. |
Useful Functions
| Unit | What it does |
|---|
calc(100% - 2rem) | Mix units in a single computed length. |
min(50%, 400px) | Use whichever value is smaller. |
max(300px, 50%) | Use whichever value is larger. |
clamp(1rem, 2.5vw, 2rem) | A fluid value with a minimum and maximum — great for typography. |
CSS Units Cheat Sheet FAQs
What is the difference between px and rem?
px is an absolute, fixed size. rem is relative to the root (html) font size, so if a user increases their browser's default font size, rem-based sizes scale with it. Use rem for font sizes and spacing to keep layouts accessible.
What is the difference between em and rem?
Both are font-relative, but em is relative to the current element's font size while rem is relative to the root font size. Because em compounds through nesting, rem is more predictable for most sizing; em is useful for spacing that should scale with a component's own text.
When should I use vh and vw?
Use vw and vh (1% of the viewport width/height) for elements that should scale with the screen, like full-height hero sections. On mobile, prefer dvh (dynamic viewport height) so the value accounts for the browser's address bar appearing and disappearing.
What does clamp() do in CSS?
clamp(min, preferred, max) returns the preferred value but never below the min or above the max. It is perfect for fluid typography, e.g. font-size: clamp(1rem, 2.5vw, 2rem) scales with the viewport while staying within readable bounds.
What is the difference between % and vw?
% is relative to the parent element's size, while vw is relative to the whole viewport. A width of 50% depends on the container; 50vw is always half the screen width regardless of where the element sits.
Which CSS unit is best for responsive design?
There is no single best unit — combine them. Use rem for typography and spacing, % or fr for fluid layout widths, viewport units for full-screen sections, and clamp() to make values scale smoothly between breakpoints.
