聊聊中文排版這件小事：Eric Liu ·《字談字暢》主播、Type is Beautiful 編輯
本期節目，我們請來了著名的文字設計媒體 Type is Beautiful 的編輯、字型播客《字談字暢》的主播 Eric Liu（劉慶）。他也是網際網路標準制定機構 W3C 的特邀專家，參與整理了中文書寫系統在網際網路排版上的需求。他還翻譯了《西文字型》、《字型故事》等著作。
「中文排版的技巧和金屬活字一起消失啦」
UX Coffee ：你怎麼會想到去做 Type is Beautiful、翻譯字型書籍、進入字型排印這個領域的？
Eric ：這跟我的成長經歷有關係。我大學是學外語的，現在也在國外，所以能更客觀地看待中文字型排印的現狀。Type is Beautiful 的主編 Rex 在倫敦，他做這個部落格是因為他發現用中文介紹字型排印的網站特別少，西文卻有很多。 我們在國外接觸到字型排印的資訊比較多，也有能力把這些東西介紹給國內，會有一種責任感，思考我們作為個人、組織能做些什麼事，就這樣越陷越深，無法自拔。
這對我們也是一個學習的過程，一開始 Type is Beautiful 的很多文章都是我們自己的學習筆記。 前段時間我翻譯了《西文字型》系列、《西文排版》，很自然地，我會想有什麼介紹中文字型的書，但市面上並沒有，所以我就自己開始寫。我們要「三步走」，第一步是「拿來主義」，沒有東西的話你就去翻譯，先去把國外東西學來。第二步是消化。第三步是自己把知識總結寫出來。
UX Coffee ：其中你有遇到過什麼困難或者挑戰嗎？
Eric ： 我們第一個遇到的問題就是術語 ，很多術語在國內都沒有公認的翻譯，比如說最簡單的 Typography 這個詞，我會翻譯成「字型排印」，國內很多人說是「文字設計」、「字型設計」，但後兩者就和 type design 混淆了。如果從概念開始就混亂，那後面談的東西都是錯的。
另外， 我個人感覺更深的就是「知識斷代」 。印刷行業經歷過三次巨大的技術變革。最早是金屬活字、鉛字，需要用熱鉛鑄字機。到了 70 年代，印刷被用膠片的照相排版取代。到了現在，大家都使用電腦排印了。
隨著技術變革，字型設計、字型排印也經歷變革，中間的傳承就是很嚴重的問題：在字型設計方面，鉛字師傅的基本功和技巧，有沒有傳給照排師傅？有沒有傳給現在的字型設計師？在排版方面，以前是有排版師傅的。以前的設計師只做巨集觀的排版，就是版面設計，比如圖放在哪裡、文字放在哪裡。而剩下的事情，比如一行多少個字，標點符號如何處理，是排版師傅的工作。
現在沒有排版師傅了，所以要設計師自己去做，但其實設計師並不知道該怎麼做。這就是很嚴重的斷代。所以我經常說， 中文排版的技巧和金屬活字一起消失了 。
「網際網路中文排版發展到什麼程度了？連最基本的字型都沒有。」
從鉛字時代到照排時代，再到資訊時代，我們把文字排版的任務，很大程度上交給了電腦軟體和瀏覽器。在資訊時代，瀏覽器的排版引擎替代了鉛字師傅和照排師傅，它就像城市的基礎設施，我們一直用著它，但不會一直想著它。
Eric ：你有沒有思考過電腦打字背後的技術？這是個非常複雜的過程，用到了很多技術，包括鍵盤鍵位、鍵盤對映、輸入法、編碼（Unicode）。最後顯示到螢幕上，還有字型和字型渲染的過程，瀏覽器接受到 html 和 css 的排版資訊，通過排版引擎顯示出來。
那我們現在中文排版引擎發展到什麼程度了呢？ 到目前為止，我們還不能在網頁上指定仿宋體。仿宋體可是四種基礎中文字型之一（宋體、黑體、仿宋、楷書）。 你在大陸看到的報紙，肯定都會有這四個字型。但因為現在整個架構都是老外的，他們的 font-family（字型樣式 ）裡最常用的有 serif （襯線體）和 sans-serif （非襯線體），你把宋體套上 serif，把黑體套上 sans-serif，那楷體和仿宋怎麼辦呢？
在新版本的 CSS 裡，楷體被套到了 cursive （手寫體）裡面。然後又為仿宋單獨做了一個 fangsong 的樣式，但現在還幾乎沒有瀏覽器可以渲染出來，所以說前途是光明的，道路是曲折的。
我們小學就學過的標點擠壓，在電腦上怎麼就這麼難？
UX Coffee ：說到中文字型排印，大家可能覺得這是設計師的專業技能，但事實上我們每個人都學過中文字型排印。早在寫小學作文的時候，我們就學到了這些知識，比如「標點擠壓」，但這些在當時理所當然的規則，到電腦和手機上卻被忽略了。
Eric ：當有連續兩個及以上的標點放在一起時，因為中文的標點是全寬的，所以看起來會很稀疏，在紙面上就是一個窟窿。因此在正規的書籍排版中，我們會調整標點符號的間距，讓標點捱得近些，這就是「標點擠壓」。小學生用文稿紙寫作文的時候，語文老師會要求把連續兩個標點寫在同一個格子裡，也是同樣的道理。可是在網頁排版裡，這是沒辦法輕易實現的，你必須用 JavaScript 強制把它們挪到一起。
標點擠壓也是有不同風格的 ：傳統論文會比較緊一點，輕鬆小說可能稀疏一點；不同的出版社也有不同的風格。在出版行業，大家都知道一種叫「開明式」的標點擠壓方式。但隔行如隔山，很多設計師不知道，所以我們要把它翻譯出來，讓做網頁設計的朋友知道。
UX Coffee ：另外一個很常見的場景，就是做設計的時候，我們經常隨手拉開一個文字框，開始打字。在中文排版裡，這個文字框不應該是隨手拉出來的。因為在中文排版裡有一個基本原則：文字框的寬度應該是字號的整數倍。
Eric ：中文是方塊字，中文排版應該兩端對齊。但是兩端對齊後，最後一行的字距是不會變的。如果文字框寬度不是字號的整數倍，也就不是字數的整數倍，那前面幾行都會被拉開，以達到兩端對齊的效果，而最後一行沒有被撐開，那麼最後一行和前幾行就無法對齊。
這條規則在中文字來是理所當然的。但因為西文預設是左對齊的，而且西文作為字母文字，有更多字距調整的方式，所以在西文排版裡，大家一般會先算好兩邊頁邊距要空出多少，不在乎每一行有多少個字。而在中文排版裡，需要先算好每一行要放多少個漢字，再去看兩邊的邊距。這就是中西文排版的根本區別。
紙面上做這一點比較容易，網頁上需要考慮響應式設計，會有不同的寬度，但如果你有關注這方面的需求，實際做法有很多。比如蘋果公司的中文網頁排版，你去看原始碼就知道，排版非常精細。你可能在 iPhone、iPad 或者電腦上看蘋果的網頁，這些螢幕的寬度不同。為了在不同螢幕上達到好的效果，他們非常認真地把網頁上的小標題用 span 一個個括起來，來控制換行的地方。
中西文混排：為什麼不能隨便「拉郎配」
Eric ：中文排版的另一個特點是中文和西文的混排，中西文混排的第一步就是選擇合適的字型。中文字型裡附帶的西文實在是太難看了，比如老的中易宋體和中易黑體，裡面的西文是等寬的，像打字機一樣，根本沒辦法用於長篇排版。所以絕大多數設計師還是分別為中文指定一個字型，西文指定一個字型。這在網頁排版是可以實現的，在 CSS 裡把西文字型寫在中文字型前面就可以了。
不過，這麼做的前提是你會用複合字體，會微調中西文的搭配。因為同樣的字號，漢字顯得大，西文顯得小，因此需要調整它們的大小。另外，西文是以基線為基礎的，而漢字是以字框為基礎，基線和字框有時無法對齊，需要手動調整位置。
你也可以自己把這些都調好了，封裝成一個新的複合字體 woff。蘋果就是這樣，它的中文字和西文字的大小是調過的。
你也可以用已經搭配好中西文的字型。比如很多人用的開源字型「思源宋」、「思源黑」，裡面的西文有針對中西搭配的場景調整過，放大了西文、調整了基線。所以你可以直接用這兩個字型做中西文的混排。
中西文混排還有一個間距問題。印刷時，原則上中西間距是 1/4 空。但是這在網頁上還沒有辦法控制，很多人會手動去控制，就是人工在中英文之間輸入一個空格，但理論上這應該讓排版引擎去實現。這個問題我們會在 CSS 的 level 4 裡解決，還需要花一段時間。
其實網頁上有一套現成的排版框架。 Ethan （陳奕鈞） 製作了「漢字標準格式」，這是一套支援各種印刷效果的 Sass + JavaScript 排版框架。你可以藉此來實現剛才提到的效果。當然新增這些程式碼的話，肯定會影響效能，所以這還是設計決策的考慮： 你自己要拿捏好「實現效果」與「效能」之間的平衡 。
最後我想說一點，很多人都是平面設計師出身，其實平面的要素就是圖和文。我非常希望大家在平時的工作和生活中多想想： 「我們很重檢視片的設計，但有沒有足夠重視同樣重要的文字？」
UX Coffee ：這對 UI 設計師也適用。UI 設計本質上是圖和文字的混排，很多時候那張圖還是使用者上傳的，你無法控制，你只能控制 UI 裡的字型排印，這甚至是比設計圖片更重要的技能。
Eric ：另外，Typography 這個概念其實是從國外過來的，大家現在用的電腦、字型技術、整個排版引擎，作業系統其實都是國外的。大家可以想想在這樣的基礎設施上，中文應該怎麼體現，中文的 Typography、OpenType、排版引擎應該是什麼樣的？對外國企業來講，這些問題是國際化、本地化。但作為母語使用者，我們有義務去提需求，有義務去設計、提高中文排版。不要總想著老外幫你把本地化做得多好，作為中文母語者，作為專業設計師，我們應該有自己的思考。
參考連結
- Eric 擔任編輯的文字設計部落格 Type is Beautiful： https:// thetype.com
- Eric 擔任製作人和主播的字型排印主題播客節目《字談字暢》： https:// thetype.com/typechat/
- Eric 的 Twitter 賬號： https:// twitter.com/ryukeikun
- Eric 翻譯的《字型故事》： https:// thetype.com/just-my-typ e/
- Eric 翻譯的《西文字型》： https:// thetype.com/western-typ e/
- Eric 翻譯的《西文字型 2》： https:// thetype.com/western-typ e-ii/
- 孔雀計劃：中文字型排印的思路： https:// thetype.com/kongque/
- 陳奕鈞（Ethan）製作的漢字標準格式 — 印刷品般的漢字排版框架： https:// css.hanzi.co/
- 中文排版需求： https://www. w3.org/TR/clreq/
- 擠擠總是會有的嗎： https:// thetype.com/2018/03/144 47/
- 從「行長為字號的整數倍」說起： https:// thetype.com/2017/07/125 13/
- 蘋果公司做的 Apple Pencil 中文網站（調整瀏覽器寬度，注意每個小標題斷句的位置）： https://www. apple.com/cn/apple-penc il/
- 思源宋體： https:// source.typekit.com/sour ce-han-serif/cn/
- 思源黑體： https:// github.com/adobe-fonts/ source-han-sans
你可能還喜歡 UX Coffee 的其他訪談
Riceman 米飯俠：我有一壺茶，還有橫豎撇捺 | 喜鵲造字葉天宇 zhuanlan.zhihu.com
本期編輯：Chishan、Hoka
文中配圖來自 Type is Beautiful
想收聽原汁原味的本期節目，你可以在蘋果 Podcast、網易雲音樂、喜馬拉雅 FM、或是任何泛用性播客客戶端搜尋「 設計咖 」。
訂閱 UX Coffee 微信公眾號： uxcoffee ，每週一杯設計咖啡