— Tool 05

Fluid Type Generator

Turn a minimum and maximum font size into a single CSS clamp()declaration that scales smoothly with the viewport — no media queries required.

Slope2.96vw units

Intercept21.33px at 0vw

Growth100%min → max size

At 360px viewport

Fluid typography

At 1440px viewport

Fluid typography

— How It Works

Reading a clamp()

Three arguments

clamp(min, preferred, max) — the middle value is a linear function of viewport width. It grows between your breakpoints and is clamped outside them.

Slope + intercept

The preferred value is slopevw + intercept. The slope is the size difference divided by the viewport difference; the intercept is where that line crosses zero.

Keep the range honest

A 16px → 80px body copy range will look broken somewhere. Use fluid type for display headings; keep body copy on a small, controlled range.