在数字设计中正确使用字体

字体可以成就也可以毁灭一个产品，本文将教会你如何善用字体

15041561034435.jpg

优化字体就是在优化可读性，理解性，可用性，综合所有的一切图形平衡。

这里有10条建议：

1. 尽可能少的使用字体数目

15039840801171.jpg

当你使用太多字体时，所有的字体都在争取注意力。

为了防止发生这种情况，尽可能的限制你用的字体的数量

同时使用超过三种字体，会导致记得设计结构看起来很杂乱，将使用的字体家族限制在一个很小的数目内（两个已经足够多，一个通常也已经很满足需求），并且尽可能的再整篇幅内使用同一个字体。

首先对你的设计主题文字选择一个字体

主题文字通常是你的产品内最常见的元素，将会是你的用户能看到和体验到的，你的主题文字将会占据你设计最大部分的影响力。

尽可能的使用同一个字体，知道你完全掌握

对于初学者，建议最好使用一种字体，直到完全掌握。多使用同一种字体的不同样式，现代字体大多有不同的样式，意味着他们共用统一字重。样式的多样化，可以帮助你在不同位置使用字体。一个很好的例子是苹果的 San Francisco typeface。

15039847339343.png

确定所选的字体家族是互相补充的

如果你还是需要多个字体，确保字体们可以互相补足。下方的 Gerogia 和 Verdana 相比较右边的 Baskerville 与 Impact ，左边的字体表达了相同的价值，悦目的搭配，而右侧则显得过于大的字重导致 Imapct 对整个搭配都带来了极大的阴影。

15039853353396.png

2. 选择正确的字号

15039853655363.png

字号的不同，严重影响到你的屏幕阅读体验：

• 字太小导致阅读困难，这就导致很多读者会跳过其所呈现的信息。尤其是对于移动设备，小的字对于小且亮的屏幕简直就是阅读灾难。

• 字太大会导致分心，并且更倾向于单个字本身。

这就是为什么你需要选择合适于你设计的正文。提供一个统一适用所有的标准是不可能的，以下是一些建议：

• 对于桌面，使用 16 px 或更大的正文字号。不过分大并且适合阅读

• iOS 设备：使用至少 11 点的字体，可以适应大多典型阅读距离而不用缩放

• Android：最小的可读字体在 12 sp，但仍然建议最少使用 14 sp 在主体文字上。

Tip ： 分布式缩放「modular scale」是一种用于确定字号的方式，首先选择一个字体比例，例如黄金比，然后选择一个基本的字号，通过连续加倍或者缩小，得到有序的字号，这些可以帮助你选择不同字号来应用于设计。Gridlover 是一个可以方便确定字号的工具。

3. 左对齐以及留意空白

15039965188330.png

在西方世界，阅读习惯为从上到下，从左到右。将左侧对齐，将会更方便于阅读。左对齐有助于帮助眼睛换行阅读找到左边界。

留白也是非常重要的，要尽量避免一行内只出现了一个单词「widow」。

15039966913779.jpg

4. 选择一个能够在大多字号下良好表现的字体

15039979115673.png

用户会通过各种各样的方式访问你的网页或者 APP，要选择大多时候都能在各种字号下呈现良好可读性的字体。

尽量不要使用草体的脚本字体，这些字体虽然很美观，但是却难以阅读。

15039987850252.png

5. 使用可以区分字母的字体

15039989009496.png

辨识度「Legibility」是用来衡量一个字符于另一个字符在特定的字体中能够多容易辨别出来的概念。并不是所有的字体都优先考虑了辨识度，很多字体将 「i」和「l」设计的很难区分。有些时候，字间距也是十分重要的问题，字间距不够，会导致 「r」与「n」很容易的被混识为「m」。需要尽量避免使用此类字体，否则会在小屏幕上非常难读。

6. 限制每行的文字长度

15040564395795.png

