西文字体巡礼 | Webnovel 产品字体方案优化

原创声明

本文为阅文体验设计 YUX 成员出品，请尊重原创，转载请联系阅文体验设计微信公众号 ( id: YUX_design ) 获取授权，并注明作者、出处和链接。

预计阅读时间：12分钟

阅文集团在2017年推出起点读书海外产品——Webnovel，将中国的正版网络文学带向全世界，产品问世一年以来深受亚洲和北美网文爱好者喜爱。为了提供将更好的内容阅读体验呈现给读者，2018年 Webnovel 启用了全新的品牌视觉设计来更好的服务越来越多的全球网文爱好者。而字体作为产品的重要的组成部分，在国内产品中，长期不受重视，或找不到合适的解决方案。通过本文，笔者想和大家探讨一下，在针对海外产品设计时，如何通过字体方案来优化产品使用体验。

为什么要换字体？

一套合适的字体方案可以极大的改善产品的整体使用体验，字体不仅仅可以改善使用者的阅读体验，也可以传递品牌感知和情感。目前 Webnovel 的产品界面字体使用有着相当大的优化空间。本次选字的目的，一方面是优化产品中现有字体解决方案，另一方面是测试不同字体对产品体验的影响程度。

当前 Webnovel 各端的字体选择使用情况

由于 Webnovel 的移动端是由原生开发与内嵌页开发共同组成，实现方式不一样，所以字体的实现方式容易出现不一致的问题：比如 iOS 客户端，原生部分使用的是苹方字体，而内嵌页部分使用的是 Helvetica Neue。从设计的角度来说，同一个产品里在相似场景中使用两套 UI 字体显然是不合理的，但是有意思的是这个现象一直没被重视。

苹方、Helvetica、San Francisco 字体在同等字重字号下对比

通过粗略对比发现 PingFang SC 的英文部分跟 Helvetica 特别像，而这部分其实就是 Apple 自己的字体 San Francisco，三者对比下来，区别可谓毫厘之间，如果使用者不是对字体高度敏感的人群，的确很难发现。但无论如何，目前 Webnovel 产品内缺乏字体使用原则的现状需要改善，就算暂时没有一套完全符合要求的字体，至少在各端内部表现要保持一致。

Helvetica 呼应了现代设计对更加中性的无衬线字体的需求，是国际主义风格的典型产物。图片来源：Helvetica Notebooks by Moleskine

Helvetica 本身作为诞生于上世纪50年代的一款老牌殿堂级字体，说它是史上最佳字体也不为过。它那不展现任何冗余信息的字形设计方式，看上去是一种没有风格也无关乎情绪表达的字体，简洁、直率、清晰，它准确地传达了瑞士精神的核心理念：中立。Helvetica 这种适用于几乎所有场景的特点让其在冷战时期迅速风靡全球，对当代设计师来说也承载了经典现代主义平面设计的美学记忆。

但到了当代的商业项目中，不太了解设计尤其是字体设计的相关人员几乎都将 Helvetica 作为项目中字体的首选，导致其被滥用，以至于许多设计师甚至普通字体爱好者看到了也会对它产生审美疲劳。另外 Helvetica 主要针对平面设计以及印刷场景，没有对屏幕设备做过特殊优化，它那比较略显拥挤的字偶间距使它在文本段落中的表现出糟糕的可读性。在字体选择丰富的当下，我们能轻易的找到它的替代者，Apple 也在2015年抛弃了 Helvetica。回到 Webnovel 选择字体这个话题上来说，选择一款更适合屏幕设备阅读、更加摩登的、更有设计特点、更能承担视觉标签和记忆的字体也是势在必行的。

选字标准有哪些？

一. 想通过字体传达什么感觉

首先我们要考虑字体要服务于什么样的产品，或服务于什么类型的用户群体。在目前移动互联网产品用户趋向于饱和的背景下，Webnovel 希望能更多的挖掘年轻用户这个使用群体，所以在选择字体时会更倾向那些能表现出「年轻」、「时尚」的特性的字体。根据这些原则，如果所有的字体摆在你面前，你也会迅速的将衬线体、装饰体、手写体等这种字体排除在外了。

非衬线体相比于衬线体显得更简洁和现代，在经历包豪斯主义浪潮之后，有明确目的性且能有效传达信息的无衬线字体开始发挥社会影响力。

二.  对可读性的要求

而其次，Webnovel 作为一款阅读类产品，即使不是用于阅读环境，对字体的识别性和可读性也是有要求了。那么如何去判断一款字体是否有着靠谱的可读性呢？

常见的字体设计知识点

