迷你教程——字體組合指南

“排版是二維架構，以經驗和想像為基礎，以規則和可讀性為指導。” ——赫爾曼·扎普夫

就在短短幾年前，設計師在選擇網絡字體方面受到嚴格限制。 這些選項通常僅限於系統字體，並希望網站的訪問者安裝了這些字體。

雖然網絡字體在 90 年代後期在技術上是可行的，但直到 2009 年 WOFF 格式可用並成為 W3C 開放標準的一部分時，它們才得到廣泛使用。 這為設計師打開了一個全新的印刷選擇世界。

這就是兩難境地：現在網頁設計師可以使用數千種字體，如何創建可以很好地協同工作並支持所呈現內容的字體組合？

良好的排版和使用最好的字體組合可以提升設計與同行的差距，並創造更令人愉悅的用戶體驗。 有效的類型組合為設計增加了視覺趣味，可以讓訪問者在頁面上停留更長時間。

相比之下，糟糕的類型會使內容更難閱讀，閱讀者的愉悅感也會降低。

學習有效地組合字體是設計師教育的重要墊腳石，應該不斷完善和改進。 掌握排版的設計師甚至可以使最簡單的設計更有效。 遵循組合字體的基本排版指南是最好的起點。 一旦掌握了這些“規則”，設計師就可以擴展並嘗試創建可以彎曲或打破這些規則的印刷組合。

類型特徵

有成千上萬的字體可用，試圖找出從哪裡開始可能會讓人不知所措，即使對於高級設計師來說也是如此。 了解不同字體的特點是學習如何有效組合它們的第一步。

了解這些特徵如何相互關聯，讓設計師可以自信地組合字體並嘗試意想不到的組合。 實驗和實踐是設計師可以真正磨練他們的字體組合技能並創造出讓他們與其他專家區分開來的設計的地方。 有時，傾聽他們的直覺是創建真正閃耀的字體配對的最佳方式。

分類

字體分類是要理解的最基本的概念之一。 有四個主要分類需要學習：襯線、無襯線、腳本和裝飾。

Serif 和 sans serif 字體適用於標題和正文。 然而，腳本（有時也稱為手寫字體）和裝飾性字體通常只適用於標題和標題或其他小塊文本。

襯線字體被認為對於長文本塊（例如正文）更具可讀性，特別是在印刷設計中，襯線功能可以幫助引導讀者的視線沿著每一行。 但無襯線字體也具有高度可讀性，並且在較小的尺寸（例如用於字幕或元信息的字體）中表現出色。

無襯線字體在網絡上也更受歡迎，並且被廣泛認為比襯線字體更具可讀性。 部分原因源於早期的計算，當時較低分辨率的屏幕使襯線字體有些模糊，具體取決於大小。 使用現代高清和 Retina 屏幕，這不再是一個問題，襯線和無襯線字體都可以有效地使用。

組合來自不同分類的字體通常比在分類內組合更簡單，因為已經內置的字體之間存在一定程度的對比。 也就是說，只要考慮其他特徵，也可以有效地將字體組合在同一類中。

重量

粗細是指字體中字體的粗細。 細的、規則的、半粗體的、粗體的和黑色是重量的例子。

組合字體時，重量之間的對比是必不可少的。 將非常粗的字體與非常輕的字體結合起來通常會讓人感覺不平衡。 但是組合相同重量的字體也可能是一個挑戰。

相反，尤其是在開始使用字體組合時，最容易找到具有明顯但不是極端重量差異的字體。 設計師可以從那裡擴展到更突出的區別。

風格

雖然 style 有時可以與分類互換使用，但在這種情況下，它指的是一種字體，或者是normal 、 italic或oblique 。

在組合使用不同樣式的字體時，確保斜體或斜體樣式與普通樣式一樣好用是很重要的。 有時斜體樣式與相同字體的正常樣式有很大不同，這會使原本可以很好地協同工作的字體突然發生衝突。

對比

組合字體的對比可能很棘手。 對比度太小會使字體發生衝突，而對比度太大也會產生同樣的效果。

組合字體時的對比度是指字體不同的任何方式，包括分類、重量、樣式和結構。

開始時，最好只關注其中一兩個事物之間的對比，同時確保其他事物非常相似。 粗細是在字體之間創建對比的最簡單方法之一。 正如已經提到的，太多的重量對比可能和太少一樣不和諧。

另一種創建對比度的簡單方法是結合不同分類的字體，例如無襯線和襯線或腳本和襯線等。在這些情況下，確保兩種字體的情緒匹配是必不可少的。

