Typography

發表於 2020-09-24 更新於 2021-07-10

文章字數： 3.9k 所需閱讀時間 ≈ 7 分鐘

Typography

在這個常常要看平板電腦的時代，很多廣告物品吸引著人們的目光
這篇文章主要來自來一個懂字懂字的節奏，其對致力於推廣中文字型設計的justfont blog裡的文章做脈絡化的整理
文字排版（typography）會影響了畫面的情緒（mood）、調性（tone）、風格（style），在特定時刻更會牽涉到人命！

容易混淆的詞彙

字體（typeface）：有共同設計理念的文字集合（例：黑體在設計上的特徵為外型方正、筆畫粗細一致）

字型（font）：字體可以被實際使用的形式（例：思源黑體是Google和Adobe開發的免費字型）

字型家族（font family）：多套相同風格但不同粗細的字型（例：思源黑體共有六種不同粗細樣式，同屬一個字型家族

歷史

字型即是一種力量──將想法和語言以視覺呈現的力量。
15世紀初─黑體字 (Blackletter)
早期的書籍必須花上數個月以人工謄寫，直到印刷術的出現、才讓耗時又昂貴的知識傳遞成本大幅降低。
國中歷史課本一般指稱發明活字印刷術的人是中國的畢昇。然而現在提到印刷，幾乎都會提起歐洲人古騰堡 (Johannes Gutenberg)。
古騰堡除了改良印刷術，最厲害的是發明了一套字型，讓印刷程序的效率更高。印刷術講求的正是大量且快速的生產，古騰堡的改良讓知識傳遞更加普及，更推生了隨後的歐洲文藝復興、宗教改革、啟蒙運動和科學革命，為現代知識經濟和傳播奠定了物質性的基礎。
我們可以在復古風格設計，或報章雜誌如 The New York Times、 The Washington Times 看到它的蹤影。
Blackletter 雖然雕刻便利，卻明顯地有著過度密集、讓人閱讀困難的問題

15世紀文藝復興──羅馬體=人文風格字體(Roman Type, Humanist Type, 威尼斯式 (Venetian)字體)

羅馬體不是羅馬人用的字體，而是法國人 Nicolas Jenson 在十五世紀時受到古羅馬建築物上的刻文啟發所創造出來的字體
羅馬體一個很大的特色，就是仿照手寫的感覺。觀察一下，字體是否有些歪歪扭扭、粗細不均勻？它也被稱作人文風格字體 (Humanist)，為文藝復興時期最普遍的字體。在歷史書籍、聖經內文、或復古風格的設計中最為常見。
會有這樣的粗細差異是因為過去鋼筆與鵝毛筆所手寫產生的差異
包括 Centaur, Garamond, Lynton, Stempel Schneidler, Verona

18世紀啟蒙運動與工業革命──舊風格字體 (Old Style Type) 與過渡時期字體 (Transitional Type)

隨著印刷工具的進步，字體變得更加圓滑、線條粗細的差距更大，出現了舊風格字體 (Old Style Type)
由於舊風格字體的特色兼具「人性化」和「機械化」的感覺，因此常被使用在報章雜誌和早期的科技大廠上。
另一位叫 John Baskerville 的英國人創造了過渡時期字體 (Transitional Type)，被用作啟蒙時代的象徵
獨立宣言的起草、與早期美國政府的官方公文字體，都是用 Baskerville 所發明的 Baskerville 字體。
舊風格字體 (Old Style Type) 到過渡時期字體 (Transitional Type)，手寫的痕跡越來越少，粗筆劃越粗、細筆畫越細的衝突感越來越大，字型也越來越對稱、充滿機械感。字型逐漸走向一種「理性」的感覺
- 第一，過渡時期字體的重心幾乎是垂直的
- 第二，更誇張的粗細對比(high contrast)
- 第三，頂部的襯線更水平了，襯線與線條的交接處更圓弧化了

18世紀末時尚產業興起─現代體 (Modern Type)

一位叫 Didot 的法國人和另一位叫 Bodoni 的義大利人，各自創造了命名為 Didot 和 Bondoni 的字體，現在統稱為「現代體」(Modern Type)。
有著高度差異化、百分百對稱、且完全去除了手寫
19 – 20 世紀的時尚產業興起，現代體被大量應用在時尚風格的設計上

19 世紀初大眾廣告興起──埃及體 = 方塊體 (Egyptian Type, Slab Serif)

埃及體的流行，和 1815 年拿破侖剛入侵埃及、發現尼羅河文化遺跡並帶回埃及古文物回歐洲為同一時期，因此被稱為「埃及體」
埃及體有著特色化的粗體字，襯線也非常粗
雖不適合放在內文中，卻適合被用作廣告標題
因為埃及體大氣、顯眼、穩重的特色，與當時初興起的汽車產業，因而被廣泛應用在汽車商標上

20 世紀初大眾化商業發展──無襯線體 (Sans-Serif)

