Typography. It’s complicated. With Product Design, it’s on every screen. Decisions for a type scale affect literally every aspect of a product. When you’re working with an existing product, defining typography can feel like spilled glitter — you can never clean it all up.

版式。 情况很复杂。 使用产品设计，它可以在每个屏幕上显示。 类型规模的决定实际上会影响产品的各个方面。 当您使用现有产品时，定义版式可能会感觉像是溢出的闪光，您永远无法将其全部清理干净。

As our tiny-but-mighty Design Systems team started an effort to document all foundational elements, typography was a major topic on the list that needed solving. I took the lead on this effort, and it was by far one of the most challenging and rewarding projects I have ever worked on.

当我们庞大但强大的设计系统团队开始记录所有基本元素的工作时，排版是清单上需要解决的主要主题。 我带头进行了这项工作，这是迄今为止我从事过的最具挑战性和最有意义的项目之一。

I’ve seen many examples from different Design Systems of beautiful, thoughtful and usable type scales. However, I couldn’t find even one explanation of how other companies came to their conclusions. This is my effort to share the why behind the finished product.

我已经看到了来自不同设计系统的许多示例，它们具有美观，周到和可用的字体比例。 但是，我什至找不到其他公司如何得出结论的解释。 这是我分享成品背后原因的努力。

