實例教學！10個幫你運用好字體組合的設計原則

編者按：選擇與設計相符的字體、展現視覺的層次感、襯線體與非襯線體一起使用、避免字體沖突、避免使用相似的字體進行組合、限制你所使用的字體數量... 今天@喪心病狂十六夜貓?這篇譯文總結了運用好字體的設計原則，都是基礎但不可忽視的，適合新手學習或重溫。

實例教學系列：

1. 《實例教學！12種透明背景的萬能設計方法》
2. 《實例教學！設計網頁時選擇配色的八個要點》
3. 《實例教學！10個用好模糊效果的超實用設計技巧》
4. 《實例教學！利用「對比原則」做出搶眼設計的20個方法》

01. 選擇與設計相符的字體

許多字體有著簡便，開朗，正式，雅致等不同于其他氛圍（英: Mood）或個性（英: personality）。制定設計字體的氛圍，就需要優先確認。

例如圓圓滾滾的字體，用在孩子生日宴會的邀請函上就非常合適，而公司的簡報上就很不合適。

因為人是有多種多樣各不相同的（例如內向（英: Introverted）或者外向（英: Extroverted）等），因此才會有魅力。有著強烈的個性的字體，可以將他與簡單的字體相組合以保持平衡。

在下面的這個項目中，有特色的手繪風格字體，與無襯線字體相結合，沒有妨礙主字體的同時，下面的小字也保證了其可讀性。

當決定兩個或以上的字體時，說不定就有一種玩聯想游戲（英: Guessing Game）的感覺。大部分情況我們都是靠著自己的直覺來決定的，這其實沒關系。

無論是網頁，雜志，商店用的海報，還是產品包裝，什么樣的字體組合好，什么樣的不好，我們都是從聯想字體開始的。

02. 展現視覺的層次感

很久之前發行的報紙或雜志，對展現字體組合的層次感有著非常好的示范作用。標題，副標題，正文，解說辭等要素都是靠著字體的組合，來將視覺劃分開的。

字體的尺寸（英: Size）粗細（英; Boldness），文字間距（包含了行距（英: Leading）和字間距（英: Kerning））的調整，都可以引導視線，將它們集中在你所希望的特定部分。

層級（英: Hierarchy），就是在標題正文布局以外，你可以作成各種各樣的的類型的設計。在給項目選擇字體的時候，不妨想一想，你希望一開始就給用戶看到什么地方。

另一點，決定什么樣的信息才是重要的。什么是最先躍入眼簾的（公司名字的標題，特別優惠等），然后決定什么內容是不重要的。然后，我們再來決定字體的大小樣式和組合。通常，

重要的內容都是用大字號，粗體來表示的。

03.仔細想想是不是該用

你需要知道什么樣的環境，什么樣的用途用什么樣的字體，什么樣的字體使用了會更加舒適。在實際表示的尺寸上，清晰易讀是十分重要的，就算是特別小的文字也有必要保證易讀。在下面這個案例中，不論是記載著小文字還是大文字的地方，文字間都留有特定的空間，在強調的同事保證了其易讀性。

然后，字體的尺寸會影響閱讀。在一開始選擇字體的時候，你就需要考慮他的設計性和可讀性是否相匹配。（規則1說明，考慮文字的個性。）

文字選擇的過程中，標題使用的字體（英: display typefaces），選擇有特點的字體還是中規中矩（英: Neutral）的字體，是非常重要的工作。在下面這個雜志的版面設計中，標題使用了兩種字體，正文使用了無襯線字體。

字體可以從具有歷史性的背景或體裁中選擇。你可以簡單的研究一下字體的歷史背景，以及，這個字體是在什么時候被創造的。或者說，知道了這個字體是在什么時代被利用的，你可以了解他是否與你的設計相匹配。

例如在給描寫美國總統亞伯拉罕·林肯（英: Abraham Lincoln）一生事跡的書做封面設計時，我們就可以使用美國南北戰爭（1861-1865）時使用的Caslon或Clarendon體。

另一個案例，字體的種類，在設計的整體中擔任很大的作用。下面這個案例，因為想表現出1950年代的復古感覺，字體采用了那個年代常用的廣告或標識常用的字體。

04. 襯線體與非襯線體一起使用

如果沒有時間了，需要你馬上決定兩種字體。在那個時候，我們可以選擇一部分文字使用襯線體（英: Serif），而另一部分文字我們可以是用非襯線體（英: Sans Serif）。這樣的組合大體上往往很不錯，尤其是兩種字體大小不一樣的時候是最適合的。

另外補充重要的一點，現在世界上的排字藝術（英：typography）中，關于襯線體和非襯線體哪一個更容易閱讀有著很大的分歧。大量的文字和文章表明，襯線體的字體可以有效的轉移視線，提高閱讀速度，尤其在印刷品中效果非常明顯。這里的研究文章引用的是這里，懂英語的朋友應該能理解：https://www.fonts.com

