每當(dāng)我和別人問(wèn)起他們覺(jué)得字體排印中最難的是什么的時(shí)候，一個(gè)經(jīng)常聽(tīng)到的回答就是字體的搭配。 我們總是想要使用多種字體來(lái)讓我們的設(shè)計(jì)更加生動(dòng)有趣，但我們中的大多數(shù)人其實(shí)并不清楚該選擇哪些字體來(lái)搭配。不同字體該如何搭配，更像是一個(gè)秘訣。你一旦知曉，就可以創(chuàng)造出漂亮的字體組合。

我們一般是怎樣做的

我們一般通過(guò)在下列三個(gè)維度營(yíng)造對(duì)比，以試作標(biāo)題與正文的區(qū)分。

字重（Fontweights）： 標(biāo)題字體更粗，或者更細(xì)。

顏色： 為標(biāo)題字體選擇一種與眾不同的顏色。

改變字重、字號(hào)和文字顏色可以制造對(duì)比并營(yíng)造層次感，但其實(shí)我們還可以通過(guò)在其他的方面再玩點(diǎn)花樣來(lái)制造對(duì)比（如果我們有不只一種字體可供選擇的話）。而且，這些把戲相當(dāng)有趣。

更多的可能性

不同的字體和不同的版式設(shè)置為創(chuàng)造對(duì)比提供了更多的可能性。字重、字號(hào)和字體顏色之外，我們?cè)賮?lái)看看字體比例、字型、大小寫(xiě)和字距。

字體比例

字體的寬度或比例各有不同。有些狹長(zhǎng)而擁擠。有些很規(guī)則，在標(biāo)準(zhǔn)范圍之內(nèi)。還有一些粗重而扁闊。下表總結(jié)了一些 web 字體應(yīng)用中的常用比例。

按照比例對(duì) web 常用字體進(jìn)行分類。

對(duì)于設(shè)計(jì)師來(lái)說(shuō)，我們可以通過(guò)字體的寬度來(lái)將它們區(qū)分開(kāi)。比方說(shuō)，我們可以在標(biāo)題中使用 Open Sans Condensed Bold 而在正文中使用 Open Sans Regular ； 在標(biāo)題中使用Montserrat ，在正文中使用 Source Sans Pro ； 在標(biāo)題中使用長(zhǎng)體的 Oswald，在正文中使用標(biāo)準(zhǔn)的 serif 或者 sans serif ……

、

用字體的不同比例來(lái)搭配，形成對(duì)比。

注意，太長(zhǎng)或是太扁的字體的可讀性相較標(biāo)準(zhǔn)字形來(lái)的差一些，所以正文部分還是保守一點(diǎn)比較好。

字型（Letterforms）

字型即字體的形狀。我們對(duì)字型比較熟悉，畢竟總得靠它來(lái)區(qū)分不同的字體。襯線（serif）和無(wú)襯線（sans serif）是兩種很常見(jiàn)的字型。其他還有包括特?。╠isplay）， 書(shū)法（handwriting）， 手寫(xiě)（script）等等。

Google 字體中的不同類型。

為了營(yíng)造對(duì)比，我們挑選出字型不同的字體。還記得我們總會(huì)聽(tīng)到的超簡(jiǎn)單的原則嗎？就是選擇一種無(wú)襯線字體，在挑一種襯線字體來(lái)搭配它。這其實(shí)是利用字型之間的差異來(lái)營(yíng)造對(duì)比。我們也可以選擇一種手寫(xiě)（script）或者特?。╠isplay）字體作為標(biāo)題的字體，然后再選擇一種襯線（serif）或者是無(wú)襯線（sans serif）字體來(lái)作為正文字體。這有著無(wú)限的可能。

在網(wǎng)頁(yè)模板 Big Day 中， 我將書(shū)法字體 Dancing Script 與優(yōu)雅的無(wú)襯線字體 Fira Sans 組合，因?yàn)樗鼈冊(cè)谧帜附Y(jié)構(gòu)上的對(duì)比十分強(qiáng)烈。

兩種字體的字型特征越明顯，我們能營(yíng)造出的對(duì)比就越是強(qiáng)烈。相應(yīng)的，字體搭配的效果也會(huì)越好。同理，我們得盡量別要把字型相似的字體組合到一起。這就是為什么你在處理兩種不同的襯線字體或者無(wú)襯線字體的時(shí)候要格外小心。

將字型相似的兩種字體組合到一起營(yíng)造出的弱對(duì)比只會(huì)讓讀者感到困惑。這時(shí)候就不如只用一種字體來(lái)的好。

