有限的字号档位保证一致性
别名: 模块化字号 · 字号体系 · type ramp
概念解释
一个产品里如果「正文」有时是 14、「卡片说明」是 15、「列表副标题」是 16,再过两个页面标题又各自发明 20 和 22,读者并不会感激这些微调。他们只会感到同一类文字没有同一张面孔。字号阶梯(type scale)把允许出现的尺寸收成有限几档,每档绑定一个角色——辅助、正文、小标题、大标题、展示——而不是每次排版现场拍一个像素。
有限是手段,一致性才是结果。档位可以是 5 档也可以是 8 档,关键是同一角色在所有屏幕上落到同一档,而不是「看起来差不多」。
机制
人按类别而不是按毫米来认文字层级。标题之所以被认成标题,是因为它反复以同一个尺寸出现,和正文形成一个稳定的对比关系。一旦每个页面自己加半档,这个类别就散了:15 和 16 在视网膜上几乎是同一号,却被两个团队当成两种语义来用,界面失去可预测的「这是什么级别」。
限制档位等于给文字角色做词汇表。新页面只能从词表里取号,不能现场造词。工程上这也挡住了最常见的漂移来源:从别的文件复制一段样式过来,顺手改两个像素「更精致一点」。复制不再产生新尺寸,漂移才停得住。
阶梯通常以正文档为原点,按固定比例向上下延展。比例本身不神秘——1.125、1.2、1.25 都有人用——真正起作用的是「原点只有一个、档位是离散的」。连续可调的滑杆看起来自由,结果是每个断点、每个语言、每个组件库分支出一套自己的尺寸。
边界
仪表、地图标注、法律小号条款这类受外部介质或法规约束的文字,本来就不在产品自己的阶梯里,硬收进去会和纸质原件或法定字号打架。品牌展示页上偶尔出现一档超出阶梯的超大数字,只要它不回流到列表、设置和正文,不会把词汇表冲垮。真正危险的是「只此一次」的例外在组件库里留了下来,三个月后变成第六种正文。
跨端也不该共用同一套像素阶梯。手机、笔记本和客厅屏幕的观看距离不同,正文档的绝对值应当换,角色结构可以共用。把手机的 16 像素正文原封搬到十英尺外的屏幕上,阶梯还在,可读性已经没了。
怎么落地
- 先点名角色再给尺寸:辅助、正文、标题 1、标题 2、展示。禁止在组件里写「再大一点的 17」。
- 从正文档生成其余档位,而不是从标题往下凑。正文是阅读量最大的一档,也是其他对比的参照。
- 在代码里只暴露阶梯里的命名尺寸,把裸像素或任意
font-size当成需要解释的例外。 - 验证:抽出产品里全部计算后的
font-size,按角色归堆。同一角色出现两个以上簇,阶梯已经在漏。