CSS Units: px, %, rem, em, vh, vw and clamp

CSS gives you many units, and choosing well is a mark of an intermediate developer. The right unit makes your design flexible and accessible; the wrong one makes it rigid. Let us sort them out.

Absolute vs relative units

<code>px</code> is absolute and fixed. Relative units scale with something else: <code>%</code> relative to the parent, <code>em</code> relative to the element's own font-size, <code>rem</code> relative to the root font-size, and <code>vw</code>/<code>vh</code> relative to the viewport width/height.

Why rem matters for accessibility

Using <code>rem</code> for font sizes respects the user's browser font-size setting, which matters for people who increase text size. Fixed <code>px</code> fonts ignore that preference. Prefer <code>rem</code> for type and spacing.

<p class="a">1rem text</p>
<p class="b">1.5rem text</p>

:root{font-size:16px}
.a{font-size:1rem}
.b{font-size:1.5rem;color:#2563eb}

Fluid sizing with clamp()

The <code>clamp(min, preferred, max)</code> function gives a value that scales between a minimum and maximum — perfect for fluid typography that grows with the screen but never gets too small or too big, without media queries.

<h1 class="fluid">Fluid heading</h1>

.fluid{font-size:clamp(1.5rem, 5vw, 3rem)}

p { font-size: 2vw; }

p { font-size: clamp(1rem, 2vw, 1.25rem); }