大小寫(xiě) (小寫(xiě)字母與大寫(xiě)字母)

大寫(xiě)字母由于字母等高而看上去像是一個(gè)個(gè)的方塊。小寫(xiě)字母則由于字母上下出頭不一而顯得輪廓起起伏伏。利用這點(diǎn)不同，我們可以搞一些對(duì)比的例子。

單詞大寫(xiě)與小寫(xiě)所形成的輪廓不同。

如果文檔標(biāo)題不長(zhǎng)，我們可以利用全大寫(xiě)來(lái)使它看上去和由小寫(xiě)字母組成的段落的區(qū)別更加明顯。（要是你的標(biāo)題很長(zhǎng)而且長(zhǎng)篇連句的話，你可能并不想讓它們?nèi)看髮?xiě)。畢竟可讀性略差。）

字距

字距，即字母間的距離，也可以用來(lái)營(yíng)造對(duì)比。它一般會(huì)搭配大寫(xiě)來(lái)用，因?yàn)榇髮?xiě)字母之間的間距可以讓詞句更容易閱讀，還會(huì)讓它們看起來(lái)有一種沉穩(wěn)而成熟的感覺(jué)。

額外的字母間距可以讓大寫(xiě)的單詞更容易閱讀，且看上去帶有一種沉穩(wěn)而成熟的感覺(jué)。

記著，盡量避免增加小寫(xiě)字母間的字距，因?yàn)檫@樣會(huì)破壞詞句的輪廓，從而使它們難以閱讀。 還有，正文不要增加多余的字距，以便與帶有更大字距的標(biāo)題文字形成對(duì)比。

增加對(duì)比

到此為止，我們總共談及了 7 種可以營(yíng)造對(duì)比的方法。總結(jié)一下：

字重／字號(hào)／文字顏色／字體比例／字型／字母大小寫(xiě)／字距

記著，對(duì)比越強(qiáng)烈，你的字體組合效果就越棒。為了得到更加強(qiáng)烈的對(duì)比，我們可以將上述幾點(diǎn)疊加使用。舉個(gè)例子，在我的博客主題 Jordan 中，我將 Oswald 和 Merriweather 進(jìn)行了組合。 我將 Oswald 用作標(biāo)題字體，將 Merriweather 用作正文字體。 Oswald 是一種長(zhǎng)而瘦的字體。我同時(shí)使用了字母全大寫(xiě)和增加字距。這樣一來(lái)，我在字號(hào)、文字顏色、字體比例、字型、字母大小寫(xiě)和字距上都作出了一些區(qū)別。強(qiáng)烈的對(duì)比，美妙的組合。

我在博客主題 Jordan 中使用的 Oswald 和 Merriweather 的組合。在字號(hào)、文字顏色、字體比例、字型、字母大小寫(xiě)和字距上都有所不同，因而對(duì)比效果十分強(qiáng)烈。

根據(jù)這個(gè)準(zhǔn)則，我們可以很容易的弄出一些很棒的或者是不怎么樣的字體組合。在你瀏覽下面每一組字體組合的時(shí)候，利用我們剛剛談及的 7 個(gè)維度來(lái)思考一下為什么它們很棒或是有點(diǎn)糟糕。

成功的組合

不那么成功的組合

結(jié)語(yǔ)

字體組合是字體排印中的一個(gè)重要組成部分。我希望通過(guò)閱讀本文，可以讓你了解到對(duì)比即是成功的字體組合的評(píng)價(jià)標(biāo)準(zhǔn)，以及如何更為有效的將字體進(jìn)行組合。祝在字體組合這上頭玩得開(kāi)心！

轉(zhuǎn)載來(lái)自：掘金

本文地址：http://www.www.czaxmy.cn/html/blogs/view-48.html

關(guān)于nicedesign奈思設(shè)計(jì)

nicedesign奈思設(shè)計(jì)是領(lǐng)先的用戶體驗(yàn)設(shè)計(jì)與互聯(lián)網(wǎng)品牌建設(shè)公司,為眾多企業(yè)創(chuàng)造了專業(yè)與創(chuàng)新的設(shè)計(jì)解決方案,提供交互設(shè)計(jì)、UI界面設(shè)計(jì)、網(wǎng)站設(shè)計(jì)開(kāi)發(fā)、網(wǎng)站建設(shè)、移動(dòng)界面設(shè)計(jì)、軟件界面設(shè)計(jì)、互聯(lián)網(wǎng)品牌建設(shè)和用戶體驗(yàn)咨詢服務(wù)。

查看精選案例  | nicedesign服務(wù)體系   | 了解nicedesign動(dòng)態(tài)