提高易读性的现代 CSS 技术

已发表: 2022-03-10
快速总结 ↬在本文中，我们将介绍如何使用一些现代 CSS 技术、可变字体等伟大的新技术以及将我们从科学研究中学到的知识付诸实践来提高网站的易读性。

我们可以通过多种方式阅读，并且有许多不同类型的读者，每个人都有自己的需求、技能、语言，尤其是习惯。 在家看小说不同于在火车上看小说，就像看报纸不同于浏览网络版一样。 阅读，像任何其他活动一样，需要练习才能让某人变得快速和高效。 基本上，我们会更好地阅读那些我们习惯阅读最多的东西。

在设计和开发阅读时我们应该考虑哪些方面？ 我们如何为所有读者（包括最受挑战和受阅读障碍影响的读者）创造无障碍、舒适、包容的体验？

无障碍文章

在 Smashing，我们相信一个好的网站是一个可访问的网站，每个人都可以访问，无论他们如何浏览网络。 我们只重点介绍了我们确信将帮助您创建更易于访问的网站和 Web 应用程序的众多文章中的一部分。 浏览更多文章 →

跳跃后更多！ 继续往下看↓

空格、单词、句子和段落

单位

在网页上，我们可以使用许多单位来调整文本的字体大小。 了解使用哪个单元对于设置整个阅读部分的结构至关重要。 Web 的可重排特性要求我们考虑几个方面，例如视口的大小和用户的阅读偏好。

出于这个原因，最合适的选择通常是 em 和 rem，它们是特定于字体的单位。 例如，使用 em 设置段落之间的边距有助于在文本大小变化时保持垂直节奏。 但是，当一个部分中衬线字体与无衬线字体交替出现时，这可能会成为问题。 事实上，在相同的字体大小下，字体在视觉上可能会非常不同。 传统上，小写“x”字符的高度（x 高度）是确定字符外观大小的参考。

比较相同大小的三种不同字体的“d”和“x”字形显示，它们的“x”高度（以及它们的光学尺寸）完全不同
在相同的字体大小下，字符在视觉上会显得非常不同。 （大预览）

因此，使用 font-size-adjust 规则，我们可以以光学方式渲染相同大小的字体，因为该属性将匹配小写字母的高度。 不幸的是，这个属性目前仅在 Firefox 和 Chrome 和 Edge 中可用，但它可以用作使用 @support 检查的渐进增强：

 @supports (font-size-adjust: 1;) { article { font-size-adjust: 0.5; } }

它还有助于从备用字体切换到远程加载的字体（例如，使用 Google 字体）。

有两篇文章。在切换主字体时，第一篇文章的长度大大增加，因为字体大小没有调整到 x 高度，而第二篇文章几乎无缝变化
第一个示例显示了如何正常切换字体。 在第二个中，我们使用font-size-adjust来使交换更舒适。 （大预览）

最佳线高

我们认为排版是黑白的。 排版真的是白色的 [...] 真正使它成为黑色的是黑色之间的空间。

——Massimo Vignelli，Helvetica，2007

因为排版更像是“白人”而不是“黑人”，所以当我们将这个概念应用到网站或 Web 应用程序的设计中时，我们必须考虑特殊的特征，例如行高、段落之间的边距和换行符。

依靠 x-height 设置字体大小有助于优化行高。 浏览器中的默认行高为 1.2（相对于字体大小的无单位值），这是 Times New Roman 的最佳值，但不适用于其他字体。 我们还必须考虑到行距不会随字体大小线性增长，它取决于文本类型等各种因素。 通过测试一些用于长篇阅读的常用字体，结合 8 到 14 磅的大小，我们能够推断出，在纸上，x 高度与最佳行距之间的比率为 37.6。

图表显示了 x 高度和行高的比率（y 轴）与 x 高度和上升线的比率（x 轴）之间的关系，随着 x 轴的值增加，第一个比率从 38.1 下降到 35.8
可接受的行距范围。 （大预览）

与纸上阅读相比，屏幕阅读通常需要更大的行间距。 因此，我们应该将数字环境的比率调整为 32。 在 CSS 中，这个经验值可以转化为以下规则：

 p { line-height: calc(1ex / 0.32); }