如果你不想去做太多研究和分析，一个比较通俗便捷的标准就是如果一款字体有着更大的 X-Height，那么它的可读性就越高。X-Height 越大，单个字母就会有着更大的面积，也就有着更多空间来传达视觉信息。而 Cap Height（大写字母高度）与 X-Height 的合适比例也决定着字体的可读性。

如果说 X-Height 只是增加了字形的高度，那岂不是那些细细瘦瘦的字体就肯定更易读呢？所以除了 X-Height，我们还需要注意字偶间距（Kerning），适度增加字偶间距能让字体看上去更匀称，进一步提升字体的可读性。

同样字号和字重下的 X-Height 对比

通过比对我们可以看到，SF Pro 无论在字高和字偶间距上都比其他两者更胜一筹，而且 SF  Pro 的 Cap Height 较之前两者更小，这可以突显出 X-Height 的增大，变相的提高了字体的阅读性。在保证了字体可读性的前提下，选择一款专门为屏幕显示进行过优化的字体显得更理所当然。综合看来，iOS 版本中使用 SF 似乎是一个零成本的上佳选择。

三.  字重层级是否充足

Hierarchy 这个词可能大家有点陌生，但是每个设计师都在排版中面临过这个问题，在字体排印中，我们将它理解成「字重层级」。用最传统的报纸举例，内容通常会有标题、副标题和正文之分，这个三分法就是排版中的经典层级结构，至今广泛应用在排版相关的方方面面。

通过层级化的组织信息，能让读者清楚的看到最重要的信息，同时也能一目了然的浏览他们所寻找的内容。建立清晰的字重层级结构最大的好处就是能显著提升内容的可读性，而这都依赖于所选字体家族有着充足的层级。在苹方，甚至思源黑体发布以前，可运用于界面设计的中文字体选项少得可怜，设计师们都备受华文黑体和微软雅黑的折磨。如果有着丰富的选项，我们也不会选择字重层级单薄的字体了，这也很好的解释了为什么 PingFang SC 和思源黑体广受设计师们欢迎。

四.  其他

一款优秀的字体通常还会有着一些值得一提的小亮点。比如 SF 这款完全为屏幕设计的字体，在对待时间戳的时候也有做出优化。

SF Pro 在针对时间戳的显示上对冒号进行了优化

当在正常文本中使用冒号的时候，冒号是下沉的，而当用在界面中的时间戳时，下沉的冒号会自动居中，判断方法是当冒号前后的字符都是数字的时候就自动生效。

除了冒号，双引号也可以用于评判一款字体是否对细节有考量。自小时候我们就知道双引号是分前后的，但是当代有不少标新立异的字体会对前后引号进行模糊处理。

在段落文本中，有着前后引号区分的字体相比后者有着更好的阅读性

在对待 l（ L字母小写）、I（ i 字母大写）和数字 1 的时候，如果一款字体能方便的区分三者的差异，这也是对字体设计进行的优化。另外在对待小写字母 a 的设计的不同，这些点也能看出一款字体的设计特点以及它是否符合你的使用需求。

大写的 i 、小写的 L 和数字 1 在不同字体中的表现

百年以来字母 A 的小写有两种常见写法，类似汉字的繁简体区别，在手写字母时最右的写法更具效率却由于和字母 o 太接近而损失了可读性。

也许很多人会觉得西文字体的设计没有中文字体设计那么庞大的工作量，其实一套真正被 Well-Designed 的西文字体也会有很多背后的付出，包括很多不为人重视的细节，比如 Small Capital（小型大写字母）。

小型大写字母早在古罗马时期就被广泛使用（当时还没有发明小写字母），而当代它常用于电影海报、书籍封面中来展示次要信息（如人名、标签等），在不少产品设计中，小标题和操作文字也会使用小型大写字母。

Inkstone 中的小型大写字母

在去年笔者设计 Inkstone（Webnovel 的内容生产平台）时，就因为 Avenir Next 针对小型大写字母做了设计而选用了它。

着手挑选一款字体

当我们知道挑选合适字体的标准之后，熟悉字体的设计师其实或多或少心里已经有了模糊的答案，只不过会在几个备选中纠结。如果问我想用哪款具体字体，我一定会提名 Proxima Nova，这款自移动互联网时代以来爆红的字体已经成为了「The New Helvetica」，它已经服务于全球超过三万款产品，作为价格不菲的付费字体能有这样的成就足以说明这套字体本身的实力。

Proxima Nova 的全球使用量排名，它身前的字体大多或为免费字体或为系统自带字体

