Fluid Typography

`clamp()` lets you set a minimum, a fluid scaling value, and a maximum — type that grows with the screen, with sane bounds.

3 min read Level 2/5 #css#fluid-typography#clamp

What you'll learn

Build a fluid font-size scale
Pick min and max thoughtfully
Avoid over-scaling

Traditional responsive type uses media queries to jump between sizes. Fluid type scales smoothly — using clamp() with a viewport-based middle value.

The Pattern

h1 {
  font-size: clamp(1.75rem, 4vw + 1rem, 3rem);
}

Min: 1.75rem (on small screens)
Ideal: 4vw + 1rem (scales with viewport)
Max: 3rem (caps on huge screens)

The middle value scales linearly with the viewport, bounded by min and max.

Why The `+ 1rem`?

A pure vw value (e.g., 5vw) means the size IS proportional to viewport — which means a user who zooms or scales their browser font size gets no benefit. Adding a rem-based component anchors some of the size to the user’s preference. Good for accessibility.

A pattern: clamp(<min>, calc(<small-vw> + <fixed-rem>), <max>).

A Whole Scale

:root {
  --size-1: clamp(0.875rem, 0.85vw + 0.7rem, 1rem);     /* small text */
  --size-2: clamp(1rem, 1vw + 0.8rem, 1.125rem);         /* body */
  --size-3: clamp(1.125rem, 1.2vw + 0.85rem, 1.375rem);  /* lead */
  --size-4: clamp(1.5rem, 2vw + 1rem, 2rem);             /* h3 */
  --size-5: clamp(1.875rem, 3vw + 1rem, 2.5rem);         /* h2 */
  --size-6: clamp(2.25rem, 5vw + 1rem, 3.5rem);          /* h1 */
}

h1   { font-size: var(--size-6); }
h2   { font-size: var(--size-5); }
body { font-size: var(--size-2); }

Resize the browser — type breathes smoothly without sudden jumps.

Use a Calculator

Picking the middle expression by hand is fiddly. Tools like utopia.fyi or fluid-type-scale.com generate the values from a min/max viewport and min/max size.

Don’t Make It Too Fluid

Going from 14px to 100px breaks readability — and looks ridiculous at the extremes. Aim for a 2–3x ratio between min and max sizes.

Up Next

Dark mode — supporting both color schemes.

Dark Mode →