‍‍

今天這篇文章對(duì)一部分人來說可能比較基礎(chǔ)，介紹的內(nèi)容也非常多，篇幅也非常長(zhǎng)。因?yàn)槲遗麓蠹覍?duì)字體不是很感興趣，所以我就把各種知識(shí)點(diǎn)做了整理，然后以這樣的方式來輸出，好讓大家先對(duì)字體有個(gè)簡(jiǎn)單的了解。

這絕對(duì)是改變你對(duì)字體認(rèn)知的一篇文章，所以收藏絕對(duì)沒壞處。如果，你看完這篇文章突然就對(duì)字體感興趣了，請(qǐng)你也告訴我，我知道之后會(huì)對(duì)字體的某個(gè)知識(shí)點(diǎn)做深入解析，帶大家更好的學(xué)習(xí)字體。

沒看這篇文章之前，也許你覺得自己對(duì)字體已經(jīng)很了解了，但是請(qǐng)相信我，這僅僅是你以為的而已。（為什么我讀這句話的時(shí)候，感覺自己很牛逼，啥都懂似的…）

在平面設(shè)計(jì)中，字體的重要性毋庸置疑了，從海報(bào)到雜志，基本都要以字體做根基。然而，真正懂字體的人其實(shí)不多。

在最近兩年里，字體慢慢又被大家重視起來，因?yàn)樵?UI 設(shè)計(jì)中，字體的運(yùn)用也慢慢多了起來，雖然大家看到的 App 更多的是系統(tǒng)自帶的字體，但是『為什么iOS 會(huì)更換新字體』、『這類產(chǎn)品為什么要這樣對(duì)字體進(jìn)行排版』等等都是 UI 設(shè)計(jì)師應(yīng)該需要懂的。

那么這期我們就先從以下五個(gè)方面來講講字體：

   怎么開始入門字體

   文字的構(gòu)成

   你所理解的字體分類也許是錯(cuò)的

   中英文字間距的講究

   案例展示

01/

怎么開始入門字體    

看過我文章的人都知道，我是上個(gè)月開始學(xué)習(xí)文字（字體設(shè)計(jì)），我大概買了 14 本書（本來是 12 ，后面又買了 2 本關(guān)于文字進(jìn)化史的書籍）進(jìn)行閱讀及學(xué)習(xí)。

我比較喜歡以「塊狀時(shí)間」學(xué)習(xí)知識(shí)，然后建立自己的知識(shí)體系，再?gòu)睦碚摰綄?shí)踐（理論是閱讀書籍，實(shí)踐是字體設(shè)計(jì)練習(xí)）。不過我為了寫這篇文章，也看了目前市面上已有的一些字體相關(guān)文章，而且被各平臺(tái)轉(zhuǎn)發(fā)，且閱讀量很高，但其實(shí)很多知識(shí)點(diǎn)在認(rèn)知上是有錯(cuò)誤的，也許已經(jīng)誤導(dǎo)了不少人。所以我一直推薦通過書籍來學(xué)習(xí)知識(shí)，文章只是了解概況，是別人總結(jié)的結(jié)果，所有學(xué)習(xí)動(dòng)作都要帶有質(zhì)疑的心態(tài)進(jìn)行判斷。（廢話有點(diǎn)多了）

首先，你要簡(jiǎn)單了解字體的歷史，從「哥特體」到「黑體」，最早的「羅馬體」到「宋體」，以及日文的「明朝體」。了解它們之間的關(guān)系，好比對(duì)待朋友一樣。

對(duì)理論知識(shí)有了一定了解之后，你就會(huì)知道：「宋體」是入門字體設(shè)計(jì)首要掌握的，你需要了解它的結(jié)構(gòu)、體飾，然后去 AI 里進(jìn)行臨摹，把字當(dāng)成一張圖來對(duì)待。

