排版比例生成器（模块化字号系统）

计算原理

A modular scale multiplies one base size by a fixed ratio for each step up and divides for each step down. This generator produces ten steps, from −5 to +4, using size = base × ratio^step, so at the default 16 px base and 1.2 ratio, step +1 is 19.20 px and step −1 is 13.33 px. Each row also reports rem (px ÷ 16), em (px ÷ base), and a suggested line-height of 1.7 − 0.1 × (step + 5), clamped between 1.05 and 1.7.

The ratio dropdown is the real design decision. Minor second 1.067 and Major second 1.125 give tight, dense scales suited to dashboards and data-heavy interfaces. Minor third 1.2, the default, and Major third 1.25 suit most websites. Perfect fourth 1.333, Augmented fourth 1.414, Perfect fifth 1.5 and Golden ratio 1.618 open up fast and work best for editorial or landing pages. Base size accepts 8 to 32 px, and the CSS variable prefix defaults to --fs.

Two caveats are worth knowing before you paste the export. The rem column always divides by 16, so if you change the root font size in your own stylesheet the exported rem values will no longer match the pixel figures shown. And the step names are offset from the arithmetic: the ten tokens run xs, sm, base, md, lg, xl, 2xl, 3xl, 4xl and 5xl across steps −5 to +4, which places step 0 — the size you actually typed — under the name xl rather than base.

常见问题