Type scale generator
Choose a base font size and a ratio, and every heading and caption size follows from it - each step is the previous one multiplied by the ratio. Preview the sizes with your own text and copy them as CSS custom properties.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Enter the base size, usually the body text size such as 16 px.
- Pick a ratio, or Custom to type your own.
- Choose how many steps above and below the base you need.
- Check the preview and copy the CSS variables in rem or px.
size(step) = base × ratio^step
rem = size in px ÷ 16
Sizes are rounded to 2 decimals in px and 3 in rem.
Worked example
Base 16 px with the major third, 1.25: step 1 is 16 × 1.25 = 20 px (1.25rem), step 2 is 20 × 1.25 = 25 px (1.563rem), step 5 is 16 × 1.25^5 = 48.83 px (3.052rem). Going down, step −1 is 16 ÷ 1.25 = 12.8 px (0.8rem) and step −2 is 10.24 px (0.64rem).
Tips
- Body text rarely needs more than 5 steps up; extra steps are for display headings.
- Sizes under about 12 px are hard to read; keep steps down for labels and footnotes.
- For fluid type, use two scales (mobile and desktop) and blend them with CSS clamp().
Frequently asked questions
What is a modular type scale?
A set of font sizes where each size is the one below it multiplied by the same ratio. The sizes relate to each other in a consistent way, so headings, body text and captions look like one system instead of hand-picked numbers.
Which ratio should I choose?
Small ratios such as 1.125 or 1.2 keep headings close to body text, which suits dense interfaces and small screens. Larger ones such as 1.333 or 1.5 give dramatic headings for editorial pages. The musical names (thirds, fourths) only label common ratios.
Why rem instead of px?
Rem sizes are relative to the root font size, so they grow when a reader increases the browser's default text size. The tool divides pixels by 16, the default root size in browsers.
How do I use the variables?
Paste the :root block into your stylesheet and use them, for example h1 { font-size: var(--step-4); } and body { font-size: var(--step-0); }. Step 0 is the base size; negative steps are smaller.