這樣進(jìn)行大概一周時(shí)間（我是一周，每天臨摹 5 個(gè)宋體字，要非常仔細(xì)），開始繼續(xù)去理解字體的其他知識(shí)（在這期間，臨摹字體是不能中斷的）。如字體排版、字重、字間距和行間距等等，然后再繼續(xù)練習(xí)，理論結(jié)合實(shí)踐，進(jìn)步就會(huì)非�？�。

02/

文字的構(gòu)成

學(xué)習(xí)文字的相關(guān)知識(shí)，必須先從文字的構(gòu)成開始。構(gòu)成文字的元素會(huì)因?yàn)槲淖值钠鹪床煌�而相差很大，這里尤其要把中文和英文拆開來說，因?yàn)楸旧硭鼈兙褪遣煌�的體系，只是現(xiàn)在很多并不專業(yè)的人，把它們混為一談了。

英文的字體結(jié)構(gòu)是由四條平行線組成。這四條（其實(shí)是五條，但是大寫字母線這里要忽略）平行線中，由下往上數(shù)的第二條是用來當(dāng)做標(biāo)準(zhǔn)的『基線』，西文中，單個(gè)字母的所有立腳點(diǎn)都是在這條線上（除了 g、j、p、y）。而根據(jù)不同的字體，平行線的位置也會(huì)發(fā)生改變，這也是為什么文字結(jié)構(gòu)會(huì)多種多樣的原因。

這里就要說到大家經(jīng)常聽到但是并不非常理解的一句話了：小寫字母的高度要以 「x 高」為重要標(biāo)準(zhǔn)。（給你們重點(diǎn)說說）

因?yàn)槠叫芯�是可以根據(jù)你想要設(shè)計(jì)的字體結(jié)構(gòu)做出改變的，所以 「x 高」就代表了中間兩根線的位置。當(dāng)「x 高」大的時(shí)候，就會(huì)感覺小寫字母比較大，因?yàn)椤竫 高」決定了幾乎所有小寫字母的高度（除了 b、h、y 等有頭有腳的字母）。所以在設(shè)計(jì)英文字體時(shí)，要非常注意每個(gè)小寫字母的高度，這也是為什么大部分優(yōu)秀的字體設(shè)計(jì)師，設(shè)計(jì)其他作品時(shí)，會(huì)更注重細(xì)節(jié)的原因，因?yàn)樗麄?a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)字體就純講究細(xì)節(jié)。（不是說其他設(shè)計(jì)職業(yè)不注重細(xì)節(jié)，只是沒字體這么講究）

舉個(gè)例子：字母 「C」和「O」

C 和 O 這種字母中間的空間被稱為「字腔」，「字腔」較寬就會(huì)給人輕松、自由的感覺；「字腔」窄，就會(huì)顯得很密集、具有力量的感覺。

之前看到有人說英文字母，放的越大，間距就必須越小，否則識(shí)別性就很低，這絕對(duì)是錯(cuò)誤的觀點(diǎn)。

下面再看中文字體的套路。

做 UI 的都設(shè)計(jì)過 Icon 吧？設(shè)計(jì)中文字體就跟設(shè)計(jì) Icon 是一個(gè)道理。同樣有一個(gè)虛擬框，在框里的字體大小，被稱為「字面尺寸」，它也是根據(jù)不同的字體結(jié)構(gòu)而改變的。

中文的字體結(jié)構(gòu)被稱之為「骨架」，它決定了這個(gè)字體的整體形象。圖片中標(biāo)明的一處被稱之為「胸線」的位置，它也很重要，「胸線」小的字體更具復(fù)古風(fēng)，更能表達(dá)傳統(tǒng)的韻味；相反，「胸線」大的字體會(huì)更具現(xiàn)代感。這也是為什么有些中國(guó)風(fēng)的作品中，字體看起來會(huì)特別不一樣的原因，我們會(huì)選擇字體「胸線」小的文字，去表達(dá)傳統(tǒng)風(fēng)。

你所理解的字體分類也許是錯(cuò)的

我們經(jīng)常會(huì)聽到別人說：襯線體、無襯線體。沒錯(cuò)，英文字體確實(shí)有分襯線體（如 Atheias）和無襯線體（如 Helvetica），以及其他字體（如 哥特體）。

