如何正確的使用字體

簡評：本文通過研究一種字體的細節和個性，來找到合適的設計方案。

你喜歡的字體不可能在任何地方都適用，文字的結構樣式特徵必須和其他元素互補，這裡講想你介紹如何發揮字體的長處。

在某個場所你看到了一種你喜歡的字體，你想迫不及待的使用它，沒錯，這確實很爽，但請等一下（球都麻袋）。在你購買或者下載這種字體之前，你會想知道，你所看到的這種漂亮字體的線條，形狀以及其他細節，是否同樣也會在別的設計中顯得如此漂亮呢？

那麼如何知道呢？

研究一個字體有點像觀察一個人的臉，通過細微的差異，如眉毛的彎度，嘴唇的取消，顴骨的輪廓可以傳達一個人的特徵和性格。我們需要讓某種字體與其他元素互補才能真正發揮字體的個性和魅力。否則你的字體看起來就會顯得不著調或者僅僅是有趣而已。

△不合適的 University Roman 字體招牌

上圖就是一個字體不和的案例：這是一個 Monterey 有名的罐頭廠街（Cannery Row）上，一家精品店的招牌，看起來很不搭。這種字體的字母呈現一種不規則、繁瑣的捲曲線以及非常幼細的襯線，這就好像穿著狂歡節的衣服參加政治課，顯得格格不入。那麼這種字體（university roman 字體）在哪裡適合使用它的呢？

Step 1.把所有字母列出，一般觀察

把所有的字母打出來，然後仔細觀察，把你看到的都寫下來（如下圖），為什麼？因為這樣能確保你認真的看了每個字母每個細節。

我們可以從 university roman 字體得到一些特點：

• N 和 O 在通常的字體中是等寬的，但是這卻有著非常大的差別。
• 字母 M 和 T 通常是不同的寬度，但是在這裡是等寬的。
• A 和 e 都有非常小的字谷，且為密封區間。
• 其他字母如 O、R 字谷非常大。
• 溫軟的收尾，華麗的曲線和修飾。
• 粗細線條有微妙的變化，雖然不明顯，但是每個字母都有這種變化。

Step 2.細節觀察

進一步觀察細節，可以發現，這總字體飄逸的結構使其呈現一種手寫字體、充滿聖誕節氣息的特質。非常適合用於一些奇幻或浪漫的主題中使用。

進一步細節觀察可以發現：

• 奇怪的字元寬度：所有筆直的字母都很纖瘦。
• 所有的圓弧的字母都是非常寬的。帶圓弧的小寫字母也寬於不帶圓弧的大寫字母。
• 古怪的 X -height，有些字母比如 A、B 的 X-heights 非常高，有些字母如 P、R 非常低。
• 不對稱的襯線。
• 襯線上方超出大寫字母頂部，下方低於字母基線。
• 小寫字母比如 i、l、t、等有小橫崗的都有 50° 的坡度。
• Q 的尾巴相當於 2 - 3 個修長小寫字母的寬度。

Step 3.發現優缺

優點：

• 良好的展示型和討喜的面孔。
• 魔幻主義。
• 適合標題。

• 適合放大。

缺點：

• 不適合正文

• 不適合過長

Step 4.實際應用

好了，我們已經知道了字體的細節，表達的情緒和優缺點。

現在我們可以試著用這種字體來進行實例操作。

△用 University Roman 字體做好的案例

下面我們來一步一步學習，如何做到上面兩張的效果的。

Step 4.1.1 案例 A - 尋找共性

尋找一張圖片，與你的文字相配。

從外形開始，圓的字母和圓的圖片更配。避免使用三角形，正方形和含糊不清的形狀，這些會和你的字體不協調，削弱你的設計。

Step 4.1.2 案例 A - 利用顏色和邊緣，圖文結合

現在需要將圖片和文字結合起來。文字區域與圖案的邊緣是緊密結合的，然後在用漂亮的漸變色來結合兩者。

Step 4.1.3 案例 A - 卡片上排版

將文字和圖片放置小卡片上，界面大小和視覺焦點是關鍵，我們通過在對焦複製一個小元素來平衡整個結構。

以上為花樣小卡片的案例設計。

Step 4.2.1 案例 B - 尋找素材

陰謀、神秘、幻想。第二張卡片中，我們的字體要看起來充滿神秘和奇幻的氣息，ok，我們想把它和黃金面具結合起來。

△最終選擇了黃金面具這個素材，因為有著和 University Roman 相同的特性。

Step 4.2.2 案例 B - 圖片決定頁面的設計方案

當文字和圖片放在一起是，講面具的顏色，修飾以及問了特徵應用到頁面生於文字元素中去，結果就會產生一個統一，協調強大的設計。

從現有的素材上選取相近的顏色，應用到文字，找一個修飾元素搭配，居中突出主題，最後案例 B 完成。

最後，附上兩幅作品的設計方案，僅供大家參考。

園長：如果我們要用一個字體，首先我們要了解字體的性格和特點（要儘可能的挖掘細節）。其次找到合適的素材與之搭配，最後通過設計方法來結合圖文，成為優秀的作品。

延伸閱讀：

• 設計師最愛的英文字體

• logo 設計流程

• 設計師的自學手冊（附大量學習資源和工具）

• 39 個無版權圖片站 - 極光日報
• The Art of stealing：如何成為一名設計師

• 零基礎 5 分鐘設計 logo（內附資源）

• 前端 & 設計師必備的生產力工具

• 優秀的數據可視化設計

• ˉ\_(ツ)_/ˉ論不同字體顏文字的特效 （另附顏文字神器下載）

以上。

This is it.

極光日報，漲姿勢。來來來，關注走一波。

歡迎關注

知乎專欄「極光日報」，每日 2 篇優質英文文章。

微信公眾號「極光開發者」（jiguangdev），每周 2 篇技術類文章。

推薦閱讀：