Proxima Nova 有着高质量的字体表现力，它的字形比例、空间感和整体感都是顶尖水准，它的设计者 Mark Simonson 力主将其设计得更简洁，没有多余的细节表现。这些特性能让 Proxima Nova 有着较高的使用灵活性，能适用于多种场景，而且最根本的，它是针对屏幕设计使用的字体。不过授权方面存在的问题使得我们目前不得不将目标转向其他方案，转向那些表现力接近 Proxima 但是有着更低的试验成本的方案。

对于初次寻求字体解决方案的情况，最高性价比的方式就是使用 Google Fonts 了，在上面筛选出针对屏幕优化的非衬线体，很快我们就会在排名靠前的位置发现了 Montserrat。这款字体本身也有着极高的人气，在字形基础上有着和 Proxima Nova 的高相似度。

它的作者 Julieta Ulanovsky 在布宜诺斯艾利斯的 Montserrat 生活时诞生了设计灵感，并在2011年在 KickStarter 上众筹这款字体。

不过由于这款字体的字宽过大，如果用于产品界面中无疑会极大的影响信息表现效率，不得不放弃。所幸 Google Fonts 有着相当丰富的字体储备，我在浏览了数十款字体之后就发现了一款不错的试验品——Nunito Sans，它也是一款合适的 Proxima Nova 替代品。

我们可以拿设计师非常熟悉的几款字体做简单的比对。Helvetica 代表着经典、简洁与稳重，Futura 和 Proxima Nova 代表着现代与时髦，比对下来 Nunito Sans 可以说兼顾了三者的特点且有着不错的纸面实力。

Futura、Nunito Sans、Proxima Nova、Helvetica Neue 的对比

Nunito Sans 的作者是知名字体 Oswald 的设计者 Vernon Adams（已故），Nunito Sans作为一款屏显字体有着丰富的字体层级，在业界也有着不错的口碑，同时还是一款 SIL 开源字体授权的字体，是一个值得尝试的字体解决方案。

总结

字体可以让你的眼睛感到轻松舒适，也可以让你的眼部肌肉感到紧张，字体和人有着密切的关系，选取一款对人阅读友好的字体，自然也可以潜移默化的影响人对产品的评价。除了改善用户的阅读体验之外，字体还可以强化产品的品牌印象，用户通过你的用字风格可以判断你的品牌调性，这就是为什么笔者不建议用过于默认字体，这无法让你从众多产品中脱颖而出。挑选一组字体或这一种字体风格，并坚持下去。

目前 Webnovel 中，安卓和 iOS 两个移动端使用这各自系统的主打字体 Roboto 和 SF Pro，而 Nunito Sans 试验于 Webnovel 的网页端产品，它们尽管不是最终的解决方案，但也能从侧面验证一些设计思考和假设，无论之后是继续沿用还是另辟新字体进行全端统一，这一次海外产品字体选型也能从某种意义上推动大家对字体的重视，充分利用字体的价值来协助达成更高的价值。

字体是一个古老而宽泛的话题，笔者也只是一个略懂皮毛的字体爱好者，但是笔者有这坚定的信念：那就是产品字体得保持简洁和易读，如果你对字体感兴趣可以访问 TheType.com（ TypeIsBeautiful ），如果你也想选取一套西文字体，可以去 Google Fonts 上多看多尝试，总有一款适合你的字。

如果有对 Webnovel 产品感兴趣的小伙伴可以访问 www.webnovel.com（国内访问需要爬梯子）体验一下，有任何问题欢迎与留言与笔者讨论。

参考链接

01 Choosing Web Fonts: A Beginner’s Guide by Google Design · https://design.google/library/choosing-web-fonts-beginners-guide/

02 Type Glossary by TypeDecon · https://typedecon.com/blogs/type-glossary

03 To choose the right typeface, look at its x-height. by Ricardo Magalhães · https://blog.prototypr.io/to-choose-the-right-typeface-look-at-its-x-height-instead-d5ef0967d09c

04 字体 Helvetica 60 岁了，它是如何变成了人们生活中的日常？by 胡莹@好奇心日报 · http://www.qdaily.com/articles/42473.html

05 苹果字体极简史-圣弗朗西斯科 by 字谈字畅 · https://thetype.com/2015/10/9609/

06 Apple’s San Francisco Font by David Kadavy · https://designforhackers.com/blog/san-francisco-font/

07 Why Proxima Nova Is Everywhere. by Tri Vo · https://medium.com/readme-mic/why-proxima-nova-is-everywhere-629282c687a6

本文作者：李益帆 (Mantou)

转载请向阅文体验设计微信公众号 ( id: YUX_design ) 获取授权，并注明作者、出处和链接。