CSS clamp() Fluid Typography Generator

Fluid typography sizes text on a straight line between two points: a small size on narrow screens and a larger size on wide screens. The generator builds that line by linear interpolation and then wraps it in CSS clamp() so the browser never draws text smaller than your minimum or larger than your maximum. The derivation is the widely used CSS-Tricks fluid-type method; the clamp() behaviour follows the W3C CSS Values and Units Module Level 4 and MDN.

Let s₁ and s₂ be your min and max font sizes in px, and v₁, v₂ the min and max viewport widths in px. The tool computes:

1. Slope — m = (s₂ − s₁) ÷ (v₂ − v₁), the px of font gained per px of viewport.
2. vw coefficient — V = m × 100. Since 1vw equals 1% of the viewport width, a slope in px-per-px becomes 100·m in px-per-vw.
3. Offset — b = s₁ − m × v₁, the constant term (the line's value at a zero-width viewport). Converted to rem it is b ÷ root.
4. Preferred value — b + V·vw, the middle argument of clamp().
5. Declaration — clamp(s₁, b + V·vw, s₂), with each length shown in your chosen unit.

By construction the preferred term equals s₁ exactly at v₁ and s₂ exactly at v₂; clamp() then flattens it to the min below v₁ and the max above v₂. Terms are rounded to four decimal places to keep the output clean while staying sub-pixel accurate. To prove correctness, every value is derived a second way — by direct interpolation between the two endpoints — and the two results are checked to agree to under a millionth of a pixel before the declaration is shown.

Prefer remfor the min and max: it respects the reader's browser font-size setting, which a fixed px minimum would override. The generator converts px to rem using the root font size you enter (16px by default).

• MDN Web Docs — clamp() CSS function (semantics & browser support)
• W3C — CSS Values and Units Module Level 4: clamp() (normative spec)
• MDN Web Docs — CSS length units (1vw = 1% of viewport width)
• CSS-Tricks — Simplified Fluid Typography (linear-interpolation method)

The clamp() semantics and browser-support statement on this page were last verified against MDN and the W3C spec on 2026-07-05. The underlying math is pure CSS-spec interpolation and does not change over time.