字号阶梯
三到四级字号就够用，多了层级反而散。
全站只用三到四个字号。级数越少，每一级的意义越明确。
你会遇到的现象：
- 页面上有七八种字号，但读起来还是平的
- 每加一个新元素都要纠结用多大的字
- 同类信息在不同页面上字号不一样
字号多不等于层级多。相邻两级只差一两个像素时，用户感知不到差别，只会觉得「有点不齐」。层级来自差距，不来自级数。字号阶梯的目的不是让标题更大，是让每一级各司其职。判断够不够用有个简单办法：把页面上的字号从小到大列出来数一数。超过五档，多半不是内容需要，而是没人敢砍。如果让 AI 来排，它倾向于给每个元素挑一个「合适」的字号，结果就是七八种微差字号——把它限制在三到四级，反而逼它用层级而不是靠猜。
怎么定阶梯
| 级别 | 桌面端 | 移动端 | 用在哪 |
|---|---|---|---|
| 大标题 | 28–32px | 22–24px | 页面主标题，一屏只有一个 |
| 小标题 | 16–18px | 16px | 区块标题、卡片标题 |
| 正文 | 14–15px | 15–16px | 主要内容。移动端反而要大一点 |
| 辅助 | 12–13px | 12px | 时间、状态、说明文字 |
这是一套常见的四档，够大多数页面用。
相邻两级至少差 1.25 倍。14 到 16 的差别很难看出来，14 到 18 就明显了。移动端的正文比桌面端大，是因为观看距离更近但屏幕更小。需要更多档位时，用等比数列生成：从正文出发，乘以 1.25 或 1.333 往上、除以同样的比例往下。这样得到的阶梯天然协调——网页排版里的模块化比例就是这么来的。modular-scale 阶梯要从正文这条基准线出发定，而不是从标题出发——标题再大，也要回到正文的节奏上。
定完之后，每一级负责一种工作：大标题负责表态，小标题负责分节，正文负责阅读，辅助负责说明。同一级在哪儿都用同一个值，不许微调。验收时把页面缩小看：能一眼分出标题和正文，阶梯就成立；分不出，说明差距还不够，回去加大差距而不是加级数。
字号之外还有三个维度
层级不必全靠字号，很多层级用字号之外的维度就够了。多数情况下，加粗和变灰比加大字号更克制。
| 维度 | 怎么用 | 好处 |
|---|---|---|
| 字重 | 常规和加粗两档就够 | 不改变占位空间，布局不用调 |
| 颜色深浅 | 主文字近黑、次要文字中灰、辅助文字浅灰 | 同一个字号能拉出三个层级 |
| 间距 | 重要的周围留更多空间 | 完全不改字本身，最干净的一种 |
四个字号乘以两档字重乘以三档颜色，理论上有二十四种组合，实际常用的不超过八种。够用了。字重和颜色都能在同一个字号里拉出层级，所以真正需要动字号的地方其实很少。
- **中文的字重别用太细。**Light 在小字号上会糊。正文用常规，强调用中粗或加粗。
- **字号和行高要成对定。**每个字号配一个固定行高，别让 AI 每次自己算。
- **写成变量。**跟间距一样，定义成令牌，改一次全站生效。
字号阶梯和间距、颜色、圆角一起，构成最小设计系统的四组变量；全部收敛成固定值，AI 生成的界面才谈得上一眼一致。