“沟通” 在设计中起着至关重要的作用–它能建立网站和多用户之间的联络，并帮助多用户完成他们的目标。当我们谈论在网页设计方面的沟通时，通常是指文字的输出。

　　排版在这个过程中起着至关重要的作用：网络上的资讯 95％以上的是在书面语言的形式存在。良好的文字排版使阅读的行为轻松，而体验不好的文字排版导致多用户关闭网页。 “网页设计是 95％排版设计”：

　　优化排版是优化介面可读性，可访问性，可用性，使整体平衡的关键。

　　换句话说：优化网站文字排版也是优化多用户介面的一种方式。在下面的文章中，我将提供一组帮助您提高文字内容的可读性和易读性的规则。

　　1. 尽量使用少的字型

　　使用超过 3 种不同的字型会使网站看起来缺乏结构化和不。注意，较多的字型样式使用一次都可能破坏所有布局。为了防止这样的情况，尝试将字型数量减少。一般来说，将字型数量限制在小限度（两个算多的，一个是正好的）。如果您使用一个以上的字型，确保字型具有系列感，且基于其字元宽度是相得益彰。采取下面的字型组合的例子。 Georgia 和 Verdana（左）的结合，共同建立一个和谐的配对相似的价值观。与此相比，Baskerville 和 Impact（右），极大地掩盖了衬线相对应的不匹配度，形成较好的视觉体验。在基于其字元宽度的标准下确保字型系列相得益彰

　　2. 尝试使用标准字型

　　字型嵌入服务（如 Google Web 字型或 Typekit）有许多有趣的字型，可以为您的设计提供创新、新鲜的和意想不到的效果，它们使用起来也非常方便。以 Google 为例：

       选择任何字型，如 Open Sans 。

       生成代码并贴上到 HTML 文件中。

　　完成！

　　这个情况下不会出错么？

　　其实这种做法有两个问题

　　不是每个人开启浏览器都可以访问到同一种字型，这意味因为您选择的多用户体验较好的字型将无法展示在所有多用户面前。

　　多用户更熟悉标准字型，因此可以更快地读取它们想要的资讯。

　　除非您的网站有足够吸引人的自定义字型（如品牌宣传或建立身临其境的体验），否则知名使用系统字型。更为安全的做法是使用的系统字型是：Arial，Calibri，Trebuchet 等。请记住，良好的文字排版会将读者吸引到内容，而不是文字本身。

　　3. 限制文字线长度

　　每行放置适当的字元数量是文字可读性的关键，它不仅是您的设计，决定您的文字的宽度，它也应该是一个可读性的问题。从 Baymard 研究所考虑有关可读性和文字线长度的建议：

　　“如果您想要一个很好的阅读体验，您应该限制每行大概 60 个字元。每行拥有适当的字元数量是文字可读性的关键。”

　　如果一行文字太短，眼睛必须经常转回，打破读者的节奏。如果一行文字太长，多用户的眼睛也难长期专注於单行文字。图片来源：材料设计

　　对于移动装置，基本保持每行 30-40 个字元。以下是在移动装置上检视的两个网站的示例。个使用每行（每行字元印刷和桌面的理想数量）50-75 个字元，而第二个使用理想 30-40 字元。

　　在网页设计中，您可以通过使用画素限制文字块的宽度来实现每行理想数量的字元。

　　4. 选择各种尺寸的文字元素

　　多用户会从有不同萤幕尺寸和解析度的装置访问您的网站。大多数多用户介面需要各种大小的文字元素（按钮文字，栏位标签，部分标题等）。选择一种能够在多种尺寸和解析度萤幕上执行良好的字型以保持每个尺寸的可读性和可用性非常重要。

　　Google 的 Roboto 字型

　　确保您选择的字型在较小的萤幕上清晰可辨！尝试避免使用草写指令码的字型，如 Vivaldi（在下面的示例中）：虽然它们很漂亮，但它们很难阅读。

　　维瓦尔第字型将难以在小萤幕上阅读

　　5. 使用可区分字母的字型

　　许多字型使得很容易混淆类似的字母形式，特别是与 “i” 和 “L”（如下图所示）以及差的字母间距，

　　例如当 “r” 和 “n” 看起来像 “M” 。所以当选择您的型别时，请务必在不同的上下文中检查您的型别，以确保不会为您的多用户造成问题。

　　6. 避免所有字母大写

　　所有大写字母–意思是所有字母大小写的文字–在不涉及阅读的上下文中（例如字母缩略词或标识）看起来都很美观整体，但是当您的信息涉及阅读时，请勿强制全部使用大写字母。正如 Miles Tinker 所说，在他的具有里程碑意义的作品 “可读性” 中，全部大写增大了扫描和阅读的速度，与小写型别相比。

　　7. 不要尽量减少线间距

　　在排版中，我们有一个特殊术语，用于两行文字之间的间距（或行高）。通过增加行高，可以增加文字行之间的垂直空白空间，通常提高可读性以换取萤幕空间。有一个基本规则，标题空间应该是字元高度的 30％，以提高可读性。

　　良好的间距有助于可读性。图片来源：微软

　　正如 Dmitry Fadeyev 所指出的那样，正确地使用段落之间的空白已被证明可以将提高 20％理解度。使用空白的技能可以为多用户提供可转化知识的内容，然后剥离无关的细节。

　　左：几乎重叠的文字。右：良好的间距有助于可读性。图片来源：苹果

　　8. 确保您有足够的颜色对比度

　　文字和背景不应该使用相同或相似的颜色。文字越明显，多用户能够更快地扫描和阅读它。 W3C 建议对身体文字和影象文字的对比度如下：

　　这些文字行不符合颜色对比度建议，难以根据背景颜色进行阅读

　　小文字的背景对比度应至少为 4.5：1 。

　　大文字（14pt/18pt 常规和以上）应该具有至少 3：1 的对比度与其背景。

　　这些文字行符合颜色对比度建议，并且是易于阅读背景颜色

　　一旦您选择了颜色，绝对有必要在大多数装置上与真正的多用户进行测试。如果任何测试显示阅读文字有问题，那么您可以确保您的多用户具有完全相同的问题，再来统一进行解决。

　　9. 避免将文字着色为红色或绿色

　　色盲是一种常见的情况，特别是在男性中（8％的男性是彩色盲人），建议使用除颜色以外的其他线索来区分重要资讯。另外，避免使用红色和绿色单独传达资讯，因为红色和绿色色盲是常见的色盲形式。

　　10. 避免使用闪烁的文字

　　闪烁本身或闪烁的内容可能会触发敏感个体的神经发作。它不仅可以引起神经的抵触，而且对于一般多用户来说，都可能是令人讨厌或分心的。

　　文字排版是一个重要的设计范围，做出正确的排版选择可以让您的网站感觉到焕然一新。所以文字排版的可读性，可理解性和清晰度至关重要。文字排版的存在，作用是突出内容，应以不会增加多用户认知负荷的方式来增进内容的可读性。