作為一名設(shè)計(jì)師，你需要學(xué)到的最重要的技能之一就是如何選擇字體。這是因?yàn)槲淖謨?nèi)容是設(shè)計(jì)師與用戶溝通的主要方式之一，版式可以決定設(shè)計(jì)的成敗。

排版工作兼具美感和復(fù)雜性，有些人把自己整個(gè)職業(yè)生涯都獻(xiàn)給了字體設(shè)計(jì)。幸運(yùn)的是，他們的工作都以文檔的形式，很好的記錄了來(lái)，讓我們?cè)谠O(shè)計(jì)時(shí)，有大量的資源可以學(xué)習(xí)。

本文旨在幫助你學(xué)習(xí)如何選擇正確的字體類型。同時(shí)，也鼓勵(lì)大家去探索那些你自己熟悉的字體組合。

一、確定目標(biāo)

在做任何事情之前，首先都需要確定設(shè)計(jì)的目標(biāo)。你想傳達(dá)的信息是什么？你設(shè)計(jì)的媒介又是什么？

好的設(shè)計(jì)，會(huì)利用好版式并與目標(biāo)達(dá)成一致。這是因?yàn)榘媸皆谀愕脑O(shè)計(jì)中是表達(dá)情緒、基調(diào)和風(fēng)格的關(guān)鍵。

例如：如果你設(shè)計(jì)的賀卡是走很重的插畫風(fēng)，那么選擇一款合適的插畫風(fēng)格字體就很關(guān)鍵。合適的字體風(fēng)格要與整體的設(shè)計(jì)調(diào)性保持一致。

選擇合適的插圖風(fēng)格字體

如果你正在設(shè)計(jì)一個(gè)以圖片為核心的登陸頁(yè)面，選擇一個(gè)不喧賓奪主的簡(jiǎn)單字體就很關(guān)鍵。使用字體作為一種來(lái)強(qiáng)化信息傳達(dá)的方式。

如果圖片是設(shè)計(jì)的重點(diǎn)，那么選擇簡(jiǎn)單的字體，圖片就會(huì)更加突出。

二、確定受眾

在確定設(shè)計(jì)目標(biāo)之后，接著需要確定目標(biāo)用戶。這一步很關(guān)鍵，因?yàn)橛嘘P(guān)用戶的信息，如：年齡、興趣和文化素養(yǎng)，會(huì)直接影響到字體的選擇。

例如：有些字體更適合給兒童設(shè)計(jì)時(shí)使用。在閱讀時(shí)，孩子們需要字跡清晰，字型大方的字體。Sassoon Primary就是一個(gè)不錯(cuò)的例子，Sassoon Primary是由Rosemary Sassoon開發(fā)的，正是基于她對(duì)兒童容易閱讀字體的研究。

Rosemary Sassoon開發(fā)了Sassoon Primary字體

有些字體更適合老人，Senior-friendly字體有更加易讀的尺寸，對(duì)比度也足夠高，同時(shí)也避免了復(fù)雜的裝飾性筆跡。

在選擇字體時(shí)，要考慮到你的讀者和他們的需求。簡(jiǎn)單來(lái)說(shuō)，需要與你的用戶共情。

三、尋找靈感

多看看其他設(shè)計(jì)師的優(yōu)秀作品，試著去理解他們是如何選擇字體的。

字體靈感

對(duì)于字體設(shè)計(jì)的靈感，CreativeBloq的《75種最好的免費(fèi)字體》就是一篇非常棒的文章，可以讓你正確地選擇字體。在那篇文章中，CreativeBloq解釋了每種字體背后的玄機(jī)。

另一個(gè)有用的資源是Awwwards在2015年發(fā)布的《100個(gè)最全的免費(fèi)字體合集》。Invision 也編制了一個(gè)版式字體合集，你也可以在那里找到很多靈感資源。