行长「Line Length」是一段文字的横向长度。长文字是在设计中最常见的问题，每行拥有刚刚合适的文字是阅读体验良好的秘诀。最为主流的观点是，理想的行长在桌面阅读上不能超过60个字符，包含所有的空格在内。这种行长能够积极的影响我们的阅读节奏，人的心会在跳到下一行的时候感到愉悦，只要这个动作不是特别频繁。

15040574802835.png

很少有出现60个字符就超出桌面屏幕范围的，但是对于移动平台来说，很容易越界。对于移动平台来说，最佳规则是30-40个字符每行。

下图中左侧图使用每行50-75字符，右图则使用30-40个字符每行。

15040849731008.jpg

在网页设计中，你可以通过使用 em 单位或 pixels 来严格限制你的文本宽度。

7. 禁止全部大写

15040852971431.jpg

全文本大写，在不牵扯阅读的地方全大写并没问题，但是最好不要在又阅读情况的时候全部大写，会十分影响可读性。也不要全大写的温饱超过一整行。

8. 不要忽视边缘文字

15040854845534.jpg

边缘文字一旦被对齐，会导致整个文本都被平均的分布在一行里，如果使用强制对齐，会导致出现不均匀的留白。

右侧留白对移动用户又额外的优点，阅读人的注意力很容易被各种因素带走，行留白在右侧留下了随机的停留区，帮助眼睛快速的重新定位之前阅读的最后位置。

9. 不要最小化行间距

15041471543517.jpg

排版就是对空间的掌控。

15041475542456.png

行间距就是两行文字之间的距离。

错误的行间距要么使文字看起来拥挤，要么使文字阅读起来容易间断。

良好的行间距，有助于提升阅读性。恰当的使用间距，已被证明可以增加理解：使读者首先了解到这段文字密度不大，并且容易阅读。一个简单的规则是你的行间距要比你的词间距要大些。最佳规则是大约 30% 即可表达足够好的阅读性。

“The main factors that will influence the readability of your text are a good balance between font size and line spacing”

主要影响可读性的因素是如何在字号和行间距间取得最佳平衡

15041495240888.jpg

10. 确保你的文字拥有足够的颜色差异

15041496280614.png

即便对比很高的文字，也在高亮度下难以阅读。

使用色彩和对比来帮助用户阅读和理解你的文字。对比在移动设计中尤为重要，因为有可能会导致注意力分散。

对比的正确使用是非常复杂并且非常常见的设计者需要面对的问题：

• 选择的色彩与背景色过于相似，难以阅读。

15041500066510.jpg

• 文字与背景的色彩对比度过高。通常会导致视觉疲劳。

15041501518870.jpg

WC3’s Web Content Accessibility Guidelines 有完整的颜色对比指导。描述了对比度的最低标准，以帮助设计者能够设计出良好视觉阅读的文本。在正文中有以下两条建议：

• 小文字应当有至少 4.5:1 的对比对，7:1 的对比度是最佳的。

• 大文字「在 14 pt 粗体或 18 pt 普通 以上」应当有 3:1 的对比度。

15041513878289.jpg

Tip: 使用 对比度工具 来快速确定你的优化范围。

Bonus: 有帮助的资源

• Professional Web Typography 是一个如何使用字体的初学者网站。

• Google Font 以及 Typekit 能够帮助你发现适合的字体。

• Gridlover 可以有效的帮助你创建文字缩放。

• Just My Type 是一系列字体搭配收集的网站。

• Typewolf 是一个很棒的排版灵感源泉。

结论

良好的排版应当不仅能让人阅读，也能让人感受。排版是每个设计师都需要在数字时代所掌握的技能。对于任何设计计划，指导和技巧都只是开始要掌握的。最好的方法就是练习，当你做的时候，你才能真的学习。当你尝试越多的排版样式之后，你就能更好的理解用户如何看待你的设计。

原文：Getting Typography Right in Digital Design by Nick Babich from Springboard