通用之网

1.1 字体风格

为什么 2005 年“屏幕上使用无衬线体”的规则在高分辨率显示器上不再成立——以及应当转而评估什么:x字高、字腔开口、字母区分度与渲染质量。

9 min read

本页面借助 AI 辅助翻译。英文原文为权威版本。

2005 年版指南在这里给出了它最不留情面的指示:屏幕是恶劣的阅读环境,所以请使用无衬线字体。它警告说,衬线在正文字号下会化作视觉噪点;纤细的笔画与微妙的细节根本渲染不出来。对那个时代的显示器,这条建议是对的。对这个时代的显示器,它需要作为规则退役,代之以其背后一直存在的推理。

自 2005 年以来的变化

最初的建议其实从来不关乎衬线,而关乎像素。在 96 DPI 的面板上,一条只有两三个物理像素长的衬线,要么吸附到像素网格上成为笨拙的粗块,要么消融为抗锯齿的雾。细笔画断裂;带弧形托架的曲线变成阶梯。为屏幕而设计的无衬线体——Verdana、Tahoma 及其同侪,以结实的等粗笔画和宽裕的间距绘成——绕开了这一切。推荐它们,是针对一台画不出衬线的渲染引擎的防御性设计。

这一约束已大体消解。高密度显示器为每个 CSS 像素渲染两到三个设备像素,足以用接近印刷的保真度画出精细的衬线、笔画粗细变化和微妙的连接处。现代灰度抗锯齿在这样的密度下能干净利落地处理曲线与斜线。在这类屏幕上,同一有效字号下的优质正文衬线体与优质无衬线体都完全易读,更广泛的阅读研究也印证了这一点:在控制了 x字高、字号与间距之后,衬线与无衬线两种风格在阅读速度和理解度上的测得差异既小又不一致。把衬线/无衬线这个变量从它过去的所有随行变量中剥离出来,它能解释的东西很少。

有两点保留使旧规则不能被简单反转。其一,标准密度显示器在桌面上仍然常见,纤弱的衬线在其上依旧劣化——任何选作正文的字体都应在 1x 渲染下验证,微调(hinting)质量和笔画的结实程度在那里仍然物有所值。其二,对本项目更重要的是:低视力情形不是平均情形。

真正预测易读性的因素

既然风格分类不再是筛选标准,取而代之的是一份简短的结构清单——即第 1.0 章引入的那份,在此用于候选字体之间的抉择。

首先是 x字高。x字高大的字体读起来更大,在小字号下比其名义尺寸所暗示的更耐用,与是否带衬线无关。许多当代正文衬线体的 x字高与任何屏幕无衬线体一样慷慨。

其次是字腔开口。a、c、e、s 中开放的字怀与开口,在模糊和低视敏度下保住字母的身份。这一点跨越分类:既有开放、易读的衬线体,也有封闭、含混的无衬线体。正当红的几何无衬线一类是常见的问题户,其近乎正圆的字形彼此趋同。

第三是字母区分度。做 Il1 测试:把大写 I、小写 l 和数字 1 排在一起。许多流行的无衬线体当场落败,把 I 和 l 渲染成完全相同的竖笔——在密码、代码和人名中是真实的隐患。讽刺的是,衬线体往往自动通过,因为衬线恰恰区分了这些字母。还要检查 b/d 与 p/q 的镜像问题,以及 r 与 n 这一对——排得太紧时它们会融成 m。

最后是渲染质量。面向界面的正文字体应在它真正的生存环境中测试:目标字号下、高 DPI 与标准密度屏幕上、浅色与深色模式中。字体文件的制作精细程度参差不齐——面向低密度栅格化的微调、小字号下的间距——这一工艺维度比衬线的有无更要紧。

字母 aegs 分别以衬线体与无衬线体排出,正文字号下易读性大致相当——真正的预测因素是 x字高、字腔开口、可区分的字母与间距。

低视力的细微之处

对低视力读者而言,2005 年的告诫以柔化的形式保留着实实在在的力量。低视敏度像一层模糊滤镜,而在模糊之下,细节最先阵亡。高笔画对比的衬线设计——那些有着极细发丝线和纤巧衬线的——会丢掉细笔画,连同字母的结构一起。结实、低笔画对比的字体劣化得更从容,而符合这一描述的字体大多是无衬线或接近平板衬线的设计。因此,尽管一刀切的规则已经作废,低视力正文的实践重心依然是一款健壮、开放、笔画均匀的字体——它常常(但不必然)是无衬线体。

2005 年关于连续文本不得使用装饰性和高度风格化字体的警告原封不动地成立。装饰性字体为风格牺牲字母结构,而视觉余量最少的读者付出的代价最高。大字号下的展示用途是另一个宽容得多的语境。

再补一条现代注记:对“某些风格对阅读障碍读者普遍更好”的说法应持谨慎态度。专用字体在受控研究中并未表现出一致的客观优势;真正有帮助的特征——字母区分度、宽裕的间距、足够的字号——在任何分类的许多优质字体中都能找到,而用户可调的设置比任何单一的字体选择帮助更大。

CSS 实现

/* Screen for structure, not classification */
body {
  /* Georgia: large x-height, open apertures, screen-hinted */
  font-family: Georgia, Charter, "Bitstream Charter", serif;
}
.ui {
  font-family: system-ui, sans-serif;  /* the platform's proven face */
}

建议

  • 让“只用无衬线体”作为规则退役;改为对候选字体做结构性评估。
  • 正文要求大 x字高、开放的字腔开口,以及均匀、适度的笔画对比。
  • 应用 Il1 与 b/d/p/q 测试;淘汰字母彼此趋同的字体。
  • 在低视力攸关的场景中,避免带纤细发丝线的高对比设计;青睐结实、低对比的构造。
  • 在标准密度与高 DPI 屏幕上、浅色与深色两种模式下,以真实字号验证渲染效果。
  • 继续将装饰性和高度风格化的字体排除在连续文本之外。

延伸阅读