The classic ratios borrow their names from musical intervals, from the subtle minor second (1.067) to the dramatic golden ratio (1.618). Try them in TypeScaleKit and watch the specimen change.
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
Why are the ratios named after music?
Musical intervals are frequency ratios. A perfect fifth is 3:2 (1.5) and a perfect fourth 4:3 (1.333), and the same proportions work visually.
Should I round the sizes?
Browsers handle fractional rem values fine. Round only if your design tool needs whole pixels.
How many steps do I need?
Usually two below the base for small print and four to six above for headings and display text.
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.