Fluid Typography — clamp() Builder

Define min/max font sizes and a viewport range; the builder derives the calc() preferred term and previews resolved sizes at any simulated viewport width.

1 · clamp() builder

Linear interpolation between two points: (minVw, minSize) and (maxVw, maxSize). The preferred term is min + (max − min) × (100vw − minVw) / (maxVw − minVw).

Min size

Max size

Min viewport (px)

Max viewport (px)

Generated CSS

—

Preferred term (expanded)

—

2 · Simulated viewport preview

The iframe width is fixed (~720px). Drag the slider to simulate how your clamp() resolves at different viewport widths.

Viewport width 720px

Heading

—

Body

—

Clamp zone

—

simulated viewport: 720px

Fluid heading scales smoothly

Body copy follows the same clamp curve at 1× scale. No breakpoint stair-steps — just continuous interpolation between your min and max viewport anchors. Resolved at this width: heading —, body —

3 · Fluid type scale

Each step multiplies the base clamp by a ratio (Major Third ≈ 1.25). Every level gets its own clamp() with scaled min/max.

4 · Viewport height units

On mobile, the browser chrome (URL bar) changes visible height. Classic 100vh can overflow; newer units model the dynamic viewport.

Tip: Use min-height: 100dvh for full-screen layouts that should adapt as the URL bar slides. Pair with svh as a fallback floor so content never clips when chrome is largest. For typography, prefer vw / rem over vh — line length and zoom accessibility matter more than viewport height.