Fluid type with clamp()

Today, Christie’s type sizes step. The 4xl heading is 36px on a phone, then jumps to 48px at 1024px wide. Between the jumps, the size stays the same however much the screen grows.

Fluid type grows steadily instead. You choose a smallest size, a largest size and the screen widths where each applies. Between those widths the size grows in a straight line, and outside them it holds. CSS writes this as clamp(smallest, preferred, largest).

Try it

The starting numbers are the 4xl heading from the fluid type prototype: 36px at 390px, growing to 48px at 1440px. Drag the screen width, or point at the chart, and compare it with today’s stepped size. Change the numbers and the clamp() below updates.

Today’s 4xl also jumps again, to 64px, at 1920px. The chart stops just before it.

What it means for your designs

You design each size at two widths, and the browser works out every width in between. There’s no tablet size to draw, and no jump where a heading suddenly grows by a third.

• Pick the two widths you already design at. The prototype uses Mobile (390px) and Desktop (1440px).
• Check the widths in between, where today’s sizes jump, such as 1024px. That’s where fluid type looks most different.
• Not every size needs to grow. Small text barely changes: in the prototype’s scale, body text stays at 16px from Mobile to Desktop.

In Figma

A Figma text style has one size, so give each step its Mobile and Desktop sizes, and say in a note that it grows between them: “4xl: 36px at 390, 48px at 1440, fluid between”.

The fluid type prototype, in prototypes/2026-09-fluid-typography, tunes the whole Christie’s scale this way. It shows each size at real screen widths beside today’s.

Say this to a developer

“Can the 4xl heading be fluid, from 36px at 390px to 48px at 1440px?” Then paste the value from the playground:

1
h2 {
2
  font-size: clamp(2.25rem, 1.9714rem + 1.1429vw, 3rem);
3
}

The first value is the smallest size, the last is the largest, and the middle grows with the screen width (vw, a hundredth of the window’s width).

Watch out for

• The middle value needs a rem part as well as vw. With vw alone, the text ignores the reader’s text setting and barely grows when they zoom. The playground’s value always has both.
• Fluid sizes follow the window, not the space a component has. A card in a narrow sidebar gets the same title size as one in a wide grid. Container units fix that.

Browser support

clamp() works in every current browser, and has since 2020.