有人問：宋體和黑體呢？

前幾天我還正好在一個(gè)群里看到有人給另一個(gè)人解答什么是襯線體，什么是無襯線體，他說：像宋體，勾勒明顯的就是襯線體；黑體，筆畫比較平的就是無襯線體。這是一個(gè)認(rèn)知上的錯(cuò)誤。

中西方的字體是不能一概而論的，宋體跟襯線體相似，不代表宋體等于襯線體，這個(gè)認(rèn)知要糾正一下。（看完這段是不是要爆炸？原來一直都理解錯(cuò)了？）

先說英文：歷史上最早的襯線體叫「羅馬體」，在紙質(zhì)印刷中，襯線體經(jīng)常被使用在正文以及標(biāo)題，它被分為兩類：舊體、現(xiàn)代體。

舊體的特點(diǎn)是類似手寫體，比較沒有規(guī)則，給人傳統(tǒng)的感覺；現(xiàn)代體比例較工整。襯線現(xiàn)代體適用于標(biāo)題，襯線舊體適用于文章內(nèi)容。

如果要繼續(xù)細(xì)分，襯線體還可以被分為三種類型：支架型襯線體、發(fā)絲型襯線體、板狀襯線體；而我們今天看到的大部分襯線體都是板狀襯線體，同時(shí)也是舊體的一種。

無襯線體稍簡(jiǎn)單一點(diǎn)，主要分為：古典體、現(xiàn)代體、溫暖體（這個(gè)溫暖體我一直沒找到合適的字眼來表示）。與襯線體不同的是，我們現(xiàn)在看到更多的是現(xiàn)代無襯線體。

具體怎么分類我就不展開說了，展開說的話篇幅會(huì)更長(zhǎng)，沒興趣的人可能就不往下看了，有興趣的人自己自然會(huì)去查資料。

再說中文：中文主要也分三類：宋體、黑體、其他（包括楷書、行書）。

其實(shí)上面有一段我說中文字體的時(shí)候已經(jīng)說了很多了，所以這里就不展開繼續(xù)了，只說兩個(gè)點(diǎn)：印刷方面我們更多的會(huì)用到宋體做正文內(nèi)容的字體，而 UI 設(shè)計(jì)中，黑體或無襯線體會(huì)更讓眼睛舒適（這是最近翻閱國(guó)外文章時(shí)看到的最新研究）。

中英文字間距的簡(jiǎn)單說明

舉個(gè)例子：「我在馬路邊，撿到 one 塊錢」；「我在馬路邊，撿到one塊錢」

這句話大家應(yīng)該注意到，第一句，我把「到」和「塊」中間的「one」做了個(gè)空格處理。所以看起來會(huì)更舒服，相比于第二句，顯得更輕松，自由的感覺。這也是為什么我寫文一直以來都做這樣處理的原因。

我覺得很多人寫文章或文檔，都沒做到這點(diǎn)，只能說做事情不是很仔細(xì)，沒有認(rèn)真考量這些細(xì)節(jié)，同時(shí)也說明做事情的態(tài)度…（好了，我就不裝*了）

比如我公眾號(hào)的文章，我會(huì)在兩邊留一個(gè)間距，讓讀者更好的集中視覺焦點(diǎn)，不會(huì)逃離手機(jī)屏幕的邊緣。我大概去年中旬開始這樣做之后就一直被模仿，也正說明了它確實(shí)是有效果的。

希望大家平時(shí)做排版的時(shí)候，一定要注意中英文字間距的問題，以及段落邊緣的處理。這些細(xì)節(jié)，能讓你的作品看起來更加精致。

案例分析

學(xué)習(xí)字體設(shè)計(jì)大概三周時(shí)間，我有幸接到一個(gè)小項(xiàng)目：給一家日式料理店設(shè)計(jì)一個(gè)字體 logo。

