Fluid Type — a clamp() playground

01 Inputs

MIN font floor 1.45 rem

0.75rem2.5rem

MAX font ceiling 2.25 rem

1rem4rem

W₁ smallest container 252 px

100px800px

W₂ largest container 432 px

200px1600px

W₂ must be greater than W₁ for a valid line.

Derived

Slopem

5.56cqi

Interceptb

0.750rem

Output

font-size:
  clamp(
    1.45rem,
    0.75rem + 5.56cqi,
    2.25rem
  );

02 The line

font-size vs. container width

y = m·x + b

the line (b + m·cqi) clamped (MIN / MAX) W₁ / W₂ crossings

03 Live preview

drag to resize the container

252px → font 23.2px

“Hör auf, dich kleiner zu machen, als du bist.”

— Irgendjemand, irgendwo

The Four Knobs

MIN and MAX are floors and ceilings from your design system. W₁ and W₂ are the container widths at which the line should hit those bounds. Four numbers, one line.

Why cqi?

1cqi is 1% of the container's inline size. So 5.56cqi is really m·x in disguise — the coefficient fused with a runtime lookup. The whole middle expression is b + m·x.

Tune the W's, not b & m

m and b are derived — only one line passes through two given points. You never tune them directly. You tune W₁ and W₂ to match your real container widths.

Diagnose by extreme

Never reaches MAX? W₂ is too large — no real container is that wide. Overshoots at small end? MIN itself is too big for the smallest container.

Set in Fraunces & IBM Plex · y = mx + b · for CSS Container queries · cqi · clamp()