前言
不知道大家平時(shí)是如何給應(yīng)用選擇字體的呢？作者菌作為一個(gè)設(shè)計(jì)小白，每到挑選字體的時(shí)候都會(huì)非常苦惱，托Google Fonts 的福，作者菌算是把工作中遇到的界面設(shè)計(jì)應(yīng)付過(guò)去了，但俗話(huà)說(shuō)的好，不想當(dāng)設(shè)計(jì)師的前端不是好產(chǎn)品。這不，作者菌恰好在書(shū)里發(fā)現(xiàn)了關(guān)于字體挑選的章節(jié)，于是趁著機(jī)會(huì)做了點(diǎn)微小的工作，把經(jīng)驗(yàn)分享給大家。
認(rèn)識(shí)常見(jiàn)的字體分類(lèi)(Typefaces Categories)
說(shuō)到字體分類(lèi)嘛，那可真是千奇百怪五花八門(mén)，但歸結(jié)起來(lái)，在互聯(lián)網(wǎng)產(chǎn)品開(kāi)發(fā)過(guò)程中我們通常會(huì)關(guān)注以下六組字型：
接下來(lái)我們就詳細(xì)講講其中的奧秘。
Oldstyle
想象一下，你手中握著一支楔形筆尖的鋼筆，工工整整地寫(xiě)下自己名字的場(chǎng)景，對(duì)，這就是我們說(shuō)的 Oldstyle 體。
Oldstyle 體總是帶有襯線(xiàn)(Serif)的，你可以觀察它們的收筆之處，是不是看到溝溝角角了呢？對(duì)，那就是襯線(xiàn)，想必有經(jīng)驗(yàn)的各位已經(jīng)很熟悉了，這里就不多做贅述。Oldstyle的另外一大特點(diǎn)，就是其規(guī)整的持筆角度。注意觀察它們的小寫(xiě)形態(tài)，是不是發(fā)現(xiàn)字母收尾處襯線(xiàn)的偏斜角一模一樣呢？這是因?yàn)樵谑褂肙ldstyle體時(shí)，筆尖相對(duì)于紙面的角度是固定的，因此細(xì)心的讀者可能已經(jīng)發(fā)現(xiàn)了，筆畫(huà)之間有明顯的粗細(xì)轉(zhuǎn)換，而其中對(duì)角線(xiàn)處的筆畫(huà)尤為纖細(xì)。
常見(jiàn)的Oldstyle 字體有：Goudy, Palatino, Times, Baskerville, Garamond等，它們太過(guò)常見(jiàn)，以至于讀者很難將其中的某一個(gè)同其他區(qū)分開(kāi)來(lái)，當(dāng)然，這也是較為穩(wěn)妥的字型選擇，適用于企業(yè)官網(wǎng)，報(bào)告文書(shū)等等。
Modern
Oldstyle 體模擬了人類(lèi)的筆觸行為，但隨著歷史的車(chē)輪隆隆推進(jìn)，字體的結(jié)構(gòu)也逐漸改變，這時(shí)候，Modern體作為一顆耀眼的新星，被欽點(diǎn)為了機(jī)器最常用的印刷字體。
Modern 同樣帶有襯線(xiàn)，唯一差別在于，這些襯線(xiàn)都呈水平鋪開(kāi)，而非像筆尖寫(xiě)字似的稍稍?xún)A斜，讓Modern 體不自覺(jué)中擁有了一種冷淡的，優(yōu)雅的造型。同時(shí)，由此帶來(lái)的粗細(xì)筆觸間的急劇轉(zhuǎn)換，也令Modern 變得不太適用于文案主體——細(xì)的部分幾乎消失，肉眼難以察覺(jué)，而粗的部分卻又太過(guò)顯眼。
你的電腦上或許已經(jīng)安裝了許多Modern字體，如Didot, Onyx and Times Bold等等，這里附上幾種作者菌認(rèn)為比較好的Modern字體，供大家參考。
-
Bedini
image.png -
Edition Regular
image.png -
Rundfunk
image.png -
Dubiel
image.png -
Orgreave
image.png -
Bodoni
image.png -
Latin Modern Roman
image.png
Slab Serif
隨著工業(yè)革命的出現(xiàn)，廣告商開(kāi)始使用加細(xì) Modern 體印制文案，然而帶來(lái)的問(wèn)題是，一旦用戶(hù)站在一定距離之外，他們所能看見(jiàn)的便只剩下了豎線(xiàn)——就如同一道道呆立著的籬笆墻。這時(shí)候，Slab Serif 作為另一種解決方案被廣泛應(yīng)用到了工業(yè)之中，它還有一個(gè)別名叫做 Egyptian，因?yàn)檫@類(lèi)字體流行的周期恰好與埃及狂熱在西方文明中盛行的時(shí)間重疊，這也是為什么許多Slab Serif字體均以埃及文字命名的原因。
Slab serif 區(qū)別于前兩種字體，它的筆畫(huà)粗細(xì)是相當(dāng)均勻的，并且適用于多種應(yīng)用場(chǎng)合，以下是作者菌在網(wǎng)上搜集的Slab Serif字體:
-
Sentinel
image.png -
Adelle
image.png -
Archer
image.png -
Bodoni Egyptian
image.png -
Foro
image.png
Sans Serif
無(wú)襯線(xiàn)體是一種成熟于二十世紀(jì)中葉的字體，移除襯線(xiàn)并保持筆畫(huà)粗細(xì)一致后，整體顯得更加美觀。值得注意的一點(diǎn)是，大多數(shù) Sans Serif 字體都是單字重的，少數(shù)會(huì)提供不同字重的變形，如果你的字庫(kù)里只有 Helvetica 或 Arial 的話(huà)，是時(shí)候認(rèn)真考慮下加入一個(gè) Sans Serif 家庭了。
然后是作者菌的優(yōu)選：
-
Futura
image.png -
Brandon Grotesque
image.png -
Gotham
image.png -
Circular
image.png
Script
Script 體囊括了一切模擬真實(shí)手寫(xiě)的——無(wú)論是用鋼筆、毛刷、油性筆、鉛筆或是美工筆——字體風(fēng)格。 對(duì)Script 體的使用很有講究，多一分則太繁，減之一分卻又過(guò)于單調(diào)。簡(jiǎn)而言之，我們應(yīng)盡可能地把 Script 用在刀刃上，比如對(duì)他人言論的引用、或是作為封皮的元素等等，切忌將其用在大段文字上，想象一下你看醫(yī)生寫(xiě)病歷時(shí)的感受吧，如果你不希望你的讀者像作者菌那樣一臉懵逼的話(huà)！
推薦時(shí)間:
-
Big Mom Font Duo
image.png -
Billaneiva typeface
image.png -
Emellie Script Font
image.png -
Heats
image.png
Decorative
Decorative 體的使用是一門(mén)很深的學(xué)問(wèn)，作者菌根據(jù)書(shū)里的內(nèi)容總結(jié)了一個(gè)簡(jiǎn)單的法則，那就是：出其不意，劍走偏鋒。
如果 Pious Henry 給你帶來(lái)一種不正式感，試著把它用在較為正式的場(chǎng)合，看看會(huì)發(fā)生些什么？
假如你認(rèn)為 Juniper 充滿(mǎn)了西部的狂野，試試把它用在企業(yè)或者花店里，畫(huà)面帶來(lái)的沖擊感一下子就不同了哦。
選擇最合適的字體
說(shuō)了這么多，讓我們回歸主題，如何為自己的產(chǎn)品挑選一款合適的字體呢？
在此之前，讓我們先問(wèn)幾個(gè)問(wèn)題：
-
這些字體將被應(yīng)用在什么場(chǎng)景？書(shū)本印刷？雜志？或是網(wǎng)頁(yè)內(nèi)容？
image.png -
你選擇的字體通用性強(qiáng)嗎？它們是否能較好地兼容其他字體呢？
image.png -
字體的尺寸、空間，X-高度(小寫(xiě)字母的高度)合適嗎？
image.png
我們可以做一個(gè)簡(jiǎn)單的 I/l/1 測(cè)試:
試著打出大寫(xiě)字母I，小寫(xiě)字母L和數(shù)字１，如果它們中的兩個(gè)或多個(gè)過(guò)于相近，則你的讀者很可能也會(huì)在閱讀中遭遇同樣問(wèn)題。
一般來(lái)說(shuō)，我們可以遵循這樣的步驟來(lái)挑選字體:
- 搜集那些擁有共同屬性的字體，特征上較為相似的字體往往能很好的契合到一起
- 搜集來(lái)自于同一名設(shè)計(jì)師的字體，字體設(shè)計(jì)師通常都有自己獨(dú)特的設(shè)計(jì)風(fēng)格以及美學(xué)偏好，這類(lèi)字體的兼容性也往往較好
- 為你的字體安排任務(wù)，明確每種字體的使用范圍及要達(dá)成的目的，為讀者營(yíng)造一個(gè)清晰的視覺(jué)層次
結(jié)語(yǔ)
好了，一口氣看了這么多，是不是感覺(jué)自己對(duì)字體設(shè)計(jì)的理解又增進(jìn)了一步呢？如果你的回答是“Yes”，那作者菌餓了一天的肚子也算沒(méi)白叫啦:-Ｄ，不說(shuō)了，回家開(kāi)飯～
Reference: https://designschool.canva.com/font-design/
