How to use this generator
Start from the design, not the maths. Decide what size a piece of text should be on a small phone and on a typical laptop, and over which range of widths it should travel between the two. The defaults — 16px at 360px wide growing to 20px at 1240px — suit body copy. Below the starting width the size stays at its minimum, and above the end width it stays at its maximum; clamp() only interpolates in between.
Drag the preview slider to see the text at any width, and use the table to sanity-check the in-between sizes. If a value lands somewhere awkward at a breakpoint you care about, nudge the viewport range rather than the sizes.
Why the middle value mixes rem and vw
A size written purely in vw is tied to the window and ignores the visitor's browser font-size setting — someone who has set their default text to 20px gets no benefit. Adding a rem term to the preferred value keeps a share of the size anchored to that setting, and expressing the minimum and maximum in rem means the limits move with it too. That's why the output looks like clamp(1rem, 0.8977rem + 0.4545vw, 1.25rem) rather than a bare vw figure.
What the zoom check is testing
WCAG 2.2 success criterion 1.4.4, Resize Text, requires that text can be scaled to 200% without losing content. Browser zoom normally makes that easy, but fluid type complicates it: zooming shrinks the viewport in CSS pixels, so the vw part of your size gets smaller as the zoom level goes up. If the gap between your minimum and maximum is wide, zoom can stall well short of double.
The check here simulates exactly that. For every window width from 320px to 3840px it tries each zoom level up to the browser maximum of 500% and asks whether any of them gets the text to at least twice its unzoomed size. A heading going from 16px to 64px fails — at a 1280px window, zoom only ever reaches 1.25× — while 32px to 72px passes. As a rule of thumb, keep the largest size within about 2.5 times the smallest, and the check will almost always pass.
Using the type scale
Paste the tokens into your stylesheet and apply them by role rather than by element: h1 { font-size: var(--step-5); }, small { font-size: var(--step-n1); }. Because every step is its own clamp(), nothing needs a media query. Pair the scale with a unitless line-height (around 1.5 for body text, 1.1–1.2 for large headings) so line spacing follows the font size, and cap body text measure at roughly 60–75 characters with max-width: 65ch.
For a deeper walkthrough of the maths, worked examples and the common mistakes, read our guide to fluid typography with clamp(). Browser support for clamp() is universal in current browsers — see MDN's clamp() reference.