字體，究竟是怎麼一回事？（附案例）

今天這篇文章對一部分人來說可能比較基礎，介紹的內容也非常多，篇幅也非常長。因為我怕大家對字體不是很感興趣，所以我就把各種知識點做了整理，然後以這樣的方式來輸出，好讓大家先對字體有個簡單的了解。

這絕對是改變你對字體認知的一篇文章，所以收藏絕對沒壞處。如果，你看完這篇文章突然就對字體感興趣了，請你也告訴我，我知道之後會對字體的某個知識點做深入解析，帶大家更好的學習字體。

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

在平面設計中，字體的重要性毋庸置疑了，從海報到雜誌，基本都要以字體做根基。然而，真正懂字體的人其實不多。

在最近兩年里，字體慢慢又被大家重視起來，因為在 UI 設計中，字體的運用也慢慢多了起來，雖然大家看到的 App 更多的是系統自帶的字體，但是『為什麼 IOS 會更換新字體』、『這類產品為什麼要這樣對字體進行排版』等等都是 UI 設計師應該需要懂的。

那麼這期我們就先從以下五個方面來講講字體：1.怎麼開始入門字體2.文字的構成3.你所理解的字體分類也許是錯的4.中英文字間距的講究5.案例展示

怎麼開始入門字體

看過我文章的人都知道，我是上個月開始學習文字（字體設計），我大概買了 14 本書（本來是 12 ，後面又買了 2 本關於文字進化史的書籍）進行閱讀及學習。

我比較喜歡以「塊狀時間」學習知識，然後建立自己的知識體系，再從理論到實踐（理論是閱讀書籍，實踐是字體設計練習）。不過我為了寫這篇文章，也看了目前市面上已有的一些字體相關文章，而且被各平台轉發，且閱讀量很高，但其實很多知識點在認知上是有錯誤的，也許已經誤導了不少人。所以我一直推薦通過書籍來學習知識，文章只是了解概況，是別人總結的結果，所有學習動作都要帶有質疑的心態進行判斷。（廢話有點多了）

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

對理論知識有了一定了解之後，你就會知道：「宋體」是入門字體設計首要掌握的，你需要了解它的結構、體飾，然後去 AI 里進行臨摹，把字當成一張圖來對待。

這樣進行大概一周時間（我是一周，每天臨摹 5 個宋體字，要非常仔細），開始繼續去理解字體的其他知識（在這期間，臨摹字體是不能中斷的）。如字體排版、字重、字間距和行間距等等，然後再繼續練習，理論結合實踐，進步就會非常快。

文字的構成

學習文字的相關知識，必須先從文字的構成開始。構成文字的元素會因為文字的起源不同而相差很大，這裡尤其要把中文和英文拆開來說，因為本身它們就是不同的體系，只是現在很多並不專業的人，把它們混為一談了。

英文的字體結構是由四條平行線組成。這四條（其實是五條，但是大寫字母線這裡要忽略）平行線中，由下往上數的第二條是用來當做標準的『基線』，西文中，單個字母的所有立腳點都是在這條線上（除了 g、j、p、y）。而根據不同的字體，平行線的位子也會發生改變，這也是為什麼文字結構會多種多樣的原因。

這裡就要說到大家經常聽到但是並不非常理解的一句話了：小寫字母的高度要以 「x 高」為重要標準。（給你們重點說說）

因為平行線是可以根據你想要設計的字體結構做出改變的，所以 「x 高」就代表了中間兩根線的位置。當「x 高」大的時候，就會感覺小寫字母比較大，因為「x 高」決定了幾乎所有小寫字母的高度（除了 b、h、y 等有頭有腳的字母）。所以在設計英文字體時，要非常注意每個小寫字母的高度，這也是為什麼大部分優秀的字體設計師，設計其他作品時，會更注重細節的原因，因為他們設計字體就純講究細節。（不是說其他設計職業不注重細節，只是沒字體這麼講究）

舉個例子：字母 「C」和「O」

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

之前看到有人說英文字母，放的越大，間距就必須越小，否則識別性就很低，這絕對是錯誤的觀點。

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

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

中文的字體結構被稱之為「骨架」，它決定了這個字體的整體形象。圖片中標明的一處被稱之為「胸線」的位置，它也很重要，「胸線」小的字體更具復古風，更能表達傳統的韻味；相反，「胸線」大的字體會更具現代感。這也是為什麼有些中國風的作品中，字體看起來會特別不一樣的原因，我們會選擇字體「胸線」小的文字，去表達傳統風。

