排版是一种很奇特的技能——它太过数学化，无法称之为纯粹的艺术；但它又太过抽象，无法称之为纯粹的科学。

我们的现代生活充斥着文字，因此所有前端开发人员都需要对“排版艺术”有透彻的了解。

那么，让我们快速浏览一下最常见的排版错误以及避免这些错误的方法。

要点总结

• 错误判断文本行长度会影响可读性。最佳行长度约为 50 至 60 个字符，过长或过短的行都会给读者带来压力和干扰。

• 注意字间距（即字母之间的间距）对于阅读流畅性至关重要。字间距过小会降低阅读速度，而字间距过大只有在字间距超过一个字母宽度时才会显著影响阅读速度。

• 字体搭配需要仔细斟酌，才能达到和谐与对比的效果。虽然没有固定的公式，但常见的搭配是标题使用装饰性衬线字体，正文使用无衬线字体，以提高易读性。

• 糟糕的色彩选择会严重影响阅读体验。避免使用过于相似的色调，或绿色和红色、白色和黄色等组合。力求达到合适的对比度，既不要过强也不要过弱。

误判的文本行长度

许多设计师往往不够重视文本每行的平均字符数，从而对文本的可读性产生不利影响。

幸运的是，这种错误很容易避免，因为最佳长度早已被确定。

伟大的瑞士字体设计师埃米尔·鲁德在 20 世纪 50 年代对这个主题进行了大量研究。

在他具有开创性意义的文章《字体排印：设计手册》中，他得出结论，行长的“最佳点”在 50 或 60 个字符左右。

较短的行长
会减慢理解速度，因为
眼睛需要花费更多时间
才能追踪到下一
行。

他的测试发现，在阅读篇幅较长、横向展开的文本时，读者很难从一行结尾追踪到下一行开头。事实上，读者常常需要重新阅读上一行，才能确保找到下一行。

另一方面，较短的行长——不出所料——迫使眼睛花费更多时间向下和向右扫描以寻找下一行。

无论哪种情况，行长选择不当都会导致压力、注意力分散，并降低理解力和记忆力。

当然，在响应式设计时代，线条长度不再是一个静态数值。

流式布局意味着你需要将行长度视为断点之间的“范围”，而不是一个具体的数值。我建议将下限保持在 45 个字符以上，上限保持在 80 个字符以下。

追踪：中间人

标志、标题、书籍封面和其他
较大的文本通常采用
比正文文本所能承受的更紧密的间距。

有时设计师对字母之间的间距——专业术语称为“字距调整”——关注不足。字母之间的距离是影响阅读流畅性的关键因素。

这可能会很棘手，因为徽标、标题和书籍封面通常会通过减少字距来创造内部凝聚力——他们甚至有时会使用负字距来迫使字母重叠（旧版 eBay 徽标）。

如上文一些著名例子所示，这看起来非常棒。

但是，如果你随后想在正文中也采用同样的方法，这几乎总是一个错误。

2006年太平洋大学的一个研究团队发现，即使稍微缩小默认字母间距，也会立即降低阅读速度。有趣的是，逐渐增加字母间距（高于默认值），直到间距超过一个字母宽度时，阅读速度才会发生显著变化。

字母间距分别设置为 -4px、默认值和 +4px。

如果你想确保你的单词“跟踪”是正确的，这里有两个简单的测试方法。

您应该始终检查“AV”是否易于阅读，以及是否可以将其与“w”和“vv”区分开来。

在网页上，跟踪是通过 CSS 的“letter-spacing”属性控制的。

字间距减小会导致正文文字清晰度迅速下降。

该属性具有良好的浏览器支持，但遗憾的是，更常用的“em”单位的支持不如普通的“px”单位可靠。

来源：太平洋大学（PDF）：字符间距对文本易读性的影响

字体搭配不当

照片：ejorpin

不久之前——在“网络字体兴起”之前——犯这种错误要困难得多。

仅仅三年前，网页字体的选择还很像校服的选择。由于系统字体选择有限，没有人能用得惊艳，但也很少有人用得难看。

轻松获取海量新字体，为创造伟大提供了可能——但也带来了犯错的新途径和糟糕途径。

首先需要注意的是，字体搭配并没有固定的公式可循，只有一些指导原则。

你必须始终记住，和谐很可能是你的目标，但你可以通过使用对比鲜明的字体来实现它。

我所说的“对比”，是指找到既不同又能够相互补充的字体。这很难做到，但可以带来出色且别具一格的效果。

David Curcurito 为《Esquire》杂志设计的封面
几乎打破了所有版式和字体规则。

David Curcurito 为《Esquire》杂志设计的封面以完全无视留白、一致性甚至易读性等传统观念而闻名——然而，它们却在报摊上取得了巨大的成功。

这意味着，你不必非得排除将粗体字与超细体字一起使用，或者将大字体与小字体一起使用；你可以营造对比的效果。

在这种情况下，您当然应该考虑衬线字体与无衬线字体的匹配。

常见的搭配方式是，标题使用装饰性的“衬线字体”，而正文最好使用“无衬线字体”，因为它能提供更高的可读性（至少在屏幕上是这样）。

正如《时尚先生》杂志所展示的那样，很少有只使用一对字体的情况，所以我的建议是，在最终确定字体之前，最好进行几次试验。

