CSS ClampCSS ClampA complete clamp() type scale from one base size and ratio.
Fluid type scale
Fluid type scale
Fluid type scale
Fluid type scale
Fluid type scale
Body text that stays easy to read
Body text that stays easy to read
Body text that stays easy to read
:root {
--step-5: clamp(2.488rem, 2.173rem + 1.4vw, 3.433rem);
--step-4: clamp(2.074rem, 1.849rem + 0.997vw, 2.747rem);
--step-3: clamp(1.728rem, 1.572rem + 0.695vw, 2.197rem);
--step-2: clamp(1.44rem, 1.334rem + 0.471vw, 1.758rem);
--step-1: clamp(1.2rem, 1.131rem + 0.306vw, 1.406rem);
--step-0: clamp(1rem, 0.958rem + 0.185vw, 1.125rem);
--step--1: clamp(0.833rem, 0.811rem + 0.099vw, 0.9rem);
--step--2: clamp(0.694rem, 0.686rem + 0.038vw, 0.72rem);
}Every step is the base size multiplied by the ratio once per step. Step 1 is base × ratio, step 2 is base × ratio², and steps below the base divide instead. The generator does this twice, once with the mobile base and ratio and once with the desktop values, and connects the two with a clamp() for each step.
With the defaults, a 16px base and a 1.2 ratio on a 360px screen, and an 18px base and a 1.25 ratio on a 1440px screen, the base step and the largest step are:
--step-0: clamp(1rem, 0.958rem + 0.185vw, 1.125rem)--step-5: clamp(2.488rem, 2.173rem + 1.4vw, 3.433rem)Body text barely moves, from 16px to 18px, while the largest heading grows from about 40px to 55px. That is the point of using two ratios: the hierarchy gets stronger as the screen gets wider.
Paste the CSS variables into your stylesheet and assign them to elements, for example h1 { font-size: var(--step-5); } and body { font-size: var(--step-0); }. The Tailwind output replaces Tailwind’s default font sizes instead, so text-base and text-4xl become fluid.
Give large steps a tighter line height, around 1.1, and body text a looser one, around 1.5. The examples page shows a hand-tuned scale for h1 to h6 with matching line heights.
All values use rem for the minimum, maximum and intercept, so the scale follows the user’s font size setting. Keep the largest step within about 2.5 times its mobile size and test at 200% zoom. The fluid typography accessibility guide explains why.
A type scale is a set of font sizes where each step is the previous one multiplied by a fixed ratio. In a fluid type scale every step is a clamp() value, so the whole scale grows smoothly from a mobile size to a desktop size instead of switching at breakpoints.
Large screens have room for more contrast between headings and body text. A smaller ratio on mobile, like 1.2, keeps headings from taking over a narrow screen, while a larger ratio on desktop, like 1.25 or 1.333, gives the page a clearer hierarchy.
For text-heavy sites and apps, a minor third (1.2) or major third (1.25) works well. Marketing pages with large display headings can use a perfect fourth (1.333) or more on desktop. Higher ratios make the largest steps grow quickly, so check them at the smallest screen width.
Most sites need one or two steps below the base for small print and captions, and four to six above it for headings. Unused steps only add noise to your design tokens.
Pick the Tailwind v4 output. It redefines Tailwind’s own font size tokens, like --text-base and --text-2xl, inside @theme, so every text-* utility in your project becomes fluid without changing your markup.