字号阶梯 | 设计界面 | 做产品

字号阶梯

全站只用三到四个字号。级数越少，每一级的意义越明确。

你会遇到的现象

字号多不等于层级多。相邻两级只差一两个像素时，用户感知不到差别，只会觉得「有点不齐」。层级来自差距，不来自级数。

级别桌面端移动端用在哪大标题28–32px22–24px页面主标题，一屏只有一个小标题16–18px16px区块标题、卡片标题正文14–15px15–16px主要内容。移动端反而要大一点辅助12–13px12px时间、状态、说明文字

相邻两级至少差 1.25 倍。14 到 16 的差别很难看出来，14 到 18 就明显了。移动端的正文比桌面端大，是因为观看距离更近但屏幕更小。

需要更多档位时，用等比数列生成：从正文出发，乘以 1.25 或 1.333 往上、除以同样的比例往下。这样得到的阶梯天然协调。

层级来自差距，不来自级数

七八个字号，相邻只差 1–2px 页面主标题区块标题正文内容在这里辅助说明文字用户感知不到差别，只会觉得「有点不齐」

四级，相邻至少差 1.25 倍页面主标题区块标题正文内容在这里辅助说明文字一屏只有一个大标题，其余各归各位

而多数时候，加粗和变灰比加大字号更克制——同一个字号也能拉出三级，布局完全不用调主要文字　近黑＋加粗次要文字　中灰辅助文字　浅灰四个字号 × 两档字重 × 三档颜色，理论上二十四种组合，实际常用的不超过八种——够用了。

中文还有一条要注意：字重别用太细，Light 在小字号上会糊，正文用常规、强调用中粗或加粗就够。另外字号和行高要成对定义成变量，别让 AI 每次自己算。

层级不必全靠字号。多数情况下，加粗和变灰比加大字号更克制。

维度怎么用好处字重常规和加粗两档就够不改变占位空间，布局不用调颜色深浅主文字近黑、次要文字中灰、辅助文字浅灰同一个字号能拉出三个层级间距重要的周围留更多空间完全不改字本身，最干净的一种

四个字号乘以两档字重乘以三档颜色，理论上有二十四种组合，实际常用的不超过八种。够用了。

排版基础字号范围、行距比例、中文排版的坑，都在那一篇里。

一套间距同一个思路的另一半。间距和字号一起收敛，页面才有秩序感。

建一份最小设计系统字号阶梯是四组变量之一，跟颜色、间距、圆角一起固化下来。