只有这样，你才能获得最符合你需求的结果。

不合适的字体选择

由于可用的字体种类繁多，选择在作品中使用的字体可能并不总是件容易的事。

设计师常常会爱上一款很棒的新字体，然后立刻寻找机会把它运用到各种设计中。我想我们可能都做过类似的事情。

我们来看一个例子：

不幸的是，这就是一个“好字体也会变糟”的例子。你可以看到，标题中使用的精美装饰字体，用在正文中却显得非常难看。

在后一种情况下，文本的可读性会受到影响，读者可能不会因为难以理解文字而认真阅读该段落。

因此，在渲染任何正文文本时，我的建议是选择线性、经典且易于阅读的字体。

另一个非常常见的错误是，在没有充分考虑我们写作的初衷的情况下就选择字体。

事实上，你应该知道，字体可以根据不同的情况进行调整。

例如，“衬线”字体可以传达权威感，通常适用于法律文本、简历或科学论文等正式文件。

或者，如果您需要撰写更友好、更非正式的文本，您可以悄悄地决定使用“无衬线”字体或粗体且非常圆润的字体。

颜色搭配不佳

影响文本可读性的另一个重要因素是背景颜色和文本颜色的选择。

一个常见的错误是使用两种过于相似的音调，以至于很难将单词与周围环境区分开来。虽然这对大多数用户来说只是令人烦恼，但对于有视力障碍的人来说，这几乎是致命的缺陷。

你还应该注意，有些颜色可能会产生难看且刺眼的效果：例如绿色和红色或白色和黄色，千万不要将它们一起使用。

总之，当你需要为你的作品选择两种或两种以上的颜色时，我建议你寻找合适的对比，既不要太强烈也不要太弱。

领导

“行距”（发音为“L-ed-ing”，而不是“L-EEee-ding”）是指文本中两个连续行之间的垂直距离。

照片：jcolman

这个术语来源于传统凸版印刷工人用来固定每一行字母的“铅条”。

许多设计师未能充分重视这一特性，结果导致一行文字的“下延部分”与下一行文字的“上延部分”重叠。此外，如果行间距过大，则会导致文本松散，难以阅读。

为了避免这些问题，一个好的经验法则是先使用字体大小的 140%。

例如：假设你的字体大小为 20pt，则正确的行高约为 26-28pt。

但是，请记住，“衬线”字体通常比“无衬线”字体需要更多的行距，而较粗的块状字体比较细的字体需要更多的垂直空间。

今天的分享就到这里。希望这些技巧能帮助你享受排版的乐趣。

关于排版的常见问题解答

印刷和数字媒体中最小可读字体大小是多少？

印刷媒体的最小可读字体大小通常为 6 磅，但具体数值会因字体样式和读者的视力而异。对于数字媒体，建议正文字体至少使用 16 像素。然而，在确定合适的字体大小时，屏幕分辨率、设备类型和用户偏好等因素也需要考虑。

如何在空间极其有限的情况下选择字体？

空间有限时，选择小字号下也清晰易读的字体至关重要。无衬线字体通常是不错的选择，因为它们在小字号下往往比衬线字体更清晰。此外，还要考虑字母和单词之间的间距。较小的间距可以在有限的空间内容纳更多文字，但也会降低可读性。

选择字体大小时应考虑哪些因素？

选择字体大小时应考虑多种因素，包括媒介（印刷或数字）、文本量、可用空间、目标受众以及整体设计美感。此外，还应考虑易读性和清晰度，确保文本易于阅读和理解。

字体大小如何影响整体设计？

字体大小在整体设计中起着至关重要的作用。它会影响信息的层级结构，引导读者的视线聚焦于最重要的元素。较大的字体通常用于标题和副标题以吸引注意力，而较小的字体则通常用于正文。

衬线字体和无衬线字体有什么区别？

衬线字体在字母或符号的较大笔画末端带有细小的线条或笔画。它们常用于印刷媒体，被认为更具传统感。而无衬线字体则没有这些细小的线条，通常因其简洁现代的外观而用于数字媒体。

字体排印如何提升用户体验？

排版可以通过提高可读性和易读性、创建层次感和对比度、以及传达某种情绪或语气，极大地提升用户体验。优秀的排版可以引导读者的视线，使阅读内容更加愉悦。

行间距在排版中起什么作用？

行距（也称行间距）对阅读体验至关重要。行距过小会使文本显得拥挤，难以阅读；行距过大则会使内容难以理解。一个好的经验法则是将行距设置为字体大小的 1.5 倍。

字体颜色如何影响可读性？

字体颜色对可读性影响很大。文本颜色与背景颜色之间应有足够的对比度，以确保文本易于阅读。通常情况下，深色文本搭配浅色背景是最易读的。

字体选择在品牌塑造中有多重要？

字体选择在品牌塑造中扮演着至关重要的角色。它能够传达某种情绪或个性，并有助于提升品牌的辨识度。因此，选择与品牌形象和目标受众相契合的字体至关重要。

如何测试我的排版是否易于阅读？

测试排版易读性的方法有很多种。一种方法是进行用户测试，即请其他人阅读你的文本并提供反馈。此外，还有一些在线工具可以分析你的排版并提供易读性方面的反馈。