文章译自：Medium

原文标题：10 Tips On Typography in Web Design

原文作者：Nick Babich

文章翻译：村长道哥

沟通在设计中有着举足轻重的地位——沟通对于在网站和用户之间建立清晰的联系并帮助用户完成他们的目标是至关重要的。当我们在网页设计中讨论沟通时，通常指的上面的是文字。字体又是这个过程中至关重要的部分：

超过95%的网络信息都是以书面语言的形式出现的。

优秀的字体设计可以让阅读变得轻松，而糟糕的字体设计则会让用户难以阅读。正如 Oliver Reichenstein 在他的文章《网页中95%的设计都是字体》中所写的那样：

优化字体就是优化可读性，可访问性，可用性，以及文字的整体平衡。

换句话说，优化字体设计也就是优化用户界面。在本文中，我将提供一些帮助提高文本内容可读性和易读性的准则。

1 使用尽量少的字体

使用超过3种不同的字体会使网站看起来结构松散并且不专业。请记住，太多的字体大小和样式同时也会破坏网页的布局。

为了防止这种情况，我们需要尽量把使用字体的数量限制到最小

一般来说，将字体的数量限制在最小（两个是经常使用的数量，一个有时也足够了），并且整个网站都采用相同的字体。如果你使用了不止一种字体，那么确保这些字体是根据它们的字符宽度而互补的。以下面的字体组合为例。Georgia 和 Verdana（左）的组合因为相似所以营造出了和谐感。相比之下，Baskerville 和 Impact（右），因为 Impact 的字重使得 Baskerville 就不那么明显了。

确保字体之间要根据字符宽度互补

2 使用标准字体

字体嵌入服务（比如Google Web Font 和 Typekit）有很多有趣的字体，这些字体可以给你的设计带来全新的、新鲜的和意想不到的东西。它们也非常容易使用。以谷歌为例:

随便选择一个字体，比如 Open Sans。

生成代码并把代码粘贴到 HTML 文档的 head 中。

完活了!

那么，哪里会出错呢?

实际上，这种方法有一个严重的问题——就是用户更熟悉标准字体，在标准字体下用户可以更快地阅读。

除非你的网站对自定义字体有着特殊的需求，比如为某个品牌设计网页，或者意图创造一种沉浸式的体验，否则最好还是使用系统自带的字体。安全的做法是使用一个系统字体：Arial、Calibri、Trebuchet 等等。记住，好的字体设计会把读者吸引到内容上，而不是字体本身。

3 限制一行字的长度

一行中字符的数量是文本可读性的关键。不应该光由你的设计决定了文本的宽度，也应该考虑到文本的易读性。Baymard 研究所关于可读性和字行长度的建议是：

“如果想要一个好的阅读体验，应该每一行有60个左右的字符。一行中字符的数量是文本可读性的关键。”

如果一行文字太长，用户的眼睛将就很难集中在文本上。

对于移动设备，每一行应该使用30到40个字符。下面是两个在移动设备上浏览网站的例子。第一个使用每行50-75个字符（打印和桌面应用的每行最佳字符数），第二个使用了最优的30到40个字符。

在网页设计中，你可以通过使用 em 或像素来限制文本块的宽度，来找到每行的最佳字符数。

4 选择一个适用于各种大小的字体

用户用来访问你的站点都是不同大小屏幕和分辨率的设备。大多数用户界面都需要不同大小的文本元素（按钮、字段标签、栏目标题等）。这里重要的 是要选择一个在不同的尺寸和字重上都能很好地保持可读性和可用性的字体。

谷歌的 Roboto 字体

确保你选择的字体在小屏幕上也是清晰可见的！尽量避免使用草书的字体，比如 Vivaldi，尽管这些字体很漂亮，但是很难阅读。

Vivaldi的字体在小屏幕上很难阅读

5 使用字母区分明显的字体

许多字体都把一些字母设计得不容易识别，特别是“i”和“L”（如下图所示），以及字母间距不当的问题，比如“r”和“n”看起来像“m”。所以在选择字体时，一定要在不同的环境中试验字体，确保不会给你的用户带来问题。

6 不要全部大写的字母

全部大写的文本——意思是所有的字母都是大写字母——在不涉及阅读的情况下还是不错的（例如缩写或 logo），但是当涉及到阅读时，不要强迫你的用户阅读全是大写的文本。正如 Miles Tinker 在他的影响巨大的《印刷的易读性》中提到的，全部大写的文本与小写相比，大大降低了浏览和阅读的速度。

7 不要把行间距最小化

在字体排版中，我们有一个特殊的术语来表示两行文字之间的间距——leading（或行高）。通过增加行高可以增加文本行之间的垂直空白，从而提高可读性。一个比较好的规则是为了打造良好的可读性，行高应该比字符高度多大约30%。

正如 Dmitry Fadeyev 指出的，合理地使用段落之间的空白，已经被证实可以提升用户20%的理解度。使用空白的技巧在于为用户提供易于消化的内容，然后剥离无关的细节。

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

不要在文本和背景上使用相同或相似的颜色。文本越清晰，用户就能越快地浏览和阅读。以下是 W3C 推荐的正文文本和图像文本的对比比例：

小字体的文本应该与背景有至少4.5:1的对比度。

大字体的文本（14pt的粗体或18pt的常规以上）应该与背景有至少3:1的对比度。

这两行文字不符合颜色对比度的建议，很难在它们的背景颜色下阅读。

这两行文本符合颜色对比度的建议，很容易在背景色下阅读。

一旦你确定了颜色的选择，就需要在设备上和真正的用户之间进行测试，这是非常有必要的。如果有测试反映出阅读的问题，那么你就可以确信用户也会遇到同样的问题。

9 不要使用红色或绿色的文字

色盲是一种常见的情况，尤其是在男性中（8%的男性是色盲），所以建议使用其他颜色来引导重要的信息。同样，应避免使用红色和绿色来传达信息，因为红绿色盲是最常见的色盲。

10 不要使用闪烁的文字

闪光或闪烁的内容能引发易感人群的癫痫发作。不仅如此，这很可能会让大部分的用户感到厌烦或精神涣散。

不要闪烁！

结论

字体设计是一个很重要的问题。做出正确的字体选择可以让你的网站有一种清新和优雅的感觉。另一方面，糟糕的字体则会让人分心，让人们的注意力放在字体本身上。字体的可读性、可理解性和易读性是设计中至关重要的一环。

字体是为了突出内容

字体应该以一种不会增加用户认知负担的方式来突出内容。