例如，將像 Amatic SC 這樣更隨意的字體與像 Baskerville 這樣的非常正式的字體結合起來會產生衝突而不是對比。 但是將 Amatic SC 之類的字體與 Josefin Slab 之類的另一種休閒字體結合起來效果很好。

X 高度

X-height 是指字體中單個字符的高度，特別是小寫的x 。 具有相似 x 高度的字體將比具有不同 x 高度的字體更好地協同工作。

結構

字體的基本結構包括其所有特徵，以及字符的基本形狀及其間距等內容。 與字體結構形成對比是一種組合字體的既定方法。 但最好選擇至少有一些共同結構元素的字體（例如 x-height 或“正常”樣式的粗細），而不是那些完全不同的字體。

情緒

情緒是排版中比較主觀的領域之一。 它指的是字體的正式或非正式程度，以及它是否俏皮、女性化、男性化、休閒、嚴肅等。

例如，Comic Sans 是一種非常非正式的字體，不適合在大多數情況下使用。 另一方面，Bickham Script 非常正式，但給人的印像是商務信函之類的錯誤。

組合字體時，找到具有相似情緒的字體很重要。 將俏皮的字體與非常嚴肅的字體結合起來會讓人不快。

裝飾、顏色和質地

這些東西不是字體的固有特徵，但在組合字體時它們很有用。 通過顏色、裝飾（例如下劃線）和紋理來統一（或創造更多對比）可能是一種非常有效的技術。

有效的字體組合

那裡似乎有無窮無盡的具有漂亮排版的網站，以及同樣無窮無盡的那些字體不好或只是乏味的網站。 當設計師剛起步或試圖將他們的技能提升到一個新的水平時，學習正確的網站是學習如何組合字體的好方法。

Work Notes 將襯線字體 Adob​​e Caslon Pro 與無襯線 Interstate 相結合，創造出一種向傳統致敬的字體組合，不會讓人感到陳舊或過時。 結合不同的權重和样式增加了額外的視覺趣味，並使排版感覺比實際更複雜。

Adjuvant Capital 使用現代、略帶異想天開的襯線字體 Orpheus Pro 與現代 GT America 無襯線字體相結合。 對於一家金融服務公司來說，這是一個非常現代的選擇，但與他們對社會負責的全球投資的使命相得益彰。

Bloomscape 使用休閒襯線字體 Morion 和無襯線 Raisonne 來創建引人注目的現代版式設計。 由於其更具裝飾性的字體，Morion 不一定是正文類型的明顯選擇，但是當以適當的尺寸使用時（如這裡所示），它非常適合較短的正文文本塊。 Raisonne 具有類似的裝飾性字體，這使得這兩種網絡字體可以很好地協同工作。

Vogue 使用現代、優雅的 Savoy 襯線字體與怪誕的無襯線富蘭克林哥特式字體搭配，後者最初設計於 1902 年。兩者的結合創造了一種高檔字體設計，吸引了雜誌所針對的有文化的受眾。

南方生活方式雜誌《花園與槍》在其網站上的排版比此處包含的其他雜誌更複雜，這確實使它與眾不同。 該網站自始至終使用四種主要字體：主要文章標題是襯線域顯示； 正文和首頁部分標題為襯線字體 Domaine Text； 元信息、導航和部分標題使用無襯線 Avenir Next； 主頁上的其他部分標題位於 Domaine Sans Display 中。

在更大的字體系列中使用多種字體是創建完美協調的複雜排版設計的一種行之有效的方法。 添加 Avenir Next 打破了一切，並增加了額外的視覺趣味。

你選擇的字體和你用它做什麼一樣重要。

— 邦妮·西格勒

結論

有效的字體組合是良好設計的標誌。 如果設計師想要創造出與眾不同的非凡設計，就必須掌握這項技能。

將此處包含的指南視為探索如何有效組合類型的起點。 堅實的基礎可以進行更有效的實驗，而無需花費數小時在完全不合適的組合上。 從這裡開始，設計師可以練習創建自己的風格和方法來有效地組合字體，在必要時偏離指導方針，更有信心他們的最終產品會讓用戶感到高興。

進一步閱讀 Toptal 設計博客：

• 可讀性設計——網頁排版指南（附信息圖）
• 了解字體分類的細微差別
• 剖析排版解剖學的複雜性（帶信息圖）
• 如何構建有效的排版層次結構
• 網頁和印刷設計的字體樣式