相反的非襯線字體有著簡單的風格，在網上或者銀幕上表現效果都很好，能讓畫面感覺變得更清晰。

05. 要有對比意識

另一個使用襯線體和非襯線體組合在一起的理由是，具有對比性。這種對比有很多關聯性包含在里面，我們需要仔細考慮這之中的字體的層次感，相互之間的互補性等等。

對比，可以通過字體的種類，大小，字體，文字間距，顏色等各種各樣的方式來實現。下面這個樣本案例，就是利用了粗體字與細體字相互組合而成的。這兩種幾乎180度大轉變的風格，卻很好的組合在了一起。

因為每個字體都是不同的（英: Difference），所以各種字體都有著各種各樣的意義。另外，大膽的使用了粉紅色，讓他比標題還要大兩倍的字號，也不能錯過，他很好的將非常細的字給強調了。

06. 避免字體沖突

在組合字體的時候，對比（英: Contrast）是非常重要的，同時也要避免它們相互沖突（英: Conflict）。不同的字體并不意味著他們可以很好匹配組合。一般來說，幾個風格相似的字體，相同的比例，小字的高度（通常被稱為x-height）非常的統一等都是值得注意的地方。這樣就算他們的外觀不同，設計從整體來說都是非常統一的。

來看看下面這組字體組合吧。因為是襯線體和非襯線體，所以風格上是非常不同的。上面的字體非常圓潤，字間距的設定都留有余地，而下面的字體偏細長，風格更加擁擠，我們可以看到對比非常的大。像頭發一樣細的襯線體與非常細的非襯線體，在強調他們的對比時應當更加注意。

07. 避免使用相似的字體進行組合

這在第五條介紹對比時也提到了，太過相似的字體組合也會成為問題。因為沒有太大的區別，所以在制造層次感的時候就成了第一個問題。還有字體與字體之間的差異性，選擇它的目的，以及他看起來就像是選錯了的。

但是，也沒有必要選擇完全不一樣的字體。比較字體的重量，外形是非常重要的，字體過于相似，特別是使用相同尺寸的時候，會讓用戶混亂，讓整體內容都變得模糊。

選擇兩種字體并列，然后讓我們一點點慢慢的進行分析。如果字體的外觀上基本相同，由于選擇的字體種類有著非常好的對比，這也是設計的很好的一個預兆。

08.使用同一個系列的字體

使用同一個系列的字體，一直都是一個非常穩妥的辦法。我們可以在一個系列中找到各種各樣的字體（不同的重量，樣式，大小文字等），來充分的表達我們的設計項目。

相同系列的字體進行組合，利用不同的大小，樣式，重量（Light、Regular、Bold等），注意表現出他們的對比。

利用歐文斜體字或Extended版本等字體系列，可以給你的設計創造出無限的可能。

如果項目中規定只能使用一種字體，他的優點就是能讓設計變得更加有效率。縮短了去尋找能完美組合的字體的時間。

09. 限制你所使用的字體數量

一般一個項目所使用的字體數量是兩到三個，當然你也不必死守這這句話不放。如果你參加過雜志編輯工作，你也許能從中得到更多的經驗，其實并沒有什么硬性規定的。

例如，參考風格華麗的維多利亞風格，像這樣參考具有特色的設計風格時，你就更需要仔細推敲字體組合了。利用大量的字體，與設計相調和，得到的結果是平衡還是混亂，這是你需要注意的事項。

但是什么樣的設計要素，選擇什么樣的字體才是合適的，需要大量的設計項目來進行練習。選擇什么樣的字體，因為每個設計項目的不同，便會有不同的見解。如果你使用了大量的字體，而當別人一定要追根究底問你為什么使用這么多時，你完全可以不回答他。

10. 勤加練習

最后，我想這是一個好心的建議而不是規則。用你所知道的字體組合不斷的聯系吧。通過不斷地努力與錯誤，最終你會得到屬于你的創新能力。可能有完美的字體組合，但并沒有完美做出他們的公式。

無懼風險，相信自己，迎接更多的挑戰。或者你有與規則不同的見解，但自己的字體組合感覺又不是很好，想想究竟是哪里錯了，從失敗中獲得經驗是非常有必要的。這次介紹的只是一些排版的基礎，也希望你們能有更好的作品設計出來。一起來感受設計的樂趣吧~

歡迎關注我的微博：@喪心病狂十六夜貓

微信公眾號：

【技多不壓身的設計師才有高薪資！】

1. 平面設計：《超贊！設計師完全自學指南》
2. 交互設計：《交互設計師修煉指南！教你從零開始成為優秀交互設計師》
3. UI設計：《超實用新手指南！零基礎如何自學UI設計？》
4. 前端開發：《天貓高手來教你！零基礎如何系統地學習前端開發？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎知識學起來！為設計師量身打造的DPI指南》
8. 交互設計自學路徑圖：《零基礎入門！給非科班生的自學路徑圖之交互設計篇》

原文地址：photoshopvip

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量150萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com