Fluid Type Scale Generator

What a fluid type scale is

A type scale is a set of font sizes related by a fixed ratio. Start with a base size, multiply by the ratio for each step up, divide for each step down. With a 16px base and a ratio of 1.25 you get 16, 20, 25, 31.25, 39.06 and so on. The consistent ratio is what makes a page feel designed instead of improvised.

A fluid scale goes one step further. It defines two scales, one for a small viewport and one for a large viewport, and lets each step slide smoothly between them as the screen widens. Instead of jumping at breakpoints, an h1 might grow from 39px on a phone to 61px on a laptop, hitting every size in between. CSS clamp() makes this a single line per step with no media queries.

How the clamp() values are calculated

For each step the tool finds the size at the minimum viewport and the size at the maximum viewport, then draws a straight line between them. The slope of that line becomes the vw part and the intercept becomes the rem part:

slope     = (maxSize - minSize) / (maxViewport - minViewport)
intercept = minSize - slope * minViewport

font-size: clamp(minSize, intercept + slope * 100vw, maxSize);

/* example: step 0, 16px at 360px to 20px at 1240px */
--step-0: clamp(1rem, 0.8977rem + 0.4545vw, 1.25rem);

Below the minimum viewport the size locks at the minimum; above the maximum viewport it locks at the maximum. The first and last arguments of clamp() are those locks.

Why the rem part matters for accessibility

A font size written purely in vw ignores the user's browser font setting and does not grow with zoom on many setups. That fails WCAG success criterion 1.4.4, which requires text to scale to 200 percent. Mixing rem into the preferred value, and using rem for both locks, keeps fluid text responsive to user preferences. Keep the max size no more than about 2.5 times the min size for any step, and zoom will still have a strong effect.

Choosing ratios

• 1.125 to 1.2 on small screens: headings stay distinct without wrapping onto four lines.
• 1.25 to 1.333 on large screens: enough contrast for editorial layouts and marketing pages.
• 1.5 and up: dramatic, poster-like. Use sparingly and only with few steps.

Using a smaller ratio at the minimum viewport than at the maximum is the key move. Body text barely changes, while display headings grow a lot, which mirrors how designers actually adjust layouts by hand.

Wiring it into your CSS

body { font-size: var(--step-0); }
h1   { font-size: var(--step-5); }
h2   { font-size: var(--step-4); }
h3   { font-size: var(--step-2); }
small, .caption { font-size: var(--step--1); }

Because every value lives in a custom property, you can retune the whole scale later by pasting a new :root block without touching a single component.

Frequently asked questions