How to use the Type Scale Generator
- 1. Set the baseYour body text size, usually 16 px.
- 2. Choose a ratioFrom minor second (1.067) to golden ratio (1.618), plus steps up and down.
- 3. Copy the CSSUse the variables for headings and small text.
Worked example
With a 16 px base and the major third ratio of 1.25, each step multiplies the last by 1.25: 16, 20, 25, 31.25, 39.06 and 48.83 px going up, and 12.8 and 10.24 px going down. In rem (assuming the 16 px browser default) these are 1rem, 1.25rem, 1.5625rem and so on, written as --text-base, --text-lg, --text-xl up to --text-4xl. Suggested line heights drop from 1.5 for body text to 1.15 for large headings, because big text needs less space between lines.
The preview draws each size with your chosen font so you can judge the jumps by eye.
Choosing a ratio
- Small ratios (1.067–1.2) suit dense apps, dashboards and long documents, where headings should not shout.
- Medium ratios (1.25–1.333) are a safe default for most websites.
- Large ratios (1.5–1.618) make dramatic marketing pages but run out of room quickly on phones.
- Use a smaller ratio on mobile and a larger one on desktop, or make the top sizes fluid with clamp().
Text below about 12 px is hard to read, so keep the smallest step for labels only. Fonts named in the preview must be installed or loaded on your site. Make headings scale smoothly with the CSS clamp generator and store the scale with the design tokens JSON generator.
Frequently asked questions
Why are the ratios named after music?
Early typographers borrowed musical intervals, such as a perfect fourth (4:3), because they describe pleasing proportions.
Should I round the sizes?
Rounding to whole or half pixels is fine and common. The scale is a guide, not a rule.
Is the Type Scale Generator free?
Yes, the Type Scale Generator is free. The first time you generate your first scale, you are asked for your name and WhatsApp number once. After that, this and every other Uncodemy tool opens straight away without the form.