一刀日式料理，杭州一家剛開的日式料理店，店鋪風(fēng)格走得是新日式風(fēng)，帶一些傳統(tǒng)元素。在與委托人聊完后，得到幾個(gè)關(guān)鍵詞：日式、素雅、簡(jiǎn)約。 以此設(shè)計(jì)店鋪?zhàn)煮w logo：一刀。

一開始毫無頭緒，于是找了日式料理的歷史翻閱了下，發(fā)現(xiàn)有很多人對(duì)日式料理的店鋪?zhàn)煮w logo 有一個(gè)錯(cuò)誤的了解，即：用「勘亭流」做基礎(chǔ)來設(shè)計(jì)。而這類字體大部分是用在日本相撲與歌舞伎町專門的宣傳上的。

在了解了一個(gè)大概情況后，我有了一點(diǎn)點(diǎn)的思路。就先動(dòng)手找了找感覺，可惜并沒找到新的形式。

但是讓我想到了字體組合的形式，之后就在思考兩個(gè)字的組合是否可以有比較簡(jiǎn)單的方式，且能夠清晰明了的看出品牌名稱。于是找了古文的宋刻本找案例，看看古文體是否有值得借鑒的。

在翻閱資料的過程中，看到一本小塚明朝的字體，于是以它與古文體的「宋 · 米芾 · 離騷經(jīng)」做了一個(gè)簡(jiǎn)單結(jié)合，畫出了下面這個(gè)「刀」。

開始看著這個(gè)刀字，覺得風(fēng)格太過老式，不符合新日式的調(diào)子，所以還是想做一個(gè)更改。

在做了多次更改之后，還是覺得差點(diǎn)感覺，正好翻看到左佐設(shè)計(jì)的“百年映像”，覺得這個(gè)橫筆的細(xì)體可以沿用，所以也試了一下。這里的「刀」字都是初設(shè)，細(xì)節(jié)都沒有調(diào)整。

其實(shí)到這里，對(duì)這塊還不是很滿意，左邊的刀有雅，但是不夠素。而右邊的刀太韌，從食品角度而言少了些許引誘性。

根據(jù)得到的這兩個(gè)字，再次上手稿去找感覺，無意中畫出一稿接近我理想中的樣子。正好我將刀的橫筆做了個(gè)簡(jiǎn)化，利用格式塔原理讓觀者產(chǎn)生共鳴。也正好結(jié)合了「一」和「刀」這兩個(gè)字。最后加上委托人給我的印花，搭配字體。

然后我結(jié)合了日本料理的店鋪招牌設(shè)計(jì)，找了一張這種花式肌理的圖片作為背景，完成了這次委托任務(wù)。

下面是定稿圖。

總結(jié)

我從理論出發(fā)，再到實(shí)戰(zhàn)，一共花了三周時(shí)間（目前還在每天學(xué)習(xí)，暫定三個(gè)月）。

說實(shí)話，雖然我目前的作品跟那些字體大師沒法比，但也算是我入門了字體這一塊，我學(xué)這些不是說我要做一個(gè)純字體設(shè)計(jì)師，而是理解更多關(guān)于字體的知識(shí)，運(yùn)用到 UI 工作中，因?yàn)槲抑�道�?a href=http://dekaron.com.cn/ target=_blank class=infotextkey>設(shè)計(jì)是相通的。

當(dāng)你處于某個(gè)瓶頸期時(shí)，可以試圖踏足其他領(lǐng)域去提高各個(gè)方面的能力，也許你突然就通了。

好比我在學(xué)習(xí)字體的過程中，了解到很多字體設(shè)計(jì)的流程，發(fā)現(xiàn)它跟交互設(shè)計(jì)工作有很多的相似點(diǎn)。所以每當(dāng)我聽到別人說看書都是虛的、沒實(shí)質(zhì)性的用處的時(shí)候，表面上我不做什么評(píng)價(jià)，但其實(shí)我心里極其排斥這種人。

Anyway，好的知識(shí)都在書里，學(xué)不學(xué)就看你自己了。‍‍