字号比例阶完全指南:用排版比例代替随手定字号

我接手过一份样式表,里面的字号是 13、15、19、22、29px,散在十几个文件里。没人说得清 19 和 22 为什么差 3px,改一处就有一处对不上。这种页面不是设计出来的,是一次次"这里再大一点"攒出来的。模块化字号比例阶要解决的就是这件事:不再一个个挑字号,而是定一个基准、定一个比例,剩下每一级都由公式算出来。

为什么是比例,不是随手定字号

随手定字号的问题不在某个数字错了,在于级与级之间没有关系。16、18、24、32 看着没毛病,可 16 到 18 跳了 12.5%,18 到 24 跳了 33%,层级的节奏是乱的,眼睛读不出"这是上一级的放大"。

比例阶反过来:每一级都是上一级乘以同一个固定比例。这样每一跳的视觉比重都相等,层级读起来像音阶一样连贯。这也是这些比例为什么带着"大三度""纯四度"这种音乐名字,它们本就来自音程。定义整套阶的公式只有一个:

字号 = 基准 × 比例 ^ 阶

阶是层级序号,正数往上(标题),0 是正文,负数往下(说明文字、版权行)。一个比例值就把整套层级的关系钉死了,你只需要决定基准和往上往下各走几级。

逐级算一遍:16px 基准、1.25 比例

光说公式抽象,直接算。取基准 16px,比例 1.25(大三度),往上 5 级、往下 2 级:

• 阶 -2:16 × 1.25^-2 = 10.24px(版权行、overline)
• 阶 -1:16 × 1.25^-1 = 12.8px(说明文字)
• 阶 0:16px(正文)
• 阶 +1:16 × 1.25 = 20px(小标题)
• 阶 +2:16 × 1.25^2 = 25px(段落标题)
• 阶 +3:16 × 1.25^3 = 31.25px(小节标题)
• 阶 +4:16 × 1.25^4 = 39.06px(页面标题)
• 阶 +5:16 × 1.25^5 = 48.83px(主标题)

注意 31.25、39.06 这种带小数的值,这是比例阶的常态,不必凑整。重点是相邻两级永远差 25%,无论你看哪两级,比重都一致。这种一致性正是手调字号给不了的。

该选哪个比例

比例不是越大越好,它直接决定标题和正文的反差:

• 1.067 到 1.2(小二度到小三度):标题和正文贴得近,适合仪表盘、文档、信息密集的后台,纵向空间紧时不浪费。
• 1.25 到 1.333(大三度到纯四度):营销页和博客的稳妥默认,对比够强,一眼读得出层级。拿不准就从 1.25 起步。
• 1.5 到 1.618(纯五度到黄金比例):戏剧性的编辑式大标题,但超过 +4 级就容易失控。1.618 从 16px 往上 +6 级会超过 280px,当海报行,当 UI 阶不行。

生成 CSS 变量和 rem,而不是抄一列数字

算出阶只是一半,落地要变成代码。把每一级写成 CSS 自定义属性,组件全程引用变量,从此没人再写魔法数字:

:root {
  --text-sm: 0.8rem;     /* 12.8px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.25rem;    /* 20px */
  --text-xl: 1.5625rem;  /* 25px */
  --text-2xl: 1.9531rem; /* 31.25px */
  --leading-tight: 1.2;
  --leading-base: 1.5;
}

这里全用 rem 而不是 px,是有意的。rem 跟随用户浏览器的字号设置缩放,读者把默认字号调到 20px,你整套阶就等比例放大,这是白拿的无障碍收益;px 写死,无视这个偏好。只有邮件客户端、canvas 渲染、或要对齐以 px 写的设计稿这类场景才该导 px。

一个常见坑:rem 依赖根字号。如果 CSS 写了 html { font-size: 62.5% } 让 1rem = 10px,你却按默认 16px 根算 rem,每个值在浏览器里都会差 1.6 倍。换算 px 和 rem 两边对不上时,可以用 px ↔ rem 换算器 单独核一遍,确认根字号设对了。

把整套阶接成层级系统

有了变量,排版层级就是把语义标签挂到对应的级:正文用 --text-base,小标题 --text-lg,页面标题 --text-4xl。再配一条规则:大字号的行高要比正文小。48px 标题用 1.5 会松垮飘浮,用 1.2 才紧凑。让行高随字号收紧,标题自动利落,小字保持舒展,整套层级才立得住。

逐级手算、再手写一长串变量,容易抄错小数。我自己现在都直接用 字号比例阶生成器 把基准、比例、上下级数填进去,实时看到每一级的真实大字预览,再一键导出 CSS 变量或 Tailwind 配置,省掉对小数点的来回核对。

定一个基准,选一个比例,剩下交给公式。下次有人说"整体再大一点",你只改基准重导,层级关系一点不乱。这就是比例阶相比随手定字号最实在的好处:它把"好看"变成了可复算、可分享、可维护的系统。

---

Made by Toolora · Updated 2026-06-13