在正确的阅读环境中，此规则为 serif 和 sans-serif 字体设置了最佳行高，即使在印刷工具不可用或用户设置的字体覆盖了设计师选择的字体时也是如此。

定义比例

现在我们已经调整了字体大小并使用 ex 单位来计算行高，我们需要定义排版比例以正确设置段落之间的间距并为阅读提供良好的节奏。 如前所述，行距不会线性增长，而是根据文本类型而变化。 例如，对于大字体的标题，我们应该考虑更高的行高比例。

 article h1 { font-size: 2.5em; line-height: calc(1ex / 0.42); margin: calc(1ex / 0.42) 0; } article h2 { font-size: 2em; line-height: calc(1ex / 0.42); margin: calc(1ex / 0.42) 0; } article h3 { font-size: 1.75em; line-height: calc(1ex / 0.38); margin: calc(1ex / 0.38) 0; } article h4 { font-size: 1.5em; line-height: calc(1ex / 0.37); margin: calc(1ex / 0.37) 0; } article p { font-size: 1em; line-height: calc(1ex / 0.32); margin: calc(1ex / 0.32) 0; }

字母和单词间距

在处理易读性时，我们还必须考虑受到挑战的读者，例如有阅读障碍和学习障碍的读者。 发育性阅读障碍会影响阅读，有关原因的讨论和研究仍在进行中。 利用科学研究来了解视觉和印刷变量对阅读的影响是很重要的。

例如，在我公司遵循的一项研究（“Testing Text Readability of Dyslexia-Friendly Fonts”）中，有明确的证据表明，高易读字体的字形形状并不能真正帮助阅读，但字符之间的间距更大（跟踪）做。 这一发现得到了另一项关于增加间距有效性的研究的证实（“视觉方面如何在阅读习得中至关重要：拥挤和发展性阅读障碍的有趣案例”）。

这些研究表明，我们应该通过提供更有效的工具（例如处理间距的控件）来利用网页的动态性和响应性。 放大字符大小时的常用技巧是通过诸如letter-spacing和word-spacing等 CSS 属性来调整字母和单词之间的间距。

