Form · T-12
Fluid type scale
Choose a base size and a ratio for a small and a large screen. Kleurstaal works the steps out as clamp(), shows them at the width you like and warns when zooming stops working.
Your files stay on your device
Questions
Good to know
What does clamp() do here exactly?
It gives a smallest size, a largest size and in between a straight line that grows with the screen width. Below the small width the text stays at its smallest, above the large width at its largest.
Why a rem part next to the vw?
vw alone does not grow when someone zooms in, and WCAG 1.4.4 says it must. The rem part makes zooming still enlarge the text. If a step grows more than 2.5 times between the two screens, zooming to 200 percent can’t reach that everywhere and Kleurstaal warns you.
Which ratio should I choose?
On a phone a smaller ratio works, such as 1.2, because large headings quickly fill the screen. On a wide screen it may be roomier, such as 1.25 or 1.333. That is why you choose them separately.
How it works
Fluid type scale in three steps
Two screens
Choose the width, the size of body text and the ratio between steps, for a phone and for a wide screen.
Slide the width
The preview shows every step at the width you choose, as it would sit on such a screen.
Take the code along
CSS variables, a Tailwind 4 theme or design tokens in JSON, ready to paste.