字号阶梯
全站只用三到四个字号。级数越少，每一级的意义越明确。
你会遇到的现象
- 页面上有七八种字号，但读起来还是平的
- 每加一个新元素都要纠结用多大的字
- 同类信息在不同页面上字号不一样
字号多不等于层级多。相邻两级只差一两个像素时，用户感知不到差别，只会觉得「有点不齐」。层级来自差距，不来自级数。
怎么定阶梯
| 级别 | 桌面端 | 移动端 | 用在哪 |
|---|---|---|---|
| 大标题 | 28–32px | 22–24px | 页面主标题，一屏只有一个 |
| 小标题 | 16–18px | 16px | 区块标题、卡片标题 |
| 正文 | 14–15px | 15–16px | 主要内容。移动端反而要大一点 |
| 辅助 | 12–13px | 12px | 时间、状态、说明文字 |
需要更多档位时，用等比数列生成：从正文出发，乘以 1.25 或 1.333 往上、除以同样的比例往下。这样得到的阶梯天然协调。
字号之外还有三个维度
层级不必全靠字号。多数情况下，加粗和变灰比加大字号更克制。
| 维度 | 怎么用 | 好处 |
|---|---|---|
| 字重 | 常规和加粗两档就够 | 不改变占位空间，布局不用调 |
| 颜色深浅 | 主文字近黑、次要文字中灰、辅助文字浅灰 | 同一个字号能拉出三个层级 |
| 间距 | 重要的周围留更多空间 | 完全不改字本身，最干净的一种 |
- 中文的字重别用太细。Light 在小字号上会糊。正文用常规，强调用中粗或加粗。
- 字号和行高要成对定。每个字号配一个固定行高，别让 AI 每次自己算。
- 写成变量。跟间距一样，定义成令牌，改一次全站生效。