Typ.io 收錄了大量已上線的字體案例資源(http://typ.io/)

想從實(shí)際線上網(wǎng)站獲得靈感，type.io這個(gè)網(wǎng)站會(huì)非常適合。這個(gè)網(wǎng)站從網(wǎng)上收集到了大量的字體設(shè)計(jì)案例，另外，網(wǎng)站中還在每個(gè)案例底部提供了css的字體樣式。

除了尋找專門的字體網(wǎng)站，也可以去查看你最喜歡的網(wǎng)站，看看他們是如何使用好字體的?！癢hatTheFont”是一個(gè)很好的工具，它是一個(gè)Chrome擴(kuò)展插件，只需要懸停在網(wǎng)頁(yè)中你希望了解的字體上，就能準(zhǔn)確知道它的字體屬性了。

（譯者注：親自試驗(yàn)了，能很方便的查字體了，有個(gè)地方要注意的是，必須等網(wǎng)站加載完成了，點(diǎn)擊那個(gè)插件圖標(biāo)才有效果哦。）

搭配靈感

除了單個(gè)字體，還要看看字體搭配的靈感。合適的字體組合和字體本身一樣重要，良好的字體組合有助于建立視覺(jué)層級(jí)，提高設(shè)計(jì)的可讀性。

字體組合和字體本身一樣重要

要獲得靈感，可以從Typewolf（https://www.typewolf.com/）開始。Typewolf收錄了大量來(lái)自不同網(wǎng)站的字體組合靈感。除此之外，他們還有字體推薦和高級(jí)排版指導(dǎo)，簡(jiǎn)直就是版式創(chuàng)作者們的寶庫(kù)。

FontPair (http://fontpair.co/）還專門為谷歌字體設(shè)計(jì)了字體搭配靈感。你可以按字體類型組合進(jìn)行排序，例如：無(wú)襯線字體和襯線字體或者襯線字體和襯線字體。

最后，在網(wǎng)上可以找到大量由設(shè)計(jì)師設(shè)計(jì)的字體組合。例如：《 Typography: Google Fonts Combinations 》和《Typography: Google Fonts Combinations – Volume 2》，只需要在Dribbble和Behance上搜索“font pairing”即可找到。

四、選擇字體

有了前面的研究和靈感，你就可以選擇自己喜歡的字體了。在選擇字體時(shí)，有三個(gè)原則需要記?。?strong>可讀性、易讀性和目標(biāo)。

在選擇字體之前，先研究一下產(chǎn)品目標(biāo)

選擇常規(guī)且易于閱讀的字體，要盡量避免一些裝飾性的字體。同時(shí)，還要注意到字體的用途。比如：一些字體更適合作為標(biāo)題而不是正文。

因此，在選擇字體之前，先研究一下它的預(yù)期使用目標(biāo)。

搭配對(duì)比更大的字體

在字體組合方面，保持簡(jiǎn)單原則，在一個(gè)頁(yè)面中最多使用三種不同的字體。此外，字體的組合需要有明確的對(duì)比，這樣會(huì)有助于引導(dǎo)讀者的眼睛，首先應(yīng)該是標(biāo)題然后才是正文。同時(shí)，你還可以使用不同的字體大小，顏色和字重來(lái)完善視覺(jué)對(duì)比。

對(duì)于web字體來(lái)說(shuō)，你可以去使用谷歌字體、Typekit和Font Squirrel。谷歌字體是免費(fèi)的，而Typekit和Font Squirrel提供了免費(fèi)和付費(fèi)的字體。

五、確定字體大小

確定字體組合后的下一步是確定字體大小。這方面有一個(gè)很好的工具，是由Adobe版式主管Tim Brown設(shè)計(jì)的模塊化縮放工具。模塊化比例是一種用來(lái)識(shí)別過(guò)往令人滿意的搭配比例，以確定字體大小組合的系統(tǒng)。

模塊化比例是一個(gè)系統(tǒng)，用來(lái)識(shí)別歷史上令人滿意的比例，以創(chuàng)建規(guī)范來(lái)確定字體大?。╤ttps://www.modularscale.com/）。比如：你可以使用基于黃金分割的比例。

以下就是按比例算的前5個(gè)字體大?。?/p>

Golden Ratio (1:1.618)1.000 x 1.618 = 1.6181.618 x 1.618 = 2.6182.618 x 1.618 = 4.2364.236 x 1.618 = 6.8546.854 x 1.618 = 11.089

到后面，你可能會(huì)遇到一個(gè)問(wèn)題就是基于黃金分割的比例有點(diǎn)太大了。

Golden Ratio (1:1.618)…11.089 x 1.618 = 17.94217.942 x 1.618 = 29.0329.030 x 1.618 = 46.97146.971 x 1.618 = 75.99975.999 x 1.618 = 122.966

如你所見，數(shù)字之間的間隔變得太大了。對(duì)于大多數(shù)的界面來(lái)說(shuō)，需要更小的間隔。值得慶幸的是，模塊化比例有多種基于幾何，自然和音樂(lè)的比例。

Minor Second 15:16 Major Second 8:9Minor Third 5:6Major Third 4:5…

因此，如果不能使用黃金分割比例，也可以使用一個(gè)間隔更小的比例，比如：完美的“第四比例”。

Perfect Fourth (3:4)…9.969 x 1.333 = 13.28813.288 x 1.333 = 17.71317.713 x 1.333 = 23.61223.612 x 1.333 = 31.47531.475 x 1.333 = 41.95641.956 x 1.333 = 55.927

一旦確定了比例，就可以從列表中選擇字體大小，四舍五入到最近的整數(shù)大小。

Font SizesHeader 1: 55pxHeader 2: 42pxHeader 3: 31pxHeader 4: 24pxHeader 5: 14pxBody: 17pxCaption: 14px

模塊化比例的方式是利用了數(shù)學(xué)知識(shí)來(lái)精確生成字體大小。然后，這只能是作為一個(gè)參考，用這個(gè)方法作為起點(diǎn)，最終還是需要以你的眼睛來(lái)做適當(dāng)?shù)恼{(diào)整。

六、創(chuàng)建一套字體規(guī)范

最后一步是為版式創(chuàng)建一套字體規(guī)范，用來(lái)對(duì)整體設(shè)計(jì)進(jìn)行標(biāo)準(zhǔn)化。

在sketch中設(shè)置字體共享樣式

在像sketch這樣的軟件中，可以創(chuàng)建共享樣式文本用來(lái)快速標(biāo)準(zhǔn)化的使用字體。在這個(gè)過(guò)程中，你還可以調(diào)整和確定文本的屬性，比如顏色，字重和大小。在選擇字體顏色時(shí)，需要記住一句話：字體顏色與標(biāo)準(zhǔn)色需要協(xié)調(diào)一致。

使用規(guī)范來(lái)保證設(shè)計(jì)的一致性

在設(shè)計(jì)規(guī)范中，確保至少要包括以下幾個(gè)內(nèi)容：字體定義、字體大小、字體顏色和示例用法。

谷歌的字體規(guī)范（https://material.io/guidelines/style/typography.html）是一個(gè)很好的例子。

其他的一些優(yōu)秀案例包括 ：

• Mailchimp
• Apple
• Focus Labs

版式設(shè)計(jì)是需要親自實(shí)踐才能很好掌握的，它是一門科學(xué)，也是一門藝術(shù)。

我期待你去打破你的舒適區(qū)，去探索屬于你自己的字體設(shè)計(jì)經(jīng)驗(yàn)。

作者：Jonathan Z. White

原文：https://medium.freecodecamp.org/typography-can-make-your-design-or-break-it-7be710aadcfe

譯者：彩云Sky，公眾號(hào)：彩云譯設(shè)計(jì)

本文由 @彩云Sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖作者提供