你所理解的字體分類也許是錯的

我們經常會聽到別人說：襯線體、無襯線體。沒錯，英文字體確實有分襯線體（如 Atheias）和無襯線體（如 Helvetica），以及其他字體（如 哥特體）。

有人問：宋體和黑體呢？

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

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

先說英文：歷史上最早的襯線體叫「羅馬體」，在紙質印刷中，襯線體經常被使用在正文以及標題，它被分為兩類：舊體、現代體。

舊體的特點是類似手寫體，比較沒有規則，給人傳統的感覺；現代體比例較工整。襯線現代體適用於標題，襯線舊體適用於文章內容。

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

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

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

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

其實上面有一段我說中文字體的時候已經說了很多了，所以這裡就不展開繼續了，只說兩個點：印刷方面我們更多的會用到宋體做正文內容的字體，而 UI 設計中，黑體或無襯線體會更讓眼睛舒適（這是最近翻閱國外文章時看到的最新研究）。

中英文字間距的簡單說明

舉個例子：「我在馬路邊，見到 one 塊錢」；「我在馬路邊，撿到one塊錢」

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

我覺得很多人寫文章或文檔，都沒做到這點，只能說做事情不是很仔細，沒有認真考量這些細節，同時也說明做事情的態度…（好了，我就不裝*了）

比如我公眾號的文章，我會在兩邊留一個間距，讓讀者更好的集中視覺焦點，不會逃離手機屏幕的邊緣。我大概去年中旬開始這樣做之後就一直被模仿，也正說明了它確實是有效果的。

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

案例分析

學習字體設計大概三周時間，我有幸接到一個小項目：給一家日式料理店設計一個字體 Logo。

一刀日式料理，杭州一家剛開的日式料理店，店鋪風格走得是新日式風，帶一些傳統元素在。在與委託人聊完後，得到幾個關鍵詞：日式、素雅、簡約。 以此設計店鋪字體 Logo：一刀。

一開始毫無頭緒，於是找了日式料理的歷史翻閱了下，發現有很多人對日式料理的店鋪字體 Logo 有一個錯誤的了解，即：用「勘亭流」做基礎來設計。而這類字體大部分是用在日本相撲與歌舞伎町專門的宣傳上的。

在了解了一個大概情況後，我有了一點點的思路。就先動手找了找感覺，可惜並沒找到新的形式。

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

在翻閱資料的過程中，看到一本小塚明朝的字體，於是以它與古文體的「宋 · 米芾 · 離騷經」做了一個簡單結合，畫出了下面這個「刀」。

開始看著這個刀字，覺得風格太過老式，不符合新日式的調子，所以還是想做一個更改。

在做了多次更改之後，還是覺得差點感覺，正好翻看到左佐設計的「百年映像」，覺得這個橫筆的細體可以沿用，所以也試了一下。這裡的「刀」字都是初設，細節都沒有調整。

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

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

然後我結合了日本料理的店鋪招牌設計，找了一張這種花式肌理的圖片作為背景，完成了這次委託任務。

下面是定稿圖。

總結

我從理論出發，再到實戰，一共花了三周時間（目前還在每天學習，暫定三個月）。

說實話，雖然我目前的作品跟那些字體大師沒法比，但也算是我入門了字體這一塊，我學這些不是說我要做一個純字體設計師，而是理解更多關於字體的知識，運用到 UI 工作中，因為我知道：設計是相通的。

當你處於某個瓶頸期時，可以試圖踏足其他領域去提高各個方面的能力，也許你突然就通了。

好比我在學習字體的過程中，了解到很多字體設計的流程，發現它跟交互設計工作有很多的相似點。所以每當我聽到別人說看書都是虛的、沒實質性的用處的時候，表面上我不做什麼評價，但其實我心裡極其排斥這種人。

Anyway，好的知識都在書里，學不學就看你自己了。

END.

————————————

我開通了小密圈【獃獃U理】，一個私密社群，可以加我微信：linda658940 進行了解，年費 149 元，在這裡我們可以一起學習提升，你可以得到：1.簡歷的評估與作品集的製作點評；2.怎麼培養視覺與交互設計能力以及產品思維；3.不定期做視覺以及交互訓練，並點評作品；4.分享近期設計趨勢、熱點文章的個人總結；5.書籍的內容總結分享及推薦；6.工作問題，也可探討。

推薦閱讀：