物極必反，在「襯線體」(Serif) 逐漸發展到了一個極致後，忽然開始流行「無襯線體」(Sans-Serif) ──沒有尾巴裝飾，且沒有粗細筆畫差異、每一筆都是一樣的粗細。Sans 在法文中，是無的意思。

它一直被認為是一種沒特色的字型，始終活在襯線體的陰影之下，早期也只有前衛藝術家會作為叛逆風格的字體使用
二十世紀初商業大眾化，普普風與工業風開始流行，無襯線體才逐漸取代襯線體，形成當代的代表字型
1927 年，德國設計師 Paul Renner 創造了命名為「Futura」的字體，得到了空前的迴響，Futura 也成為無襯線字體歷史上最重要的突破──以幾何形狀為基礎設計、字體粗線相等，具有時尚與未來感。

2015 年，Google 的 Logo 也做了 17 年來最大的變化──將原先的舊風格字體、改為使用 Futura 字體的改良。

Eric Gill 創造了「Gill Sans」的字體，想跟 Futura 打對台。
- Gill Sans 比稍稍拉長的 Futura 更圓、也更幾何
瑞士設計師 Max Miedinger 於 1957 年發明的 Helvetica
- 具有清晰好讀、不過度搶眼、能忠實呈現內文的特色
- 由於被使用的頻率太高，號稱為全世界最受歡迎的字體。

第一行開始從左到右

實際應用

不同的字型卻帶給人們截然不同的感受。要選擇什麼樣的字型，必須同時考量：
你的觀眾是誰？
你的口吻是什麼？
是否能達成你的目的？
- 可讀性（readability）
- 易辨性（legibility）
- 可視性（visibility）
  - ，若是UI/UX設計，還要另外考量螢幕顯示的效果（display adequacy）
- 英文上
小技巧
- 理想強調法：粗體字型與斜體字型
視認性（legibility）與易讀性（readability）
- 視認性（legibility）－－能不能區分清楚長得很像的字
- 易讀性**readability** －－讀起來有沒有舒服
  - 英文：x-height 高一點比較適合小螢幕
  - 我們知道英文字母的垂直長度越長，對眼睛是越顯眼的，Condensed字體就是一個極端的例子。而在小螢幕上，雖然閱讀距離相對近，但每個字又相對更小。這個時候，將每個字母的x-height調高，能有效幫助眼睛認為這個字是比較明顯的
  - 以下這張圖就說明了字級大小對文字視認性的影響：
  - 韻律感應為一種視覺心理的應用，描述視覺元素以固定規律出現時，人眼所能感受的節奏感覺，
    - 「一個字體設計時有兩個基本的方向：水平的－－也就是導引視覺在每一行移動的方向；還有垂直的－－顧名思義是每個字母垂直空間的掌握，這主要是由stem決定的。」
  - 字體的水平面向有關於閱讀時的視覺導引；而垂直面向則有關於韻律感。如果stem太擁擠、太過靠近，節奏感就變得過於緊湊，沒有空間讓眼睛舒服的接收訊息；而若是太寬，距離太遠，也就讓節奏感過於放鬆。
  - Segoe UI 也主打比較一般字體開闊的counter。舉例而言b, d, g, p這些字體的設計，會讓每個字符有更多呼吸空間，也讓字之間的節奏更有致。
  - - counter指的就是q, p, b, d, Q, O,o 等字中間的圓型封閉區域。

中文上

- 外面的大框稱為「字身框」:所謂的「字身」就是指活字的字身，也就是每個字的物理距離，也就是之前說的步進寬度 (advance width)
- 裡面的小框稱之為「字面框」:字面是文字的字圖(glyph)本身實際分佈的空間
九宮格的正中間那一格，稱之為「中宮」
- 仔細觀察名家的書帖，您會發現，很多字的結構，筆劃都向中宮集中
- 雖然這 5 行字的字號、字面的大小都完全相同，您是否覺得下方的文字看起來明顯大了很多呢？這就是中宮神奇的魔法！
- 嘗試來進一步品味這些字，中宮最緊縮的版本，似乎有種懷念感，最為傳統，而遠看時，每個字的輪廓差異最明顯。而最下方的版本，文字變大了，筆畫清晰了，不過每個字都趨近方形了，是不是有多了點科技，又少了點人文的感覺呢？或許每個人的感受不同，讀者不知道有什麼樣的感受。
- 一般認為，重心較低的文字，較有安定感，對讀者比較親近；而重心較高的文字，較有緊張感，能表現出文字的品味。不過這些只能說是通論，不見得能適用所有情況，還是要看其他筆畫、中宮的設計而定。
- 雖然中文本身是沒有所謂基準線(baseline)的，不過現代的文字生活，中文時時刻刻需要與英文、數字混排在一起。所以中文字型還是要決定出一條基準線，為了讓字型與英數字排版在一起時，能擺在個適當的位置。如上圖，一般我們會把基準線設在比漢字底端稍微高一點的位置，在經驗上，這樣中英文排列的效果看起來最舒服。