【自译】Working Type（Airbnb Design 文章）
该文章介绍了 Airbnb 谷物麦片字体（Airbnb Cereal）的设计过程，和该字体在网页、手机等UI环境下的适配与应用。
How we introduced Airbnb Cereal to our UI
在 2018 年 5 月 15 日，Airbnb 发布了一款全新官方定制字体，名为 Airbnb Cereal （谷物麦片字体），用于扩展我们的产品和品牌。谷物麦片字体由 Airbnb 营销体验设计团队与 Dalton Maag 全球字体工作室联合创造。
本案例研究是一系列发布内容的一部分，详细介绍了技术流程的故事。在这里你可以了解我们是怎样结合个性、功能、比例设计了一款别于其他的字体的。
——
排版印刷的决定通常是在品牌层面上进行的，结合了外观、感觉和准确传达品牌发展方向的考量。但是用户界面方面要怎么办？用户界面中通常90%都是文字，对于Airbnb来说也是适用的，所以改变字体会给我们用户界面设计带来重大改变。
作为设计语言系统团队的负责人，我经常好奇公司重塑品牌或改变字体时幕后发生的事情。他的过程是怎样的，要花费多久的时间？他们是怎么找到一个好的用户界面字体的，字体是如何实际改变用户界面的？
随着最近推出的新设计字体 Airbnb Cereal 的发布，我们团队能够第一时间体验这一过程——包括品牌营销和产品用户界面。从开发字体、用户界面测试、产品集成，这是我们在此过程中学到的东西。
Considerations and Partnership
考虑范围和合作模式
字体设计就像是其他的设计项目一样。我们的业务需求包括品牌差异化，跨越品牌和产品的能力，以及在用户界面中的文本易读性。通过调研、用户测试和这些年的观察，我们了解到，特别是在小尺寸中，我们原先的字体是很难阅读的。
我们简要地考虑了针对屏幕优化的系统字体，但是发现没有可以为我们的媒体和平台提供独特、一致风格的选择。所以大约 18 个月前，我们与 Dalton Maag 公司的字体设计项目拉开了序幕。
他们带领我们经历了每一个阶段：探索、构思、改进，同时与品牌和产品领导者密切合作并收集反馈。功能和品牌表达之间的平衡是非常必要的在很早就表现出来了，这影响了我们在整个过程中做的决定。
Choosing Your Family
选择你的字体类别
印刷排版不是凭空而出的——它植根于某种特定的文化和传统。它不是凭空发明的，它是现存传统的延续。所有我们当今可以看到的排版都是从活字印刷和古腾堡印刷（铅活字印刷术）开始一脉相承的产物。
与品牌和产品的负责人一起，我们决定方向性的关键词来代表我们期望的方向——人性化、友好、热情和创造的专业性。这个过程带领我们走向由我们自身风格引领的现代新石窟世代。
举例而言，有一些字母是受我们品牌元素：Bélo 启发而来的，它可以用连续的线段手绘出来。「a」和「b」都可以用这种方式绘制，并且「a」字碗的圆环与 Bélo 相连接。单笔画绘制是很人性化的，同时也与其他字母简单特征平衡。
Connecting Brand and UI
连接品牌和用户界面
营销和产品用户界面通常用排版来满足不同的目的。市场的目标是建立强有力的品牌表达，而用户界面的目的是在复杂并且多变的环境下也能传达品牌。
用户界面的排版，内容、屏幕尺寸和质量都不一样，文字大小、写作字数、形式和设备分辨率都很多样。用户界面必须基于提供的信息，支持社群需要阅读、理解或者做决定时候的复杂或者关键时刻，同时还要连接品牌。
简而言之，用户界面排版需要在即便不是所有情况下也要在大多数情况下工作的合理。唯一能了解你选择的这个字体的质量的方法，是在现实世界使用或模拟使用。
Working the Words
与字相关的工作
在构思阶段之后，我们开始从 Dalton Maag 公司接收字节的迭代。每一个字母都要花时间创造和修改，这就意味着我们一开始只能在有限的字集上工作。
要去看这些排版的个性是否符合用户界面，我们不得不用它来进行设计。只用20个字母来工作让这变成了一个很有挑战性的任务，因为如果我们意外的用了这个字集之外的字母，设计工具（如 Sketch）就会完全切换字体。在所有地方测试相同的字体文本感觉也不够现实。我们没有找到一个对有限字母做文本生成的工具，所以我们创造了我们自己的工具来产生单词。
为了模拟一个自然的句型，这个工具需要包括名次、动词和形容词，我从英文词典开始，同时使用正则表达式（又称规则表达式，计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式、规则的文本。）和 Unix 操作系统里的 AWK 语言（ AWK 是一个优良的文本处理工具，Linux及Unix 环境中现有的功能最强大的数据处理引擎之一），来来创造只包含我们目前可用的字母的一系列单词。我手动删除了一些我们觉得不值得展示的单词，并且加入了一些名字和地点像是 Airbnb 和 Alice。
我首先从简单的句子结构开始，像是名次+动词+形容词+动词。这感觉很过时，所以我开始找一些有名的作家像是海明威、 刘易斯·卡罗尔和马克·吐温来帮我打破陈规。通过粗略的模仿大师，句子变得更加有趣了。
该模型使用简单的 Node.js 程序产生标题、段落和短故事。然后它们就会被上传到云端，通过 JSON 转换成一组不同的内容，并且呈现在网站上。
一个基本的静态网站生成器被用来作为我们使用的内容生成网站的承载。它本身也充当了一个测测试员。在这个网站上切换 Circular 字体和新的字体是很容易的，同样还可以切换颜色和字体大小。它还简化了分享进程的过程，并在新的迭代到来时快速的测试。
UI Testing
用户界面测试
有了定制的内容生成器的帮助，在实际设计中测试文字就变得更加容易。在用户界面的测试中，我们关注于在所有尺寸下的可读性，为层级考量的平衡的字重，不让人分心的结构，这些都是我们相信会对功能性字体造成影响的品质。
区分字型和间字体孔径：如果字母有相似的形状或者看起来很像，像是e和c和o，或者是类似illinois 这样的单词，眼睛和大脑需要在辨别过程中更努力。通过区分相似的字母和扩大间隙，像是c打开的部分，我们让阅读变得更容易。
X字高和宽度。在以拉丁字母为基础的语言中，大多字母写的时候都是小写，大多数州没有升部，像是f的上半部分。通过适当的提高小写字母的高度比起大写字母或者有升部的字母，既可以让整个字面更容易阅读。用 fox 这个单词举例，我们会发现在f和ox之间的极端的高度区分就比较小。这会让这个文本在小号字体是看起来更大。
字重和笔画：用户界面的排版可能是非常小尺寸的，尽管屏幕分辨率已经有了显著的提升，还是没有打印出来的文字锐利。如果一个字母在用户界面中的字重太轻，那他可能就完全消失了。我们关注普通书本的字重，并且 Dalton Maag 进一步提供了平台特定字体微调。
简单并且保守：用户界面应该是功能性的并且应该尽可能简单的让人们在上面完成任务。一款好的用户界面字体轮廓应该是人们扫描过去的时候感觉到很柔和的。清楚并且易读，字面应该让人感觉几乎消失，只留下了内容。
——
“Type that’s too decorated or playful can distract or cause people to miss important information, therefore failing its intended purpose.”
太具装饰性和趣味性的字体会让人分心或者让人忽略了重要的信息，因此，那是没有达到预期的目的的。
——
我们弱化了 Cereal 更具表现力的形式，来为读者创造一个更好、更简单的字体。
测试教会了我们什么：在过去的六个月里，我们创造了上百个屏幕（内容）并且测试了大概30次风格和字重的迭代。这样的测试十分的有用，因为它允许我们去从字面在用户界面中的长处去做评判。许多字面特征——特别是结构——都很难去评估，除非我们在字重很重的界面中去看。
一旦我们有了总体风格和细节设置，我们继续完善并且又持续测试了六个月，在这个时间里我们都和 Dalton Maag 公司紧密合作。
Product Integration
产品整合
在我们开始要给字体项目定案的时候，我们面临了将新的字体整合进产品的挑战。我们需要在一个存在了十年，并且有上千个用户界面的产品上设置字体类型：包括字号、行距、字间距。
我们设计语言系统管理着所有平台的产品排版，所有我们的用户界面的组成、代码和设计都参考这个系统特定的排版风格。举个例子，如果一个工程师引用了“文本标题3”，它应该输出24号字，行距32，自间距2。所以一旦我们改变了初始定义，组成部分就自动接收了新的设置。但是因为没有两种字体用着同样的度量标准，我们需要开发我们新的排字方法，但又不能彻底的改变现有存在的产品。
为了在产品中测试新的排版，我们搭建了一个能让我们团队通过网页和手机应用看字体和字体设置的环境。和我们的测试小伙伴一起，我们获取了我们四个平台的产品，大量不同设备、种类、尺寸超过 11000 个屏幕截图。我们和用户界面系统团队一起审核了所有的屏幕界面并且标记了bugs。
上线之前的最后一步，是基于 A/B 测试完成业务度量，来保证我们的代码已经更改，且字体本身不会干扰这个产品。 我们在两百万个产品使用者中进行这个A/B测试，并且没有遇到什么重大的问题或者是在商业角度上的消极影响。
Going Live
继续发展
经历了18个月的创造、精炼、测试、整合，我们「开启了这个开关」，在品牌和产品上发布了 Airbnb Cereal 字体。这个过程让我们学到了创造定制字体的一些来龙去脉和细枝末节，当然挑战和成功也随之而来。这次的字体发布是一个起始点，我们还打算继续保持迭代和添加特色。
作为一个全球性的公司，我们很激动，通过继续创造所有语言在我们平台上的排版方式，我们可以更好的代表我们不同社群。这不是一个快速或者简单的尝试，但是创造一些对于我们来说不一样东西，这些东西可以改善全球社区对于我们产品和品牌不一样的感受，都能让我们感受到成就感。我们非常期待看到随着时间的推移，Airbnb Cereal 将会如何与我们一同成长。
See it live:
Check out this interactive type specimen site we created for Airbnb Cereal. It also includes a type tester so you can try it ourself at airbnb.design/cereal
译者补充相关扩展阅读：
感谢阅读到这里的人，你的点赞会给我翻译并分享更多文章的动力哦。