请参阅 Edoardo Cavazza 的 Pen [字母和单词间距](https://codepen.io/smashingmag/pen/KKVbOoE)。

请参阅 Edoardo Cavazza 的 Pen Letter 和 word 间距。

这样做的问题是letter-spacing无条件地起作用并破坏字体的跟踪，导致页面呈现非最佳空间。

或者，我们可以使用可变字体来获得对字体渲染的更多控制。 字体设计者可以以可变和非线性的方式参数化间距，并且可以确定字形的粗细和形状如何更好地适应读者的习惯。 在以下示例中，使用 Amstelvar 字体，我们能够按照设计者的意图增加光学尺寸以及间距和对比度。

请参阅 Edoardo Cavazza 的 Pen [可变字体的光学尺寸](https://codepen.io/smashingmag/pen/VweqoRM)。

查看笔 Edoardo Cavazza 的可变字体的光学尺寸。

Web.dev 文章“Web 上的可变字体简介”更详细地介绍了可变字体是什么以及如何使用它们。 并查看可变字体工具以了解它们是如何工作的。

宽度和对齐方式

为了优化阅读流程，我们还必须处理段落的宽度，即一行中的字符数和空格数。 阅读时，我们的眼睛集中在一个中心凹中的大约八个字母上（即当我们看一个物体时激活的操作），它只能处理几个连续的重复。 因此，换行至关重要：将注意力从一行的末尾移到下一行的开头是阅读中最复杂的操作之一，必须通过保持每种文本类型的正确字符数来促进这一点。 对于基本段落，一般长度约为每行 60 到 70 个字符。 通过为段落分配宽度，可以使用 ch 单位轻松设置此值：

 p { width: 60ch; max-width: 100%; }

对齐在跨行阅读中也起着重要作用。 在各种浏览器中，对语言的断字支持并不总是最佳的； 因此，必须对其进行检查。 在任何情况下，请避免在没有连字符的情况下对齐文本，因为创建的水平间距会成为阅读障碍。

 /* The browser correctly supports hyphenation */ p[lang="en"] { text-align: justify; hyphens: auto; } /* The browser does NOT correctly support hyphenation */ p[lang="it"] { text-align: left; hyphens: none; }

手动断字可用于没有本机支持的语言。 有几种算法（服务器端和客户端）可以注入‐ 单词中的实体，以指示浏览器可以破坏令牌的位置。 该字符将是不可见的，除非它位于行尾，因此它将呈现为连字符。 要激活此行为，我们需要设置hyphens: manual CSS规则。

前景对比度

字符和单词与背景的对比是易读性的基础。 WCAG 为不同的标准（A、AA、AAA）定义了指导文本和背景之间的对比的限制。 可以使用不同的工具计算对比度，用于设计和开发环境。 请记住，自动验证器是支持工具，不能保证与真实测试相同的质量。

通过使用 CSS 变量和calc语句，我们可以动态计算与背景形成最佳对比度的颜色。 这样，我们可以根据背景颜色转换整个主题，为用户提供不同类型的对比度（棕褐色、浅灰色、夜间模式等）。

 article { --red: 230; --green: 230; --blue: 230; --aa-brightness: calc(( (var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114) ) / 1000; --aa-brightness: calc(( (var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114) ) / 1000); --aa-color: calc((var(--aa-brightness) - 128) * -1000); background: rgb(var(--red), var(--green), var(--blue)); color: rgb(var(--aa-color), var(--aa-color), var(--aa-color)); }

请参阅 Edoardo Cavazza 的 Pen [Automatic text contrast](https://codepen.io/smashingmag/pen/zYrygyr)。

请参阅 Edoardo Cavazza 的 Pen Automatic 文本对比。

此外，随着prefer-color-scheme媒体查询的引入和跨浏览器支持，根据用户偏好管理从浅色主题到深色主题的切换变得更加容易。

 @media (prefers-color-scheme: dark) { article { --red: 30; --green: 30; --blue: 30; } }

向前走

设计和开发最佳阅读需要大量知识和许多专业人士的工作。 这些知识在整个团队中传播得越多，用户就会越好。 以下是引导我们取得良好结果的一些要点。

对于设计师

  • 将语义结构视为项目的一部分，而不是技术细节；
  • 文档布局和字体指标，尤其是您选择的原因和方式。 他们将帮助开发人员正确实现设计；
  • 尽可能减少印刷变量（更少的系列、样式和变体）。

对于开发者

  • 学习排版的原则，以了解所做的设计决策以及如何实施它们；
  • 使用相对于字体大小的单位来实现可根据用户偏好缩放的响应式布局（填充、边距、间隙）；
  • 避免无节制地操纵字体度量。 如果不遵守字体约束，易读性可能会受到影响。

对于团队

  • 阅读并理解 WCAG 的原则；
  • 考虑将包容性和可访问性作为项目的一部分（而不是单独的问题）。

阅读是一项复杂的活动。 尽管有许多关于网络排版的资源和确定需要改进的领域的学术论文，但实现良好的易读性并没有什么神奇的秘诀。 要考虑的变量数量可能看起来很大，但其中许多是可控的。

我们可以使用ex单位设置段落的最佳行高，也可以使用ch单位设置段落的宽度，以尊重用户对字体大小和系列的首选浏览器设置。 我们可以使用可变字体来调整字母和单词之间的间距，我们可以操纵字形的笔画来增加对比度，帮助有视觉障碍和阅读障碍的读者。 我们甚至可以使用 CSS 变量自动调整文本对比度，为用户提供他们喜欢的主题。

所有这些都有助于我们构建一个动态网页，其易读性根据用户的需求和偏好进行了优化。 最后，鉴于每一个微小的实现或技术细节都会产生巨大的影响，因此使用最终工件测试用户的阅读性能仍然至关重要。

相关资源

  • “测试阅读障碍友好字体的文本可读性”，Galliussi、Perondi、Chia、Gerbino、Bernardis（2020 年）
  • “视觉方面如何在阅读习得中发挥关键作用：拥挤和发展性阅读障碍的有趣案例，”Gori, Facoetti (2015)