要点总结

• 为了保持设计或页面风格的统一性，避免给读者造成不协调或怪异的感觉，请坚持每个设计或页面使用不超过三种字体。

• 将标题醒目地放在页面顶部，并确保正文字体大小为 14px 以上，以获得最佳的易读性和可读性。

• 保持文本与背景之间良好的对比度，避免连续使用全大写字母，因为这会影响可读性。

• 请谨慎使用非屏幕专用字体，并确保对网页字体资源进行子集化和缓存，以减少页面加载大小。由于 Comic Sans 字体使用过度且不够美观，因此不建议使用。

对于设计师而言，排版是一项常见且重要的任务。在尊重文本内容的同时，我们还需要确保其清晰易读。此外，我们还应提供视觉提示，突出文本之间的关联。通过这些措施，我们赋予文本多种特质，从而鼓励和帮助读者快速浏览特定信息片段，或轻松阅读大段文字。

对于优秀的平面设计师来说，文本排版已成为一种本能，但一份快速检查清单可以帮助他们确保涵盖基本要素，尤其对于渴望进入该领域的新手而言，更是非常有用。以下是我整理的清单，可作为一套通用的指导原则：

1. 每个设计（或页面）使用的字体不得超过三种。

每个设计中字体（或数字字体）不超过三种是一个很好的基本原则。使用过多的字体（即使它们很相似）会造成一种不协调感；读者会觉得即使不是同一种类型的文本（例如正文段落）之间也缺乏关联。使用更多相似的字体或许可以避免这种不协调感，但读者仍然会注意到——即使是潜意识的——这种不协调感。即使他们无法描述或指出这种不协调感的来源，这种影响依然存在。

这条规则中之所以使用“或页面”，是为了赋予创作自由。Jason Santa Maria 的网站就很好地诠释了这一点：他的博客文章展现了丰富多样的创意设计和风格，而整个网站却又保持了完美的统一性。

2. 将标题醒目且引人注目地放在页面顶部

过去人们似乎对在网页上设置大字体有着一种莫名的恐惧。正文的字体大小通常设置为 10 像素（甚至更小！），这种情况十分普遍，而标题的字体大小也往往只是略大一些而已。标题是用户在浏览新页面时最先看到的文本之一，对于划分段落至关重要。因此，标题应该拥有与其尺寸和样式相称的尺寸和样式，以吸引读者，并为下级标题提供充足但又不突兀的指引，从而引导读者。

3. 正文尺寸 14px+

这是一条相关且或许是最重要的经验法则：正文的字号要适合在屏幕上舒适阅读。当然，还有许多其他因素会影响文本的易读性和可读性，尤其是字距较近的正文，但字号仍然至关重要。

请记住，我们当中很少有人拥有 2.0 的视力；一个好的默认值是 14 像素。

4. 确保文本与背景对比度良好

增大字体大小是提高文本清晰度的有效方法，但是如果文本与其背景之间的对比度较差，清晰度（以及由此产生的可读性）就会降低。

公认的标准做法是将深色文字放在浅色背景上，反之亦然。务必避免使用冲突的颜色，或者在白色背景上使用几乎看不见的灰色。

需要特别注意的是，浅色文字在深色背景上的对比度与深色文字的对比度不同（尽管乍一看可能如此），因此需要相应地增加字距、尺寸和行距。

5. 巧妙地施加压力和强调

这既是编辑原则，也是排版原则：不要在文本中滥用下划线、粗体和斜体；要谨慎地使用强调和重音，以达到额外的、有意的强调效果。

另外，请避免使用过长的带下划线的超链接，尤其是在衬线字体上，小字号时更应如此。默认情况下，下划线text-decoration: underline;会切断带有下延部分的字形（主要是 g、j、p、q 和 y），使其难以辨认。一个便捷的解决方法是不要设置文本装饰，而是使用 `<a>` 标签，border-bottom: 1px;或者仅在鼠标悬停时显示（`<a> ` 标签）。a:hover

6. 不要将连续文本全部设置为大写字母。

字母的上升部和下降部的存在是有充分理由的：它们使我们能够轻松识别单词。大小写混合的单词比完全大写的单词更容易识别，因为大小写混合的单词在高度和基线方面更加统一。例如，对比一下：

“易读性分析的结果可能相互矛盾，但有一点很明确：全大写文本比大小写混合文本更难阅读。对于单个单词来说，这可能并不特别重要，但对于大量文本来说就至关重要了。此外，两者在空间大小上也存在很大差异。”

和：

