TypeScaleKit writes a clamp() for each step and lets you drag the preview width to see exactly how the specimen will look on a phone, a tablet and a desktop. Sizes never shrink below the minimum or grow past the maximum.
How the scale is calculated
For a static scale, each step is the base size multiplied by the ratio raised to the step number: step 2 with a 16px base and a 1.25 ratio is 16 × 1.25² = 25px, and step −1 is 16 ÷ 1.25 = 12.8px. Sizes are written in rem, dividing by the root font size, which is 16px unless you change it.
For a fluid scale, TypeScaleKit works out each step twice, once with the small-screen base and ratio and once with the large-screen ones, then draws a straight line between the two sizes across the viewport range. The clamp() keeps the size at the small value below the minimum width and at the large value above the maximum width. The preferred value combines rem and vw so text still responds to browser zoom and the user’s default font size.
Line height and the specimen
The preview uses fonts already on your device, so nothing is downloaded. Each row uses a line height that gets tighter as text gets bigger: about 1.5 for body text and down to 1.1 for large display headings. The same values are included in the Tailwind exports. Drag the preview width in fluid mode to see the exact size each step will have on a 375px phone or a 1440px laptop.
Private by design
TypeScaleKit has no accounts and makes no network requests. Your settings are saved in local storage on this device only.
Frequently asked questions
Is fluid type accessible?
It is when the preferred value mixes rem and vw, as these values do, so text still scales when people zoom or change their default font size.
Why use different ratios at each end?
Small screens need a tighter scale so big headings fit; large screens can afford more contrast between levels.
Which browsers support clamp()?
All current browsers, including Safari, Chrome, Edge and Firefox, have supported clamp() since 2020.
Is TypeScaleKit free?
Yes. The type scale generator, clamp() calculator and px to rem converter are free with no account.
Are my settings saved?
Only in this browser on this device. Nothing is uploaded and no web fonts are loaded.