作為一個設計師的最重要技能之一就是你要學習如何去選擇排版。這是因為文本是設計師與用戶溝通的主要方式之一。排版能成就你的設計，也能毀滅你的設計。
一個美觀又復雜的排版。有些人將他們全部的事業奉獻在了排版上。值得慶幸的是，他們的工作是有據可查的，所以我們有大量的在線排版資源。
本文的目的是作為一個起點幫助你學習如何為你的設計選擇排版。它將激勵你探索超乎你所認知的字體間的組合。
確定你的目標
在你做任何事之前，你首先要確定你設計的目標。你想要傳達的是什么信息？你的設計媒介是什么？
優秀的設計使其排版與其目的具有一致性。這是因為排版是設計中的情緒，音調和風格的關鍵。
例如，如果你正在設計一張插圖豐富的賀卡，你需要選擇適合你插圖風格的字體。與你設計的其余部分協調一致。
Choose a font that suits the style of your illustration
如果您正在設計一個圖像驅動的登錄頁面，你需要選擇不會影響圖像的簡單字體。使用排版作為強調溝通信息意義的方式。
If images are the focus of your design, choose simple fonts so that the images stand out
確定你的受眾
明確你的設計目的后，確定你的受眾。這一步很重要，因為年齡和興趣愛好會影響你的字體選項。
闡明你的設計目的后，確定你的受眾。這一步驟至關重要，因為有關你的用戶信息（如年齡，興趣和文化成長）可能會影響你對排版做出的決定。
例如，一些字體更適合兒童使用。當閱讀時，兒童需要高度清晰并且較大的字體。Sassoon Primary是一個很好的例子。Sassoon小學由Rosemary Sassoon開發，根據她的研究結果，發現了孩子們很容易閱讀哪些字母。
Sassoon Primary was developed Rosemary Sassoon
其他字體更適合老年人使用。高級友好的字體且使用可讀的尺寸，高對比度的顏色，并要避免腳本和裝飾的風格。
選擇排版時，請考慮你的受眾及其需求。簡單地說，設身處地從用戶的角度感受。
找尋靈感
看看其他設計師的工作。嘗試了解他們如何做出排版的決定。
字體啟發
對于字體的靈感，CreativeBloq的The 100 Best Free Fonts是一個很好的文章，以便讓你有正確的心態去選擇排版。在文章中，CreativeBloq解釋了每種字體背后的動機。
另外一個有用的資源是Awwwards的 100 Greatest Free Fonts Collection for 2015。
Invision還編制了giant repo of typography resources。在這你會發現更多的靈感來源。
Typ.io curates font inspiration from around the web
從網站的實際靈感來看，查看 Typ.io.該網站策劃的字體靈感來自于網絡。此外，它在每個靈感樣本的底部都提供了CSS的字體定義。
查看專用字體靈感網站，訪問你最喜歡的網站，并查看他們使用的是什么字體。WhatTheFont是一個很不錯的工具。WhatTheFont是Chrome的一個擴展，可以通過鼠標懸停在網頁上來檢查網頁中的字體。
配對靈感
除了字體外，還要看字體的配對靈感。字體配對與字體本身一樣重要。良好的字體配對有助于建立視覺層次結構，提高設計的可讀性。
Font pairing is just as important as the fonts themselves
為了靈感，從 Typewolf開始。Typewolf的策劃來自不同網站的字體配對靈感。除此之外，他們還有字體建議和深入的排版指南。這是排版的寶庫。
FontPair還策劃字體配對靈感，專門針對 Google Fonts。你可以按排版的風格組合排序，如無襯線和襯線，或襯線和襯線。
最后，設計師在線創建了大量的字體配對集合。例Typography: Google Fonts Combinations和Typography:Google Fonts Combinations Volume 2。只需在如Behance和Dribbble上搜索“字體配對”。
選擇字體
用研究和靈感來支撐。關于選擇排版，請牢記以下原則：可讀性，易讀性和目的性。
Before choosing a font, research into its intended purpose
選擇常規且易于閱讀的字體。避免高度修飾的字體，有利于簡單實用的字體。另外，需要注意字體的目的。例如，一些字體更適合作為標題而不是正文。
為此，在選擇字體之前，需要研究其預期所達到目的。
Pair fonts that contrast one another
在字體配對方面，保持簡化，最多可以有三種不同的字體。另外，配對字體組織之間相互對比。這樣做將有助于引導讀者的視線，首先是標題，然后到正文文本。你還可以使用不同的字體大小，顏色和權重創建視覺對比度。
對于網絡字體，你可以使用 Google Fonts, Typekit和Font Squirrel。Google Fonts是免費的，Typekit和Font Squirrel都有免費和付費的字體。
確定字體大小
確定字體組合后的下一步是確定字體的大小。 Adobe的排版主管Tim Brown提供了一個很好的工具是 Modular Scale。模塊化量表是一個系統，以確定歷史上令人滿意的比例創建尺度，來確定排版的大小。
例如，你可以使用一個基于Golden Ratio的刻度。這將是你的前五個計算字體大小的選項：
Golden Ratio(1:1.618)
1.000 x 1.618 = 1.618
1.618 x 1.618 = 2.618
2.618 x 1.618 = 4.236
4.236 x 1.618 = 6.854
6.854 x 1.618 = 11.089
你可能會遇到的一個問題是你的比例太大。看一下基于Golden Ratio的基礎上的后期間隔會發生什么。
Golden Ratio(1:1.618)
...
11.089 x 1.618 = 17.942
17.942 x 1.618 = 29.032
9.030 x 1.618 = 46.971
46.971 x 1.618 = 75.999
75.999 x 1.618 = 122.966
正如你所見，數字之間的間隔開始變得很大。對于大多數界面，你需要較小的間隔。值得慶幸的是，Modular Scale具有幾何，自然和音樂的各種比例。
Minor Second 15:16
Major Second 8:9
Minor Third 5:6
Major Third 4:5
...
所以不用使用黃金比例，你可以使用像Perfect Fourth那樣產生較小間隔的比率。
Perfect Fourth (3:4)
...
9.969 x 1.333 = 13.288
13.288 x 1.333 = 17.713
17.713 x 1.333 = 23.612
23.612 x 1.333 = 31.475
31.475 x 1.333 = 41.956
41.956 x 1.333 = 55.927
一旦你定了一個刻度，你可以從列表中挑選字體大小，并將它們舍入到最接近的十進制。
Font Sizes
Header 1: 55px
Header 2: 42px
Header 3: 31px
Header 4: 24px
Header 5: 14px
Body: 17px
Caption: 14px
Modular Scale方法使用數學精度來生成字體大小。但是，這只是一個引導。使用此方法作為起點，然后利用人眼調整大小。
創建一個排版風格的引導
該過程的最后一步是為你的排版創建一個風格指導，以幫助你的設計排版標準化。
Shared styles in Sketch
在像Sketch這樣的程序中，你可以創建共享的文本樣式，以便快速插入已經從引導中應用的樣式的文本。
在此過程的這一步中，你可以調整完成文本屬性，如顏色，比重和大小。
顏色一詞：在選擇顏色時，請考慮你的調色板。選擇與你的調色板協調一致的顏色。
Use styleguides to standardize type across your designs
在你的風格指南中，請確保至少包含以下內容：字體定義，字體大小，字體顏色和示例用法。
Google’s Material Design typography guidelines 是包含在風格指南的一個很好的例子。其他幾個包括排版指南的例子Mailchimp, Apple和 Focus Labs。
排版是實驗。它既是科學又是藝術。
原文地址：https://medium.freecodecamp.com/typography-can-make-your-design-or-break-it-7be710aadcfe
原文作者：Jonathan Z. White（Designer & developer）
平面設計
工業設計
CG插畫
UI交互
室內設計
建筑環境