“易读性分析的结果可能相互矛盾，但有一点很明确：全大写字母排版的文本比大小写混合排版的文本更难阅读。对于单个单词来说，这可能并不特别重要，但对于大量文本来说就非常重要了。此外，空间大小也存在很大差异。”

— Hochuli, J. 2008，《排版细节》，第 3 版，Hyphen Press，伦敦，第 24 页。

如果您发现自己需要将较长的文本字符串全部设置为大写，并与常规正文一起显示，请考虑使用较小的首字母大写字母（font-variant: small-caps;）设置更大的行距。

7. 给文字留出足够的空间；设置充足的行距和间距。

紧接着上一条规则的结尾（没有双关的意思），确保你的文本有足够的空间；在垂直和水平方向上都给予它所需的空间，以确保清晰的对比度，从而保证易读性和清晰度。

检查行长，确保行距不要太短，以免视线快速跳跃地追踪到下一行；也不要太长，以免读到一行末尾后难以辨认。与行长密切相关的是行间距：行间距要适中，既要足够，又不能过大，以免文本显得支离破碎。

8. 注意不要使用非屏幕专用字体

拓展网页字体选择范围固然值得称道，但务必选择与你所用媒介相匹配的高质量字体。世界上字体种类繁多，但只有一小部分适合用于正文排版，而专门针对网页使用进行优化或设计的字体则更少。

寻找合适的字体微调表，并在各种浏览器和操作系统上以较小的尺寸（10px、12px、14px）测试字体，以评估各种字体渲染引擎显示字体的效果。

9. 确保网页字体资源已进行子集化和缓存

使用@font-face网页字体资源会增加页面大小——用户代理（主要是浏览器）需要下载字体才能渲染文本。一种减少加载大小的方法是使用子集化字体：移除永远不会用到的字符的字形（例如，英文网站几乎不需要西里尔字母，反之亦然）。另一种方法是建议用户代理将字体资源缓存一段时间，这样后续访问时就不需要重新下载字体。

10. 不要使用 Comic Sans 字体

更多的是个人感受和不满。说真的，既然有那么多其他字体可以选择，包括像Comic Jens这样免费授权的字体，为什么还要用这种用烂了而且相当难看的漫画字体呢？

这是我的清单。你的清单是什么？

关于网页排版的常见问题

网页设计中字体排印的重要性是什么？

排版在网页设计中扮演着至关重要的角色，因为它对用户体验有着显著的影响。排版有助于清晰有效地传达信息。优秀的排版能够提升可读性、易用性和整体视觉美感。它还可以引导用户浏览网页，并使他们能够更高效地与网站互动。

如何为我的网站选择合适的字体？

为网站选择合适的字体取决于多种因素，例如内容性质、目标受众以及网站的整体设计。选择与品牌个性和想要传达的信息相符的字体至关重要。此外，还要确保字体清晰易读，并且在不同屏幕尺寸上都能呈现良好的效果。

网页内容的理想字体大小是多少？

网页内容的理想字体大小通常为正文 16 像素。但是，字体大小会根据字体类型和浏览设备的不同而有所变化。务必确保文本在所有设备上都易于阅读。

我的网站上应该使用多少种不同的字体？

通常建议网站上使用的字体不要超过两到三种。使用过多字体会让设计显得杂乱无章，令人困惑。为了增加视觉多样性，最好使用同一字体系列的不同字重和样式。

网页排版中行距的重要性是什么？

行距（也称行间距）在提升可读性方面起着至关重要的作用。合适的行距能使文本更清晰易读，也更护眼。它还能引导读者的视线从一行过渡到下一行。

如何确保网页排版具有良好的对比度？

在网页排版中，使用与背景形成鲜明对比的颜色可以实现良好的对比度。文本颜色应与背景颜色有显著差异，以确保清晰易读。

网页排版中留白的作用是什么？

留白，也称为负空间，是指文本和图形周围的空白区域。它有助于分隔页面上的不同元素，使内容更易于理解。合理运用留白可以提高可读性，改善整体用户体验。

网页排版中常见的错误有哪些？

网页排版中一些常见的错误包括使用过多不同的字体、使用难以辨认的字体、行间距不当以及文本与背景之间对比度不足。

字体排版如何影响网站的加载速度？

使用自定义字体可能会影响网站的加载速度。每种自定义字体都需要加载额外的资源，这会导致网站速度变慢。因此，在使用自定义字体的同时兼顾网站性能至关重要。

如何测试网页排版的易读性？

您可以使用 Readable 等工具或进行用户测试来测试网页排版的易读性。这些方法可以提供有关文本清晰度和易读性的宝贵反馈。