原文鏈接：https://airbnb.design/working-type/
在2018年5月15日，Airbnb 推出了一種名爲Airbnb Cereal 的新字體。Airbnb Cereal 字體是與全球字體工作室 Dalton Maag 與 Airbnb 的營銷和體驗設計團隊合作創建的。 本案例研究是發佈系列的一部分，詳細介紹了技術流程故事。瞭解更多關於我們如何設計一個區分字體，結合性質，功能和擴展在這裏。
在印刷行業，決策通常在品牌傳達層面上進行 - 需要考慮將外觀，感覺和品牌準確表達。 但是在UI設計中呢？Airbnb 的 UI 界面正常情況有 90％ 是文本，因此更改字體會給我們的UI設計帶來重大變化。
作爲設計語言系統團隊的設計負責人，我經常想知道當公司重塑或改變字體時幕後發生的事情。這個過程是什麼，需要多長時間？他們如何找到一個好的UI字體，它如何實際改變UI？
隨着最近推出的新設計的字體 Airbnb Cereal，我們的團隊能夠親身體驗這一過程
- 包括品牌營銷和產品UI。從開發類型，UI測試和產品集成開始，這是我們在此過程中學到的。
1. 考慮範圍以及合作模式
字體設計就像任何其他設計項目一樣。我們的業務需求包括品牌差異化，跨越品牌和產品的能力以及UI中的文本易讀性。經過多年的研究，用戶測試和觀察，我們瞭解到，特別是在小尺寸中，我們以前的字體很難閱讀。
我們簡要地考慮了針對屏幕優化的系統字體，但發現沒有可以在我們的媒體和平臺上提供獨特且一致的語音的選項。所以大約18個月前，我們與Dalton Maag合作開始了這個字體項目。
他們指導我們完成每個階段 - 發現，構思和改進 - 同時與品牌和產品領導者密切合作並收集反饋。早期很明顯，功能和品牌表達的平衡是必要的，這影響了我們在整個過程中做出的決策。
2. 選擇你的字體類別
排版不是憑空出來的 - 它來自於特定的語言的文化和傳統。它不是平白無故被髮明的，而是現有傳統習俗的延續。我們今天看到的所有排版都是從活字印刷和古騰堡開始的後續的產品。
爲了結合品牌和產品領導力，我們決定使用有一定指向性關鍵詞來代表我們所期望的方向 - 人性化，友好，熱情和創造性的專業性。這個練習使我們走向現代 neo-grotesk （受自身風格的影響）。
例如，一些角色的靈感來自我們的品牌符號 Bélo
- 可以在連續的筆畫中手工繪製。
- 'a'和'b'都可以這樣繪製，'a'碗上的環連接回Bélo。
單筆畫是非常人性化的，但也與其他字符中的簡單特徵相平衡。
3. 連接品牌和用戶界面
營銷和產品UI通常使用排版來滿足不同的目的。雖然營銷旨在建立強大的品牌表達，但UI旨在連接到品牌，同時在複雜，經常變化的環境中運作。
使用UI排版，內容，屏幕大小和質量是動態文本大小，複製長度，格式和設備分辨率都有所不同。當社區需要根據所提供的信息閱讀，理解或採取行動，同時連接回品牌時，UI必須支持複雜或關鍵的時刻。
簡而言之，UI排版在大多數（如果不是全部）情況下應該能夠很好地工作。瞭解您選擇的字體是否具有這些品質的唯一方法是在現實世界中使用或模擬使用。
4. 工作的話
在構思階段之後，我們開始從Dalton Maag接收字體的迭代。每個角色都需要時間來創建和修改，這意味着我們必須在開始時使用有限的集合。
要查看字體個性是否適合用戶界面，我們必須使用它進行設計。使用大約20個字符使這成爲一項具有挑戰性的任務，因爲如果我們意外地使用了我們集合之外的字符，設計程序（如Sketch）將完全切換字體。在任何地方測試相同的副本也不夠現實。我們找不到有限的字符副本生成器，因此我們創建了自己的工具來生成單詞。
爲了類似自然句子結構，該工具必須包括名詞，動詞和形容詞。我從英語詞典開始，伴隨着正則表達式和Unix中的AWK編程，創建一組僅包含我們可用字符的單詞。我手動刪除了不值得展示的單詞，並添加了一些名稱和地點，如Airbnb和Alice。
我首先開始使用像noun-verb-adjective-verb這樣的簡單結構。這感覺很陳舊，所以我看着海明威，卡羅爾和吐溫這樣的着名作家來幫我擺脫困境。通過粗略地塑造大師，句子變得更有趣。
該模型使用簡單的Node.js程序設置，該程序生成標題，段落和短篇故事。然後將這些內容上傳到雲端，通過JSON轉換爲不同的內容集，並在網站上呈現。
一個基本的靜態站點生成器用於託管我們團隊使用的內容生成器網站。它本身也充當了測試人員。該網站可以輕鬆地在圓形和新字體之間切換，並能夠更改顏色和大小。這也簡化了共享進度的過程，並在新迭代進入時快速測試。
5. UI測試
配備自定義內容生成器使得在現實設計中測試字體變得更加容易。在UI中進行測試時，我們專注於所有尺寸的易讀性，層次結構的平衡權重以及非分散紋理 - 我們認爲所有品質都會產生功能性字體。
不同的字形和孔徑： 如果字母具有相似的形狀或外觀相似 - 例如“e”，“c”和“o”，或者像伊利諾伊州這樣的字眼 - 眼睛和大腦必須更加努力地處理。通過區分相似的字符和加寬孔徑，例如字母'c'中的開口，我們更容易閱讀。
X高度和寬度： 在拉丁語言中，大多數文本都是小寫的，大多數字符都沒有上升（就像'f'那樣）。與大寫字母或升序字符相比，通過按比例增加小寫字母的高度，可以使字體更易於閱讀。例如，對於'fox'，我們會看到'f'和'ox'之間的高度差異較小，這使得文本在小尺寸中看起來更大。