F4.01.1type scale设计

有限的字号档位保证一致性

别名: 模块化字号 · 字号体系 · 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,按角色归堆。同一角色出现两个以上簇,阶梯已经在漏。

延伸

  • 同组F4.01.2 相邻档位差异需可辨 · F4.01.3 正文字号存在与视距绑定的下限
  • 相邻F3.02 尺寸对比 · F4.07 字体选择
  • 站内检索type scale · modular scale · type ramp · typographic hierarchy

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F4.01.1