CSS Units of Measurement

CSS offers several categories of units for sizing elements, spacing, and typography, and choosing the right one has a direct impact on how well a layout adapts across devices. Units broadly split into absolute units, which always represent the same physical size, and relative units, which scale based on some other value like the parent's font size or the viewport.

Modern, responsive CSS leans heavily on relative units — em, rem, %, vw, and vh — because they let layouts and text scale gracefully with user preferences (like a larger default browser font size) and different screen sizes, without a developer needing to hardcode a value for every breakpoint.

Why it matters

A layout built in fixed pixels looks right on one screen and wrong on most others, and ignores users who have set a larger default text size. Relative units make a design scale. Choosing between px, rem, em, percentages and viewport units is a decision you make on almost every declaration.

Absolute Units

px (pixels) is the only absolute unit used in everyday CSS. A pixel does not scale with the user's font-size settings, which makes it predictable for things like borders and box-shadows, but less ideal for text, since it ignores user accessibility preferences set at the browser level.

Relative Units Based on Font Size

em is relative to the font-size of the current element (or its parent, when used for font-size itself), which means em values can compound unpredictably when nested. rem ("root em") is relative to the font-size of the root <html> element only, so it never compounds — this makes rem the preferred unit for consistent, predictable spacing and typography across a whole site.

Percentage and Viewport Units

% sizes an element relative to its containing block (usually the parent), which is common for fluid widths like width: 50%. Viewport units size relative to the browser window itself: vw is 1% of the viewport width, and vh is 1% of the viewport height — useful for full-screen sections (height: 100vh) or text that scales with screen size.

Choosing the Right Unit

A practical rule of thumb: use rem for font-size and consistent spacing (margin, padding, gap), use % for fluid container widths, use vw/vh sparingly for full-viewport sections or hero text, and reserve px for things that genuinely should not scale, like a 1px border or a small fixed icon.

Examples

html { font-size: 16px; }

.parent { font-size: 1.5em; }       /* 16px * 1.5 = 24px */
.parent .child { font-size: 1.5em; } /* 24px * 1.5 = 36px, compounding! */

.parent .child-rem { font-size: 1.5rem; } /* always 16px * 1.5 = 24px */

The nested .child element renders at 36px because em compounds through each nesting level, while .child-rem stays at a predictable 24px regardless of nesting depth.

.hero {
  width: 100%;
  height: 100vh;
  padding: 2rem;
  font-size: clamp(1.5rem, 4vw, 3rem);
}

The hero section fills the full height of the browser window and the full width of its container, while the heading text scales smoothly between 1.5rem and 3rem depending on viewport width.

Exercise

Size everything with relative units: the heading at twice the root font size; the paragraph at 1.125 times the root font size; main at 90% of the width of its parent but never wider than 40rem; and button padding that scales with the button's own font size, 0.75 of it vertically and 1.5 of it horizontally.

Expected result: the layout keeps its proportions when the browser's default font size is changed.

/* The page contains: <main> with an <h1>, a <p> and a <button> */

/* TODO: h1 font size relative to the root */

/* TODO: p font size relative to the root */

/* TODO: main width as a percentage, with a maximum in rem */

/* TODO: button padding relative to its own font size */

/* The page contains: <main> with an <h1>, a <p> and a <button> */

h1 {
  font-size: 2rem;
}

p {
  font-size: 1.125rem;
}

main {
  width: 90%;
  max-width: 40rem;
}

button {
  padding: 0.75em 1.5em;
}

Quick quiz

Interview questions