本页面借助 AI 辅助翻译。英文原文为权威版本。
字偶距是对两个特定字符之间空间的调整；词距是一行之内词与词之间空隙的节奏。二者服务于同一个目标：让文本肌理足够均匀，使目光以平滑的扫视穿过文字，而不是在深色的团块与白色的空洞之间磕磕绊绊。2005 年，本章认为间距质量在很大程度上受制于字体与渲染引擎，并认为屏幕上的两端对齐会降低可读性。二十年过去，第一个论断需要大幅修订；第二个论断——附带一条重要的限定——依然成立。
2005 年以来的变化
原版把字偶距当作网页基本做不到的事情。字体被栅格化到粗糙的像素网格上，字偶距数据常被浏览器忽略，设计师被告知要挑选经得起这种怠慢的字体。那个世界已经消失。所有现代浏览器默认对正文应用 OpenType 字偶距——CSS 属性 font-kerning 默认为 auto，会在正文字号下启用字偶距数据——而亚像素定位意味着这些调整确实会被渲染出来。实践建议因此完全反转：你不再需要为字偶距而战；你继承了它，你的任务是不要破坏它。
第二项重大变化是规范性的。WCAG 2.1 引入了成功准则 1.4.12"文本间距"（AA 级，并延续到 WCAG 2.2），要求当用户覆盖间距设置时——具体为字母间距增至字号的 0.12 倍、单词间距增至字号的 0.16 倍，外加行高与段落间距的增大——内容不得丢失功能或信息。这彻底重塑了间距的定位。它不再只是设计师一次性做出的审美决定，而是读者有权更改的变量。当用户应用这些覆盖时会裁切或重叠的固定高度容器、紧绷的按钮和易被截断的标签，都是无障碍层面的失败。上线前请用文本间距 bookmarklet 或浏览器扩展测试你的布局。
第三，CSS 如今提供了真正的控制手段。word-spacing 属性直接调整词间空隙，letter-spacing 处理字距（见下一章），font-kerning 与 font-feature-settings 提供对 OpenType 行为的显式访问。更新的 text-wrap: pretty 则请求浏览器在断行上投入额外的计算——避免孤悬词与糟糕的断点——无需任何手工干预，就悄悄改善了齐左排版的间距肌理。
字偶距的实践
由于字偶距默认开启，剩下的失败大多是自找的。激进的正向 letter-spacing 会用附加的空间淹没字偶距对，实际上等于覆盖了它们——这是给正文加字距之所以危险的原因之一。做工粗糙的展示字体仍会带着稀疏的字偶距表出厂，在标题字号下这些空隙十分扎眼——经典的问题组合，例如大写 T 或 V 后面跟一个小写元音。在展示字号下，手工修正个别字偶是合理的；但如果一款字体需要不停地修正，那就是选错了字体。
2005 年的一个担忧确实延续至今：字体质量依然重要。可变字体与专业出品的网页字体通常带有完备的间距与字偶距数据；来历不明的免费字体往往没有。评估候选字体时，请排出真实的段落，而不是一行样张。
词距与两端对齐
原版的结论——两端对齐会降低屏幕上的可读性——就其通常形式而言依然正确，但其机制值得说得更精确。两端对齐通过拉伸或压缩词间空格，把每一行强行撑到固定的行长。没有断字时，算法可用的断点很少，于是某些行会出现深壑般的词间空隙。当这些空隙在相邻的行里上下叠置，就会形成顺着段落流淌的白色"串沟"。串沟不只是难看：它们与水平的阅读路径争夺注意力，而依赖稳定间距线索的读者——包括许多阅读障碍读者——受到的影响尤为严重。不均匀的词距会扰乱副中央凹预览，而正是这种预览让眼睛得以规划下一次扫视。
印刷业在几个世纪前就用断字与两端对齐的配合解决了这个问题，如今网页原则上也能做到：CSS 的 hyphens: auto 在多数浏览器中启用基于词典的断字，能显著降低两端对齐文本的间距波动。但浏览器的两端对齐仍是简单的逐行算法，而非专业排版软件中段落层级的整体优化，因此即便启用断字，网页上的两端对齐文本也很少能达到精心排印的书籍那样的均匀度。务实的结论是：屏幕阅读默认使用齐左（右侧参差）排版。如果设计确实需要两端对齐，请启用断字、保持宽裕的行长，并在窄宽度下检查效果——窄栏中的两端对齐正是串沟滋生之地。
另请注意，WCAG 2.2 的成功准则 1.4.8"视觉呈现"（AAA 级）在对文本块的要求中明确列出了"文本不两端对齐"。即便对多数团队瞄准的 AA 级而言，这也强烈地表明了标准制定者的立场。
词距作为设计变量
正文很少需要直接调整 word-spacing——字体内置的空格字形通常是合适的——但它在边缘场景中物有所值：略微撑开全大写导航标签的词间空隙，或在大号展示排版中收紧显得过大的默认空格。任何调整都应使用 em 相对单位，使其随文字缩放，并且必须容忍 1.4.12 规定的用户覆盖。如果你的布局只在你选定的那个间距值下成立，它就不成立。
在 CSS 中
body {
font-kerning: normal; /* on by default — never disable it */
text-align: left; /* justification without hyphenation makes rivers */
}
p { text-wrap: pretty; }
/* If justification is required, hyphenate: */
.justified { text-align: justify; hyphens: auto; }建议
- 正文默认齐左排版；把两端对齐视为例外，必须配合 hyphens: auto 并在窄宽度下测试。
- 让 font-kerning 保持默认；不要禁用字偶距，也要避免用重度 letter-spacing 淹没字偶距对。
- 在支持的环境下对正文使用 text-wrap: pretty，以近乎零成本改善断点与间距肌理。
- 任何 word-spacing 或 letter-spacing 调整都用 em 单位指定，绝不用像素。
- 验证布局能经受 WCAG 1.4.12 的覆盖——字母间距 0.12em、单词间距 0.16em、行高 1.5——而不裁切、重叠或丢失内容。
- 选择字偶距与间距表完备的字体；用排好的段落评判它们，而不是样张。