A modular type scale for consistent headings
A type scale is a fixed set of font sizes that every page of a site uses: body text, small print and each heading level. Choosing the sizes from one ratio, instead of picking numbers one by one, gives the design a steady rhythm, the same way musical intervals sound right together.
Enter a base size and a ratio, and this generator builds the scale in pixels, rem, em and points, with matching line heights, and exports it as CSS custom properties.
How to use it
- Set the base size, usually 16 px, the size of body text.
- Choose a ratio: 1.2 for a gentle scale, 1.25 for a common balanced one, 1.333 or more for bold headlines.
- Set the number of steps and the line-height ratio.
- Check the preview, then copy the CSS variables into your stylesheet.
Example: base 16 px, ratio 1.25
Base 16, ratio 1.25, 5 steps
:root {
--text-base: 1rem;
--text-lg: 1.25rem;
--text-xl: 1.563rem;
--text-2xl: 1.953rem;
--text-3xl: 2.441rem;
}Each step is 1.25 times the one before: 16, 20, 25, 31.25 and 39.06 pixels, written in rem so they follow the reader's browser font setting.
Choosing a ratio
Ratios are often named after musical intervals: 1.2 is a minor third, 1.25 a major third, 1.333 a perfect fourth and 1.5 a perfect fifth. Small ratios suit content-heavy interfaces such as dashboards and documentation, where many heading levels must fit. Large ratios suit marketing pages with a few dramatic headlines. Many sites use a smaller ratio on phones and a larger one on wide screens.
Why rem
Pixel sizes ignore the font size a reader has set in their browser, which many people with low vision rely on. rem sizes are multiples of that setting, 16 pixels by default, so the whole scale grows with it. WCAG asks that text can be enlarged to 200% without breaking the layout, which rem-based scales make much easier.
Line height
Body text reads best with a line height of about 1.4 to 1.6 times the font size. Large headings need less, often 1.1 to 1.25, or the lines drift apart. The generator multiplies each size by the ratio you set; for headings, consider a smaller value than for body text.
Questions
Do I need every step?
No. Most sites use four to six sizes. Generate more and use only the ones you need.
Why are some values long decimals?
Multiplying by a ratio rarely gives round numbers. Browsers handle fractional sizes fine, so there is no need to round.
Is anything uploaded?
No. The scale is calculated in your browser.