类型＃目标 (Type #Goals)

All good projects start with clear goals. We made sure to have a few defined areas of focus as we kicked off this project.

所有好的项目都始于明确的目标。 在启动该项目时，我们确保有一些明确的重点领域。

1. Clean up our existing scale and consolidate styles清理我们现有的规模并巩固样式
2. Define a naming convention定义命名约定
3. Define pairing rules定义配对规则

我们从哪里开始 (Where We Started)

Our Design System already had a type scale in place. Our scale followed an 8 point grid, had defined line height and letter spacing, and was accessible to all our designers in our Sketch library.

我们的设计系统已经具有类型比例尺。 我们的比例尺遵循8点网格，定义了线高和字母间距，并且我们的Sketch库中的所有设计人员都可以访问。

However, this scale had no pairing rules. We had zero definition of how to use it. This meant that as new features were designed, we were using different styles to convey the same thing. (I don’t know who needs to hear this, but you don’t need 7 different types of subtitles.) Over time, this was leading to an inconsistent experience.

但是，该比例尺没有配对规则。 我们对如何使用它的定义为零。 这意味着在设计新功能时，我们使用不同的样式来传达相同的内容。 (我不知道谁需要听这个，但是您不需要7种不同类型的字幕。)随着时间的流逝，这导致了不一致的体验。

研究 (Research)

内部审计 (Internal Audit)

I first needed to understand how our existing type scale was being used internally. I started by reaching out to my fellow designers, gathering as many of our screens in Sketch as I could, and comparing the different styles in use.

我首先需要了解如何在内部使用现有的类型标度。 我首先接触了我的同事设计师，在Sketch中收集了尽可能多的屏幕，并比较了使用中的不同样式。

This helped me understand which styles were used most frequently, where we were not using a scale at all, and where we used different styles to display the same type of information. For example, I found in this audit that we were using over 15 types of headlines for cards.

这帮助我了解了最常用的样式，根本没有使用刻度的地方，以及使用不同样式显示相同类型信息的地方。 例如，我在这次审核中发现，我们使用了15种以上的卡片标题。

外部审计 (External Audit)

Now that I knew how our team was using type, I needed to figure out how other teams approach this. I started researching other Design Systems and reading everything I could find about type scales. I quickly noticed a theme: there seemed to be two different types of scales — predictable type scales, and non-predictable.

现在我知道我们的团队如何使用类型，我需要弄清楚其他团队是如何使用此类型的。 我开始研究其他设计系统，并阅读了有关类型比例尺的所有内容。 我很快注意到一个主题：似乎有两种不同类型的量表–可预测的类型量表和不可预测的类型量表。

可预测的类型量表 (Predictable Type Scales)

A quick crash course on predictable scales:

可预测规模的快速速成课程：

Start by picking a base size, then choose a ratio. Some common ratios are 1.125 and 1.333. Starting with your base size, you increase consistently by that ratio — and bam! You’ve got a predictable scale. (It took me so much research to finally understand that, you’re welcome.)

首先选择一个基本大小，然后选择一个比率。 一些常见的比率是1.125和1.333。 从您的基本尺寸开始，您将不断增加该比例-而且很糟糕！ 您的规模可预测。 (我花了很多时间才终于明白这一点，不客气。)

Adobe and IBM both use a predictable scale, you can check those out here and here.

Adobe和IBM都使用可预测的规模，您可以在此处和此处进行检查。

The benefit of using a predictable scale is that it is potentially infinite. This means it is scalable across platforms and products and can grow as needed. Making a new hero design for desktop and need a larger type size? When your scale is predictable, that would never be a problem.

使用可预测的标度的好处是它可能是无限的。 这意味着它可以跨平台和产品扩展，并可以根据需要进行扩展。 为台式机制作新的英雄设计，需要更大的字体吗？ 当您的规模可以预测时，那将永远不是问题。

“A predictable scale, like a musical scale, is a prearranged set of harmonious proportions.”

“可预测的音阶，就像音乐音阶一样，是一组预先设定的和谐音阶。”

— Robert Bringhurst

—罗伯特·布林赫斯特

不可预测的类型量表 (Non-Predictable Type Scales)

Most products don’t use a predictable type scale, rather their type scale consists of sizes chosen based on what is needed, and what looks best in context. The benefit of this is that you can choose styles more emotionally, based on what looks right. The best example I could find of a non-predictable scale is Airbnb. They somehow manage to use only seven styles across web, mobile, and even email. Seriously dreamy.

大多数产品都不使用可预测的类型标尺，而是它们的类型标尺包括根据需要选择的尺寸以及在上下文中看起来最佳的尺寸。 这样做的好处是您可以根据看起来正确的内容在情感上选择更多样式。 我能找到的最好的例子是Airbnb 。 他们以某种方式设法仅在Web，移动甚至电子邮件中使用7种样式。 认真做梦。

设计与测试 (Design & Testing)

Phew. Okay. After all this research, I was ready to try and test some ideas for our own type scale. Note that while I am sharing only the scales, I tested out each of these options across a range of our key screens and components to see if they worked well.

ew 好的。 经过所有这些研究之后，我准备尝试并尝试一些针对我们自己的类型量表的想法。 请注意，虽然我只共享比例尺，但我在一系列关键屏幕和组件中测试了这些选项中的每一个，以查看它们是否运行良好。

选项1：压缩秤 (Option 1: Condensed Scale)

Inspired by Airbnb, I created this scale with only 7 styles and then created combinations for how they should be used in context. I was amazed at how well it worked!

受Airbnb的启发，我创建了只有7种样式的比例尺，然后创建了如何在上下文中使用它们的组合。 我对它的效果感到惊讶！

选项2：可预测的规模 (Option 2: Predictable Scale)

For this scale, I used the 1.125 ratio, also known as the Major Second ratio. I set our base size to 16 and rounded to the nearest whole number. When using a predictable scale, you end up with weird numbers like 17.62, so to make it useable it’s best to round it.

对于此比例尺，我使用1.125比率，也称为主要第二比率。 我将基本大小设置为16，并四舍五入为最接近的整数。 当使用可预测的比例尺时，最终会得到诸如17.62之类的怪异数字，因此要使其可用，最好将其取整。

The obvious problem with this is that it breaks the 8pt grid, but by keeping the line height to multiples of 8, you can still make it work in the grid. In this example, you can see I rounded to whole numbers, and adjusted the line height to multiples of 8.

明显的问题是它破坏了8pt网格，但是通过将行高保持为8的倍数，您仍然可以使其在网格中工作。 在此示例中，您可以看到我四舍五入为整数，并将行高调整为8的倍数。

选项3：品牌秤 (Option 3: A Branded Scale)

With all these numbers and calculations in my head, I started wondering how we could infuse some personality into our typography. Was there a way to make our scale uniquely Royal?

带着所有这些数字和计算，我开始想知道如何才能将某些个性注入我们的版式中。 有没有办法使我们的规模成为皇家？

And then it came to me — what could be more Royal then our ship fleet?

然后到了我的脑海里？

I decided to try naming type pairing combinations after our ship names. These combinations are in order of the size of our ships, because I knew that would be intuitive for our team. I also chose ship names that would be in alphabetical order, which would make it most organized in a Sketch library.

我决定尝试在我们的船名之后命名类型配对组合。 这些组合按我们船舰的大小排列，因为我知道这对我们的团队来说很直观。 我还选择了按字母顺序排列的船名，这将使它在Sketch库中井井有条。

I presented all these options to my team and our leadership and walked them through the logic and examples of each option applied to our designs.

我向团队和领导层介绍了所有这些选项，并逐步介绍了应用于我们设计的每个选项的逻辑和示例。

为什么这些都不起作用 (Why None of These Worked)

Here’s a high-level look at the feedback I received on the options I presented. Based on these comments, I continued testing until I found a solution that worked.

这是对我收到的关于所提出的选项的反馈的概括性观察。 基于这些评论，我继续进行测试，直到找到可行的解决方案。

最终类型量表 (Final Type Scale)

Our final type scale took a little more finessing and ended up being a combination of a predictable and non-predictable scale. Here’s what that means:

我们的最终类型量表需要更多的技巧，最终成为可预测和不可预测量表的组合。 这是什么意思：

I began with the same ratio of 1.125. I noticed that by changing the base size from 16 to 14, the sizes were very close to our existing scale. By tweaking the numbers just a little, and rounding to the nearest even whole number, we ended up with a scale that is familiar, flexible, and scalable. Predictable but purposeful.

我以相同的1.125比率开始。 我注意到，通过将基本尺寸从16更改为14，尺寸非常接近我们现有的尺寸。 通过稍微调整数字并四舍五入到最接近的偶数，我们最终得到了一个熟悉，灵活且可扩展的比例尺。 可预测但有目的。

The one thing missing here was the pairing rules. But since this scale includes all the same size that I had tested in my option of a condensed scale, I had already tested type pairings.

这里缺少的一件事是配对规则。 但是由于该比例尺包含与我在压缩比例尺选项中测试过的所有尺寸相同的尺寸，因此我已经测试了类型配对。

With this scale and these pairings, we finished this project by completing two of our main goals- defining type pairings, and cleaning up our existing styles. The only thing still missing is our naming convention — I’m secretly still hoping we’ll go with the ship names theory.

有了这种规模和这些配对，我们通过完成两个主要目标完成了这个项目-定义类型配对，并清理我们现有的样式。 唯一仍然缺少的是我们的命名约定-我仍然秘密地希望我们会继续使用船名理论。

一些想法 (Some thoughts)

I am not a typography expert, by any means. I was intimidated to take on this project because I felt a little out of my comfort zone.

无论如何，我不是印刷专家。 我被这个项目吓到了，因为我感到有些不适。

What I learned from this project is the power of the UX process to solve any complex problem. I started this project by going deep into both an internal and external audit. When I began to design and test, I was working based on everything I had learned from my research. When I presented my findings to my team, I knew they were solid. I felt confident to share my suggestions. In turn, my team knew I had done the homework, and this was a thoroughly well thought out solution.

我从这个项目中学到的是UX处理解决任何复杂问题的能力。 我通过深入进行内部和外部审核来启动此项目。 当我开始设计和测试时，我的工作是基于从研究中学到的一切。 当我向团队提出发现时，我知道它们是可靠的。 我有信心分享我的建议。 反过来，我的团队知道我已经完成了作业，这是一个经过深思熟虑的解决方案。

If you made it all the way down here, thanks for reading! I hope this can be helpful to teams trying to work out typographic projects. Expect more Design Systems musings on this space.

如果您一路走到这里，感谢您的阅读！ 我希望这对尝试制定印刷项目的团队有所帮助。 期望在这个领域有更多设计系统的想法。