通用之网

2.0 单词

面向屏幕阅读的单词层面可读性——大小写、间距、行长、层级与平实写作——建立在对眼睛与心智真实阅读方式的现代理解之上。

10 min read

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

1.0 节讨论的是易读性——单个字形能否被分辨。本节上移一个层次,讨论可读性:单词、行与段落能否被轻松、快速、理解无碍地阅读。这一区分之所以重要,是因为一个页面可以通过所有字形测试,却仍以局促的间距、马拉松式的长行、扁平的层级或藏起要点的文字耗尽读者。易读性是字体的属性;可读性是整个阅读体验的属性,而现实世界中大多数失败都发生在这里。

2005 年版对这片领地的梳理是得当的——大小写、间距、行长、层级、写作质量——其实践建议需要的修订比其理论少。变化最大的是我们对阅读过程本身的图景,这幅图景值得展开,因为它解释了那些实践规则为什么有效。

2005 年以来的变化

2005 年,许多排版建议建立在词形模型之上:熟练读者靠单词的整体轮廓——升部与降部构成的"Bouma 形状"——来识别单词。该模型已被取代。阅读科学的共识——由 Kevin Larson 2004 年对心理学文献的综述有力地论证,并被此后二十年的研究不断强化——是并行字母识别:读者同时识别单词的组成字母,单词识别建立在字母层面的证据之上。词形贡献甚微;字母身份几乎贡献了一切。第 2.1 章将详细讨论这对单词大小写的影响。

相比之下,眼动的机制当时已经确立,此后只是不断得到证实。阅读不是平滑的扫视。眼睛以快速的跳跃——眼跳——移动,其间穿插短暂的停顿——注视——约五分之一到四分之一秒,几乎所有的视觉摄取都发生在注视期间。每次注视中只有中央的一小块区域(中央凹)提供清晰细节;外围更宽的范围提供粗略的预览信息,帮助眼睛规划下一跳。熟练读者会摄取注视点右侧的若干字母,跳过简短可预测的词,并在理解受阻时偶尔向后跳(回视)。

这一模型把排版规则从民间传说变成了工程学。舒适的行长之所以有效,是因为从行尾折回行首的回扫是页面上最长、最容易出错的眼跳。充足的行距之所以有效,是因为它防止回扫落到错误的行上。均匀的词距之所以重要,是因为词间空隙是眼跳规划赖以导航的地标。右侧不对齐之所以胜过两端对齐,是因为两端对齐会不均匀地重新分配这些地标,注入忽宽忽窄的间距之河,扰乱眼跳的落点——这对所有读者都是实际成本,对阅读障碍或低视力读者则是沉重的成本。

一个句子中只有注视点——中央凹——处的七到九个字母是清晰的,副中央凹为下一次眼跳提供粗略预览。

间距、行长与更新后的数字

第一版的指导经调整后依然有效。

  • 词距。 保持均匀;避免在网页上使用两端对齐,网页的断词与对齐引擎仍然粗糙。若必须两端对齐,请启用连字符断词,并在窄宽度下检查效果。
  • 字母间距。 2005 年提出的小幅加宽字距的建议,对小字号和大写字母仍然成立,但现代正文字体在正文字号下的间距已由设计师调校得当——更重要的要求是容忍度:WCAG 2.2 的文本间距标准(1.4.12)要求内容能经受用户对字母、单词、行与段落间距的增加。设计时要保证这些覆盖不会破坏布局。
  • 行距。 正文约为字号的 1.4 到 1.6 倍;行越长越取高值。WCAG 自身的参考点是段内行距至少 1.5。
  • 行长。 2005 年的每行 55–65 字符目标仍是稳妥的中心值;大约 45 到 75 字符之间都能读得舒适。现代的改进在于响应性:用基于 ch 或基于内容的单位设定行长,使其在各视口下保持;并记住在 200% 缩放(WCAG 1.4.4)和回流条件(1.4.10)下,你的行长必须优雅地退化而不是崩塌。

层级与信息的形状

字体层级之所以在可读性一章中占有一席之地,是因为眼跳并不局限于句子——读者以同样的方式浏览页面:取样、跳跃。标题层级之间清晰的字号与字重对比、诚实使用语义化标题元素(它们同时是屏幕阅读器用户的导航骨架)、标题上方宽裕的空间,都能降低读者定位的成本。把标题和链接的区别性词语放在开头:读者——尤其是浏览标题列表或链接列表的屏幕阅读器用户——依据前两三个词做出判断。

印刷时代的缩进与间距惯例依然适用:段落要么缩进要么空行,不要两者兼施,并保持信号一致,让读者的眼睛只需学习一次。

写作即排版

2005 年版以写作质量收尾,理所应当——没有任何排版设置能拯救读者无法解析的文字。此后的岁月将这一点制度化。平实语言实践如今已写入多个国家的标准与政府法令,WCAG 3.0 的草案更把清晰语言本身当作无障碍的一个维度。工作规则仍是原版在精神上引用的那些:偏爱常用词、短句、主动句式;先说要点再展开;删去不为读者服务的内容。生僻词和缠绕的句法会延长注视、增加回视——平实的写作在测量意义上更易阅读,而不仅仅是更有礼貌。

CSS 实践

p {
  max-width: 65ch;        /* measure, set in characters */
  text-align: left;       /* ragged right keeps word spacing even */
  text-wrap: pretty;      /* better rag, fewer orphans */
}

建议

  • 把可读性当作一个系统来对待:字体选择、间距、行长、层级与文字质量共同成败。
  • 正文行长保持在 45–75 字符之间,理想为 55–65,并在缩放与回流中以响应式方式保持。
  • 行距设为字号的 1.4–1.6 倍;行越长取值越高。
  • 使用右侧不对齐;避免在网页上使用两端对齐。
  • 确保布局能经受 WCAG 1.4.12 规定的用户间距覆盖。
  • 在语义化标题结构上,用字号、字重和空间构建层级;标题和链接要点前置。
  • 写得平实:常用词、短句、要点先行。
  • 让阅读模型指导权衡——凡是让眼跳目标更可预测、让字母更易识别的做法,都是在与读者协作,而不是与之对抗。

延伸阅读