模块化字阶
用基准字号与比例（1.125 / 1.2 / 1.25 / 1.333 / 1.414 / 1.5 / 1.618 或自定义）生成等比字阶：每档的 px 与 rem、按比例推算的行高、CSS 变量与工具类。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
字阶设置
字号按等比数列 f(n) = 基准字号 × 比例^n 生成；行高按「字号越大行距越紧」的比例缩放，并夹在 1.1–2 之间。
实时预览
预览用当前字阶渲染，字号与行高跟生成的 CSS 完全一致。
等比数列公式：f(n) = 16px × 1.25^n
结果
| 档位 | 变量 | 字号 px | 字号 rem | 行高 | 行高 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;
}这个工具能做什么
- 给设计系统定字号层级：选一个比例（正文用 1.25、偏紧凑的界面用 1.2、编辑型排版用 1.5），直接得到一套不会打架的字号阶梯。
- 把字号写成 rem 变量后统一改版：根字号一变，整站字号按比例缩放，比逐处改 px 稳得多。
- 检查现有排版是否「和谐」：把实际用的字号填进基准字号与比例，看它们是否落在同一条等比数列上。
- 需要多语言排版时用更大的比例和更多档位（例如 1.414 配 4 档），让中文与西文混排时层级仍然分明。
示例
输入
基准字号 16px、比例 1.25、向上 2 档、向下 1 档、根字号 16px
输出
公式 f(n) = 16px × 1.25^n；变量 --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; }负档位用 n 前缀命名（n1 表示 −1 档），避免 --font-size--1 这种不合法写法。
常见问题
比例该选多少？
正文与界面文案层级不多时用 1.2 或 1.25；需要明显对比的营销页可用 1.333–1.5；1.618 会让相邻档位差距很大，通常只用来生成大标题那几档。比例越接近 1，档位越多才看得出区别。
行高是怎么算的？
以基准档的行高倍数为基准等比反向缩放：行高 = 基准行高 × 基准字号 ÷ 该档字号，并夹在 1.1–2 之间。这样字号变大时行距自动收紧，字号变小时行距变松，整段文字的视觉行距保持一致。
为什么同时输出 px 和 rem？
两条 font-size 声明中，后面的 rem 会覆盖前面的 px，但老浏览器解析不了 rem 时会退回 px，属于渐进增强写法。字号用 rem 的好处是跟随用户设置的根字号缩放，对可访问性更友好。
负档位的变量名为什么是 n1？
CSS 自定义属性名里不允许出现连续的 --，所以 −1 档写成 --font-size-n1、类名写成 .text-n1，用 n 表示 negative。0 档是基准字号，正数档越大字号越大。
档位数有上限吗？
向上、向下各最多 8 档，一共最多 17 个字号。档位再多实际页面里也用不上，而且比例大于 1 时字号增长很快，8 档之外已经超出合理排版范围。
关键词：modular scalefont scaletype scaletypographyfont sizerem字阶字体比例模块化字阶字号阶梯行高排版