Switch to fluid mode to get sizes that grow smoothly from a small screen to a large one with CSS clamp(), no media queries required. Preview each size in a real specimen and copy the code in the format your project uses.
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
What ratio should I use?
For text-heavy sites, a gentle ratio such as 1.2 or 1.25 keeps headings readable. Marketing pages and large screens can handle 1.333 to 1.5 for more contrast.
What base size is best?
16px (1rem) is the browser default and a good minimum for body text. Many sites use 17–20px on large screens.
Do I need fluid type?
Not always, but it removes the jumps between breakpoints and makes headings fit small phones without separate rules.
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.