Choose Tailwind v4 to get an @theme block with --text-* variables and matching line heights, or Tailwind v3 for a fontSize object to paste into tailwind.config.js.
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
Will this replace the default sizes?
In v4, values in @theme override defaults with the same name. In v3 the snippet uses extend, so add it under theme instead to replace everything.
Are line heights included?
Yes. Each size gets a line height that tightens as text gets larger, from about 1.5 for body text to 1.1 for display sizes.
Can I use fluid sizes in Tailwind?
Yes. Switch to fluid mode and every size is a clamp() value that works in the same utilities.
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.