What fluid typography is
Fluid type grows with the screen instead of jumping at breakpoints. A heading might be 32px on a phone and 56px on a laptop, and every width in between gets a size on the straight line between them. CSS does it in one line with clamp(): a smallest size, a preferred size that mixes rem and vw, and a largest size.
A type scale makes it systematic. Pick a base size and a ratio for small screens and another pair for large ones, and every step of the scale (small print, body, the headings) gets its own clamp(). Using a smaller ratio on phones and a larger one on desktops keeps headings from overwhelming a small screen.
How the clamp() value is worked out
For each step, the tool takes its size on the smallest screen and on the largest, and draws a line between them:
- slope = (largest size minus smallest size) divided by (largest screen minus smallest screen)
- intercept = smallest size minus slope times smallest screen
- preferred value = intercept in rem, plus slope times 100 in vw
Then clamp() holds the size at the smaller and the larger of the two sizes, so it never shrinks below one or grows past the other. A step that gets smaller on large screens works too: the bounds swap, and the vw part turns negative.
Fluid type and WCAG zoom
WCAG 1.4.4 asks that text can be resized to 200% without loss. With fluid type that isn't automatic: when someone zooms in, the rem part of the size grows but the vw part doesn't, so a size made mostly of vw can't reach twice its size. This is the issue Maxwell Barvian set out in Smashing Magazine.
The tool checks every step on every screen from 320 to 3840 pixels: browser zoom goes up to 500%, so a step passes where some zoom level reaches twice the size it has at 100%. A useful rule of thumb from OddBird agrees with the check: a largest size no more than about 2.5 times the smallest passes. When a step fails, the table says on which screen widths.
Tailwind, CSS variables and the rest
Copy the scale in the form your project uses. CSS writes custom properties on :root. Tailwind v4 writes --text-* variables in @theme, so text-step-3 or text-h1 works as a utility. Tailwind v3 writes the fontSize part of tailwind.config.js. SCSS writes variables, and JSON writes each step's sizes, clamp() and zoom result for a design token pipeline.
Working with design tokens already? The design tokens to Tailwind converter takes a whole token file.
Picking a scale
A ratio of 1.2 (minor third) suits interfaces and long text on phones; 1.25 (major third) and 1.333 (perfect fourth) give clear headings on larger screens; 1.5 and above suit editorial pages with few, large headings. Keep the body text at 16px or more on phones, and check the preview at the widths your visitors use. A type scale is one line of a design system; the rest is what I build as a design engineer.