Type scale generator
This tool builds a modular typographic scale — a harmonious set of font sizes — from a base size and a ratio, and gives you copy-ready CSS. It is for designers and front-end developers who want consistent, mathematically related heading and body sizes instead of arbitrary values picked by eye.
A modular scale solves the “random numbers” problem: without a system, designers end up with font-size tokens like 14, 15, 18, 20, 24, 28, 36 that feel unrelated. A scale derived from a single ratio keeps every size in a musical relationship with every other, so the hierarchy reads as intentional.
How it works
Starting from your base size (typically 16px) and a chosen ratio, the tool raises the ratio to each step’s power and multiplies by the base. It generates six steps, from 0 (the base) up to 5, and expresses each in both pixels and rem (dividing px by 16, the conventional root size):
size at step n = base × ratio^n
rem = px ÷ 16Ratios are the classic modular intervals — minor second (1.067) through to the golden ratio (1.618). The output is a set of CSS custom properties you paste into :root.
Example
With a base of 16px and the major third (1.25) ratio:
| Step | Formula | px | rem | Typical use |
|---|---|---|---|---|
| 0 | 16 × 1.25⁰ | 16 | 1.0 | Body / small labels |
| 1 | 16 × 1.25¹ | 20 | 1.25 | Lead paragraph |
| 2 | 16 × 1.25² | 25 | 1.563 | H3 / card title |
| 3 | 16 × 1.25³ | 31.25 | 1.953 | H2 / section heading |
| 4 | 16 × 1.25⁴ | 39.06 | 2.441 | H1 |
| 5 | 16 × 1.25⁵ | 48.83 | 3.052 | Display / hero |
The generated CSS reads --step-1: 1.25rem; /* 20px */ and so on, ready to paste into :root and reference with var(--step-2) on your headings.
Choosing the right ratio
The ratio is the biggest creative decision. A smaller ratio produces a compact, editorial feel where heading levels are close together — good for dense interfaces or data-heavy dashboards. A larger ratio creates dramatic contrast between levels — right for marketing pages, landing sites, and hero-forward layouts.
| Ratio | Name | Character |
|---|---|---|
| 1.067 | Minor second | Very tight — almost invisible difference between steps |
| 1.125 | Major second | Subtle, suits small-screen or dense UIs |
| 1.200 | Minor third | Balanced, good default for most web products |
| 1.250 | Major third | Clear contrast, widely used |
| 1.333 | Perfect fourth | Punchy, common in editorial/blog designs |
| 1.618 | Golden ratio | Very dramatic, best for large-format hero sites |
Practical notes
- Rem over px — custom properties in rem scale with the user’s browser base size, which is an accessibility win for users who have increased their default text size.
- Steps 0–2 for UI text, 3–5 for headings is a common split; step 0 or a half-step below it handles captions and labels.
- If a step lands on an awkward decimal (say, 31.25px), rounding to the nearest pixel in the design tool is fine — the scale gives a target, not a hard constraint.
- The CSS output is named
--step-0through--step-5rather than semantic names like--heading-1, which keeps it reusable: you decide which heading level maps to which step in your design system.
Everything is computed locally in your browser — no data is uploaded.