TypeScaleKit does that maths for you. Enter the two sizes and the two viewport widths and copy the result. It works for any length in pixels: font sizes, padding, gaps or container widths.
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
How is the preferred value calculated?
Slope = (max size − min size) ÷ (max width − min width). The vw part is slope × 100 and the rem part is (min size − slope × min width) ÷ root size.
Why rem instead of px?
rem respects the user’s browser font-size setting, which matters for accessibility.
Can the size get smaller on bigger screens?
Yes. Enter a larger minimum than maximum and the calculator writes a decreasing clamp() with the limits in the right order.
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.