Typography scale
Preview a modular type scale with your own text, ratio and font style.
How it works & useful details
How to use this tool
Choose a ratio and base size, then try your own text in the live specimen. Export reusable CSS size variables.
Supported values and limitations
Each step is base × ratio to the step power, rounded to three decimal places, with a maximum generated step of 200px. Uses installed system font stacks with no external font requests. The output contains sizes; choose your project’s actual font family separately.
About this tool
Typography scale previews a modular type scale using your own sample text, base size, and ratio. Seeing real words at each step makes it easier to decide which sizes your product actually needs.
The scale is computed from the ratio you choose, and each step is shown with its size. Everything runs locally; no font is downloaded, and the preview uses your system fonts.
How to use it
- Enter sample text so the preview shows realistic words.
- Set the base size and the scale ratio.
- Review each step and remove sizes you will not use.
- Copy the sizes into your design tokens or stylesheet.
Worked example
A 16px base with a 1.25 ratio (a major third) gives:
--text-1: 16px;
--text-2: 20px;
--text-3: 25px;
--text-4: 31.25px;
--text-5: 39.063px;
--text-6: 48.828px;Each step is the previous one multiplied by the ratio: 16 × 1.25 = 20, 20 × 1.25 = 25, and so on. Use the lower steps for body text, captions, and small headings, and the upper steps for page titles.
Choosing a ratio
- 1.125 (major second) or 1.2 (minor third): subtle steps for dense interfaces, dashboards, and documentation.
- 1.25 (major third) or 1.333 (perfect fourth): balanced, good for most websites and blogs.
- 1.5 (perfect fifth) or 1.618 (golden ratio): dramatic contrast for editorial layouts and landing pages, often with fewer steps.
Large ratios make top-level headings very big on small screens. A common approach is a smaller ratio on mobile and a larger one on desktop, or fluid sizes with CSS clamp(). Round the results to whole or half pixels if your design tool prefers, as long as the steps stay visibly distinct.
Frequently asked questions
Which ratio should I choose?
Smaller ratios such as 1.125 suit dense interfaces, while 1.25 to 1.333 gives more dramatic headings. Preview a few and decide per project.
Does the scale change my fonts?
No. It defines sizes only; font family and weight choices are separate decisions.
Can I export the scale?
Copy the individual sizes from the preview and use them in your own tokens or CSS variables.
Why is the largest size limited?
The top step is capped at 200px so the preview stays readable. Reduce the ratio, base size, or number of steps if you hit the limit.