本页面借助 AI 辅助翻译。英文原文为权威版本。
易读性始于字母。在读者能够识别一个单词之前,视觉系统必须先分辨出单个字形——而每一个让字母更容易或更难分辨的因素,都会在一次阅读中的数千次注视里累积放大。原版指南将决定性因素归纳为字体风格、字重、倾斜、宽度与间距。这份清单完好地保留了下来。改变的是这些字母被绘制的环境,以及设计师如今对每个因素的掌控程度。
2005 年以来的变化
2005 年版是为这样的屏幕写的:正文字号下一个小写字母的高度大约只有九到十个像素。在那样的分辨率下,像素网格是主导性约束:笔画吸附到整像素,细节要么消失要么变成噪点,而渲染技术——Windows 上的 ClearType 等次像素抗锯齿、其他平台上的灰度抗锯齿——对字母外观的决定权不亚于其设计师。Hinting,即在字体中嵌入网格对齐指令的做法,是正文字体可用与不可用的分水岭。
高密度显示器改写了这笔账。在每个 CSS 像素对应两到三个设备像素时,同一个字母可动用的像素预算是原来的四到九倍。高 DPI 下的灰度抗锯齿能忠实呈现曲线、细笔画和真正的斜线;业界已基本放弃次像素渲染,因为像素密度使其不再必要。激进的 hinting 远不如从前重要——不过在依然常见的标准密度笔记本和桌面显示器上它仍有影响,这正是字母层面的建议尚不能假定处处都是高 DPI 的原因。
第二个结构性变化是可变字体。字重(wght)、宽度(wdth)、光学字号(opsz),以及某些家族中的字级(GRAD),如今都是可以从 CSS 中调用的连续轴。原版指南把字体的字重和宽度当作有待挑选的固定属性;它们现在是有待调校的参数——包括根据字号、背景颜色和用户偏好来调校。
真正重要的字形解剖
自 2005 年以来,字母识别研究愈发清晰,并持续指向一小组结构特征。
x字高仍是表观大小与小字号易读性最可靠的单一预测指标。两款字体在相同名义字号下的视觉大小可能差异巨大;x字高更大的那款看起来更大。这正是 CSS font-size-adjust 存在的原因——它把回退字体归一到目标x字高比例,使字体替换不会悄然缩小文字。
字腔——c、e、a、s 等字母上的开口——决定了这些字母与其闭合近邻的区分难易。字腔开放的字体在低视力模糊或小字号渲染下能让 c 与 o、e 与 a 保持区别;字腔封闭内收的字体最先丢失这些区别。过去二十年面向易读性的字体设计坚决地转向开放字腔,低视力研究也支持这一转向。
字母区分度是第三根支柱。易混淆的字母对——b/d、p/q,尤其是大写 I、小写 l 和数字 1——是识别最早失败的地方。原版曾指出 Natascha Frensch 的 Read Regular 是一款为阅读障碍读者区分镜像字母而设计的字体;这一设计方向此后已成主流,快速的"Il1"测试(把三个字符并排排出,检查它们是否有别)如今是筛选任何界面或正文字体的标准步骤。
笔画表现补全了这份清单。相对均匀的笔画宽度、适中的粗细对比、适中的整体宽度,这些都从 2005 年延续了下来——极端的笔画调制和极端的压缩在模糊条件下都会摧毁字形,而模糊正是低视力和劣质观看条件的一个合理模型。
作为连续选择的字重、倾斜与宽度
原有的指导——常规到略粗的字重、直立而非倾斜、适中的宽度——依然成立。修订之处在于这些选择的做出方式。
有了可变字重轴,"略粗"不再是从 400 跳到 700;它可以是 450 或 480,足以为深色背景或小字号加粗笔画,又不至于闭合字怀。光学字号轴(如果有的话)自动完成了字体设计师当年为不同字号分别刻制的工作:小字号下设计会打开字腔、放松间距、降低对比;大字号下则收紧。凡是提供 opsz 的字体,就让它生效——浏览器默认如此——因为它恰恰编码了本章推荐的小字号调整。
倾斜对连续文本仍是易读性上的损失。意大利体用于强调,而非整段文字;伪斜体(机械倾斜的正体)比真正的意大利体更糟,因为它扭曲了字形却没有重新设计它们。
字母层面的间距
2005 年的发现——屏幕文字需要比印刷更宽裕的字母间距和行距——部分是分辨率的产物:宽松的间距防止粗糙的像素字母粘连。但不止于此。拥挤效应研究表明,排得过紧的字母会削弱边缘视野和低敏度视觉中的识别,因此低视力读者确实受益于小字号下略松的排布。WCAG 2.2 从用户一侧确认了这一点:成功标准 1.4.12(文本间距)要求内容在用户增加字母、单词和行间距后不发生损失。作为风格签名的紧排在展示字号下无妨;在正文字号下,它是向视力余量最少的读者征收的税。
CSS 实践
/* Preserve letterform quality across fallbacks */
body {
font-family: "Source Sans 3", system-ui, sans-serif;
font-size-adjust: 0.5; /* match fallback x-height to the web font */
font-kerning: normal;
}
建议
- 按结构而非分类筛选字体:大x字高、开放的字腔、均匀的笔画宽度、适中的宽度。
- 在确定正文字体之前,先做 Il1 测试并检查 b/d/p/q 的区分度。
- 有意识地使用可变字体轴——按语境做小幅字重增量,并让光学字号(opsz)在小字号下发挥作用。
- 连续文本保持直立;倾斜只留给强调。
- 正文字号下将字母间距设为中性到略松,并验证布局能经受 WCAG 1.4.12 的用户间距覆盖。
- 在标准密度显示器上测试,而不只是高 DPI 屏幕;对许多读者来说像素网格依然存在。