Why it matters
Most sites set font sizes at two or three breakpoints, so headings jump in size as you resize the window and look too big or too small in between. A fluid scale sets a size for the smallest and largest screens and lets CSS work out everything in between with clamp(), which every current browser supports.
Using a modular scale (each step a fixed ratio bigger than the last) keeps headings in proportion, and a matching space scale means padding and gaps grow with the text. The result is a layout that feels designed at every width, with less CSS than a stack of media queries.
How to use it
- Set your body text size for the smallest and largest screens, and the screen widths they apply at.
- Pick a scale ratio for each end. A smaller ratio on phones stops headings getting too big.
- Drag the screen width slider to see every step at that width.
- Copy or download the CSS, then use
var(--step-0)for body text and higher steps for headings.
FAQ
Why use rem in the clamp()?
The rem parts respect the reader's browser font-size setting, so text still gets bigger when someone has chosen larger text. The vw part is what makes it fluid.
What is the 2.5× warning?
WCAG 1.4.4 asks that text can be zoomed to 200%. If a size grows more than 2.5 times across the range, zooming can stop making it bigger, so the tool warns you.
Does it work with Tailwind?
Yes. Paste the variables into your CSS and reference them in your theme, for example fontSize: { h1: 'var(--step-4)' }.
Which ratios work best?
1.2 on phones and 1.25 to 1.333 on desktop suit most sites. Bigger ratios make dramatic headlines but need more room.
