Modular font scale
Turn a base size and a ratio (1.125 / 1.2 / 1.25 / 1.333 / 1.414 / 1.5 / 1.618 or your own) into a modular type scale with px and rem sizes, proportional line heights, CSS variables and utility classes.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Scale settings
Sizes follow the geometric series f(n) = base × ratio^n, while line heights scale inversely with size and are clamped between 1.1 and 2.
Live preview
The preview renders with the current scale, so sizes and line heights match the generated CSS.
Geometric series：f(n) = 16px × 1.25^n
Result
| Step | Variable | Size px | Size rem | Line height | Leading px |
|---|---|---|---|---|---|
| 2 | --font-size-2 | 25 | 1.5625 | 1.1 | 27.5 |
| 1 | --font-size-1 | 20 | 1.25 | 1.2 | 24 |
| 0 | --font-size-0 | 16 | 1 | 1.5 | 24 |
| -1 | --font-size-n1 | 12.8 | 0.8 | 1.88 | 24.06 |
:root {
--font-size-2: 25px; /* 1.5625rem */
--font-size-1: 20px; /* 1.25rem */
--font-size-0: 16px; /* 1rem */
--font-size-n1: 12.8px; /* 0.8rem */
}
.text-2 {
font-size: 25px;
font-size: 1.5625rem;
line-height: 1.1;
}
.text-1 {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.2;
}
.text-0 {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
.text-n1 {
font-size: 12.8px;
font-size: 0.8rem;
line-height: 1.88;
}:root {
--font-size-2: 25px; /* 1.5625rem */
--font-size-1: 20px; /* 1.25rem */
--font-size-0: 16px; /* 1rem */
--font-size-n1: 12.8px; /* 0.8rem */
}.text-2 {
font-size: 25px;
font-size: 1.5625rem;
line-height: 1.1;
}
.text-1 {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.2;
}
.text-0 {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
.text-n1 {
font-size: 12.8px;
font-size: 0.8rem;
line-height: 1.88;
}What this tool does
- Define the type hierarchy of a design system: pick a ratio (1.25 for body copy, 1.2 for dense UIs, 1.5 for editorial layouts) and get a set of sizes that never fight each other.
- Ship sizes as rem variables so a rebrand is one change: move the root size and the whole scale follows proportionally instead of you editing px everywhere.
- Audit an existing layout: feed the sizes you actually use into the base size and ratio to see whether they sit on a single geometric series.
- Working across scripts? Use a bigger ratio and more steps (1.414 with four steps, say) so CJK and Latin text keep a visible hierarchy.
Example
Input
Base size 16px, ratio 1.25, 2 steps up, 1 step down, root size 16px
Output
Formula f(n) = 16px × 1.25^n; variables --font-size-2: 25px (1.5625rem), --font-size-1: 20px (1.25rem), --font-size-0: 16px (1rem), --font-size-n1: 12.8px (0.8rem); class .text-2 { font-size: 25px; font-size: 1.5625rem; line-height: 1.1; }Negative steps use an n prefix (n1 means step −1) so the name never becomes the invalid --font-size--1.
Frequently asked questions
Which ratio should I pick?
Use 1.2 or 1.25 for body copy and UI text with few levels, 1.333–1.5 when you want obvious contrast on a marketing page. 1.618 spreads steps so far apart that it is usually only practical for the largest headings. The closer the ratio is to 1, the more steps you need before the sizes look different.
How are the line heights computed?
They scale inversely from the base step: line height = base line height × base size ÷ this size, clamped between 1.1 and 2. Larger text therefore gets tighter leading and smaller text looser leading, which keeps the perceived rhythm of a paragraph steady.
Why are both px and rem emitted?
The rem declaration comes second and wins, but a browser that cannot parse rem falls back to the px line — progressive enhancement. Sizing in rem also respects the reader’s root font size, which is better for accessibility.
Why is the negative step called n1?
Custom property names cannot contain a double hyphen, so step −1 becomes --font-size-n1 and the class .text-n1, where n stands for negative. Step 0 is the base size and higher positive steps are larger.
Is there a step limit?
Up to 8 steps each way, 17 sizes in total. More than that is impractical: with any ratio above 1 the sizes grow fast, and beyond eight steps you are well outside a sensible typographic range.
Keywords：modular scalefont scaletype scaletypographyfont sizerem字阶字体比例模块化字阶字号阶梯行高排版