英文字體排版學 (1) Design with Typography

Akira Lee
6 min readMar 20, 2020

--

認識英文字體的基礎知識

身為一位平面設計師,很長一段時間我對英文字體的了解僅限於個別字體的知識。不僅台灣學校裡鮮少探討西方字體的背景知識,我們對英文字體的探索大多還是透過日本書籍的二次轉譯。直到來美國念設計後,第一次真真實實地學到了Typography整個背景脈絡學問和字體依照年代特色的分類,整系列文章將向大家分享我的學習筆記,先從基礎知識開始介紹。

Anatomy of type
Understanding typography, Material.io

來到美國後,在與同學老師討論字體上,突然之間很多詞英文叫不出來,所以一開始先來帶大家認識英文字體的英文專有名詞!

Anatomy of type

  1. Baseline (基線)
    基線是對齊文字的重要標準,也是衡量上下行距的基準
  2. X-height (X字高線)
    指小寫x的高度線,x字高是判斷很多字特色的一個標準,例如:Helvetica 有很高的x字高
  3. Ascenders and Descenders (上伸筆畫與下伸筆畫)
    Ascenders指小寫字體超出x字高的部分,例如:f的頭部。
    Descenders指超出基線的底下部分,例如:y的尾巴。
  4. Aperture (字腔)
    例如O與C等文字裡面的空間

Typestyle and Weight

一個字體(typeface)裡面通常涵蓋不同字重(weight)的字體類型(font)

Avenir Next Font Weight

通常一個字體會有四到六種字重,常見的有Light、Regular、Medium、Bold

Weight, Material.io

Serif and Sans-serif

Sans-serif vs Serif, adobe.com

Serif 是有襯線的字體,Sans-serif 是無襯線的字體,有無襯線是大家都知道的字體分類,就像中文字體的明體與黑體。大家通常說有襯線字體看起來比較老,其實並不是所有的Serif都看起來老氣,被歸類在Serif的字體其實涵蓋了以下四類:Old-Style serifs, Transitional serifs, Didone or neoclassical serifs, Slab serifs,以後會再詳細講解這些分類的依據。

Serif, Material.io
  1. EB Garamond, Old-style serif
  2. Libre Baskerville, Transitional serif
  3. Libre Bodoni, Didone / neoclassical serif
  4. Bitter, Slab serif

而無襯線字體(Sans-serif) 包含了以下三類:

Sans-serif, Material.io
  1. Work Sans, Grotesque sans serif
  2. Alegreya Sans, Humanist sans serif
  3. Quicksand, Geometric sans serif

Leading

字元行距,指的是上一個基線到下一個基線的距離

Leading, Leading in typography
Leading in paragraph

調整Leading,在排版上可以達到不同的效果,上圖最左是字體大小與行距同高的狀況,文字距離緊密較不易閱讀,常見於文字內容量大的書本例如字典。中間則是常見的一倍行高,上圖最右則是兩倍,如果被要求寫30頁paper,文字量又不夠時可以用此偷懶方法。

Kerning and Tracking

Kerning and Tracking 都是指調整字元間距(letter-spacing),但是意思並不相同。Kerning指得是調整一個字母與接連的另一個字母間的距離,通常一個字體已預設好適當的距離,而這個距離其實並不是在每個字母間都等距,例如A與V間如果不調整,會看起來過度寬鬆。在某些時候,例如設計Logo,需要仔細的手動調整距離以追求視覺上的相等。

Kerning, Wikipedia

Tracking 指得是均勻調整整組文字的間距寬度,並非依照特定字母調整,調整一個值會影響整段段落的排版,視覺上看起來比較寬或窄。

Tracking in Paragraph

Type alignment

對齊,對齊只有三種很簡單,置右、置中、置左,然而英文不像中文是方塊字,怎麼對齊都有一邊仍會不太完滿,但切記,英文排版裡千萬不要使用左右切齊的功能,這會造成英文字母的空隙不一致,造成閱讀上的困難,而怎麼處理段落文字,把參差不齊的邊排列美麗就是排版的功力了。

Left-aligned, Material.io
Right-aligned, Material.io
Centered, Material.io

學會了如何調整字元間距、行距以及使用各種不同的字重以達到第一眼能判斷視覺重要程度 (hierarchy)是排版學很重要的一個目標。接下來的文章會介紹,如何應用這些知識排版,以及英文字體的歷史演變與分類。

--

--

Akira Lee
Akira Lee

Written by Akira Lee

Visual Designer at Los Angelas, CA.

No responses yet