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.

如果您一路走到這里，感謝您的閱讀！ 我希望這對嘗試制定印刷項目的團隊有所幫助。 期望在這個領域有更多設計系統的想法。