[But桑專欄] 字型設計自己來-英文字型設計的第一課(1)

在開始字型製作之前,為了之後的說明方便,在一開始先介紹一些字型設計時常常會碰到的名詞,以及一些預備觀念。

首先,讓我們從拉丁文字談起。雖說是拉丁文字,這裡也不談法文的重音符號或德文的神祕組合(因為我也不懂!),所以篇名就叫做英文字型設計了。

英文字型設計上,最重要的一條線,是文字落腳基準線(baseline)。接著要去安排幾條線的位置,這些線的位置會大幅影響整個字型給人的印象。

  • 中央線(mean line):中央線是 a, c, m, n, x 這類小寫字母的頂端線,從基準線中央線的高度,稱為 x-height
  • 上端線(ascender line):中央線上端線中間這部份,也就是 b、d 這些字母上面凸出這一段,稱為 ascender(有人譯為頂端上升部)。
  • 下端線(descender line):g、p、y 這些字母,超過基準線下方的部分稱為descender

英文因為有 ascenderdescender 的存在,文字有高低起伏的印象,對於單字的辨識性有不小的作用。一般來說,ascenderdescender 的高度差異不會太大,否則 b、p 看起來就會很不對稱。

x-height ascender 相對高度則是另一個重要學問,當一套字的 x-height 相對愈高,在同樣的文字大小下會顯得看起來較大,在螢幕之類的載體上,小點數時的識別性稍高,所以近年螢幕用數位字型的 x-height 似乎有點偏高傾向。而 x-height 較低者,與手寫較為接近,造型顯得比較自然。較古典的人文主義風格舊風格,一般來說 x-height 都不高。

  • cap line:大寫高度的頂端。基準線到 cap line 之間的高度稱為 cap height。雖然我們在學寫英文字母的時候,大寫的高度也是對齊上端線,但許多字型設計上會另外安排一條大寫的頂端線,給字型更多變化。例如稍微區分大寫 I、小寫 l 的高度,或是在設計上給人大小寫有點區別的印象。

不過,請稍加注意一下在討論 TrueTypeOpenType 字型技術的術語上,通常把基準線上端線之間的整個高度稱之為 ascent。與傳統 ascender 的定義不太相同。而一般定義 ascent 加上 descent 的高度為文字的 em 大小。(感謝Julius的指正,之後會另外寫一篇來討論 em size)

設計一個英文字時,先在上面設定的這幾條線之間,做出文字的造型。這個文字填滿的方形空間,稱之為 bounding box

接下來,要決定左右各留下多少空間。就像傳統鉛字一樣,行距可以在排版時另外調整,但字與字之間是直接把鉛字排在一起,不會逐一去塞鉛角。所以要逐字訂出左留白(left side bearing)與右留白(right side bearing),讓文字排列在一起時,就留出適當的間距。為了讓字型每個字距離保持穩定,整套字型的左留白右留白值,應做整體性的規劃。再針對幾個特殊的字(如 f 的右留白值)另外調整。

最後,bounding box 的寬度加上左右留白的總寬度,稱為步進寬度(advance width)。

文字在顯示的時候,字型渲染引擎沿著基準線,逐一把每個字填在下一個位置上,並前進一個步進寬度。於是,這裡可以得到一個寬度公式:

步進寬度bounding box 寬度 左留白 右留白

不過,這裡的留白(side bearing)是可以有負值的。以下圖這個斜體(italic)的 f 為例,整個橘框都是 bounding box,然而左、右兩側的留白都是負值,實際的步進寬度只有中間白色的區域。這是因為 f 這個字,在常態下,前後的字元都塞在它的留白位置內,如右方 afa 文字的範例。

也就是說,文字字圖(glyph)的寬度bounding box)可以比步進寬度要寬,在現代的數位字型上,是理所當然的特性。但只不過幾十年前,英文打字機、甚至電腦初期用的點陣字,就很難做到這一點了。

(待續)

發表您的想法

comments