「中文排版的技巧和金屬活字一起消失啦」

UX Coffee：你怎么會想到去做 Type is Beautiful、翻譯字體書籍、進(jìn)入字體排印這個領(lǐng)域的？

Eric：這跟我的成長經(jīng)歷有關(guān)系。我大學(xué)是學(xué)外語的，現(xiàn)在也在國外，所以能更客觀地看待中文字體排印的現(xiàn)狀。Type is Beautiful 的主編 Rex 在倫敦，他做這個博客是因為他發(fā)現(xiàn)用中文介紹字體排印的網(wǎng)站特別少，西文卻有很多。我們在國外接觸到字體排印的信息比較多，也有能力把這些東西介紹給國內(nèi)，會有一種責(zé)任感，思考我們作為個人、組織能做些什么事，就這樣越陷越深，無法自拔。

這對我們也是一個學(xué)習(xí)的過程，一開始 Type is Beautiful 的很多文章都是我們自己的學(xué)習(xí)筆記。前段時間我翻譯了《西文字體》系列、《西文排版》，很自然地，我會想有什么介紹中文字體的書，但市面上并沒有，所以我就自己開始寫。我們要「三步走」，第一步是「拿來主義」，沒有東西的話你就去翻譯，先去把國外東西學(xué)來。第二步是消化。第三步是自己把知識總結(jié)寫出來。

Type is Beautiful 是一個關(guān)于文字設(shè)計和視覺文化的媒體計劃。他們關(guān)注的話題包括字體、排版、平面設(shè)計、公共設(shè)計、技術(shù)和視覺文化。

UX Coffee：其中你有遇到過什么困難或者挑戰(zhàn)嗎？

Eric：我們第一個遇到的問題就是術(shù)語，很多術(shù)語在國內(nèi)都沒有公認(rèn)的翻譯，比如說最簡單的 Typography 這個詞，我會翻譯成「字體排印」，國內(nèi)很多人說是「文字設(shè)計」、「字體設(shè)計」，但后兩者就和 type design 混淆了。如果從概念開始就混亂，那后面談的東西都是錯的。

另外，我個人感覺更深的就是「知識斷代」。印刷行業(yè)經(jīng)歷過三次巨大的技術(shù)變革。最早是金屬活字、鉛字，需要用熱鉛鑄字機(jī)。到了 70 年代，印刷被用膠片的照相排版取代。到了現(xiàn)在，大家都使用電腦排印了。

隨著技術(shù)變革，字體設(shè)計、字體排印也經(jīng)歷變革，中間的傳承就是很嚴(yán)重的問題：在字體設(shè)計方面，鉛字師傅的基本功和技巧，有沒有傳給照排師傅？有沒有傳給現(xiàn)在的字體設(shè)計師？在排版方面，以前是有排版師傅的。以前的設(shè)計師只做宏觀的排版，就是版面設(shè)計，比如圖放在哪里、文字放在哪里。而剩下的事情，比如一行多少個字，標(biāo)點符號如何處理，是排版師傅的工作。

現(xiàn)在沒有排版師傅了，所以要設(shè)計師自己去做，但其實設(shè)計師并不知道該怎么做。這就是很嚴(yán)重的斷代。所以我經(jīng)常說，中文排版的技巧和金屬活字一起消失了。

金屬活字和字體尺

「互聯(lián)網(wǎng)中文排版發(fā)展到什么程度了？連最基本的字體都沒有?！?/span>

從鉛字時代到照排時代，再到信息時代，我們把文字排版的任務(wù)，很大程度上交給了電腦軟件和瀏覽器。在信息時代，瀏覽器的排版引擎替代了鉛字師傅和照排師傅，它就像城市的基礎(chǔ)設(shè)施，我們一直用著它，但不會一直想著它。

但問題在于，這種基礎(chǔ)設(shè)施是由西方世界定義的，他們不懂中文，所以包括 Eric 在內(nèi)的一群專家撰寫了中文排版需求，把中文排版的需求傳遞給技術(shù)規(guī)則的制定者，希望能建立起信息時代中文字體排印的基礎(chǔ)設(shè)施。

Eric：你有沒有思考過電腦打字背后的技術(shù)？這是個非常復(fù)雜的過程，用到了很多技術(shù)，包括鍵盤鍵位、鍵盤映射、輸入法、編碼（Unicode）。最后顯示到屏幕上，還有字體和字體渲染的過程，瀏覽器接受到 html 和 css 的排版信息，通過排版引擎顯示出來。

那我們現(xiàn)在中文排版引擎發(fā)展到什么程度了呢？到目前為止，我們還不能在網(wǎng)頁上指定仿宋體。仿宋體可是四種基礎(chǔ)中文字體之一（宋體、黑體、仿宋、楷書）。你在大陸看到的報紙，肯定都會有這四個字體。但因為現(xiàn)在整個架構(gòu)都是老外的，他們的 font-family（字體樣式 ）里最常用的有 serif （襯線體）和 sans-serif （非襯線體），你把宋體套上 serif，把黑體套上 sans-serif，那楷體和仿宋怎么辦呢？

在新版本的 CSS 里，楷體被套到了 cursive （手寫體）里面。然后又為仿宋單獨(dú)做了一個 fangsong 的樣式，但現(xiàn)在還幾乎沒有瀏覽器可以渲染出來，所以說前途是光明的，道路是曲折的。

Eric 等人受邀整理了 W3C 上的《中文排版需求》，把中文傳統(tǒng)排版的需求翻譯給技術(shù)規(guī)則的制定者

小學(xué)就學(xué)過的標(biāo)點擠壓，在電腦上怎么就這么難？

UX Coffee：說到中文字體排印，大家可能覺得這是設(shè)計師的專業(yè)技能，但事實上我們每個人都學(xué)過中文字體排印。早在寫小學(xué)作文的時候，我們就學(xué)到了這些知識，比如「標(biāo)點擠壓」，但這些在當(dāng)時理所當(dāng)然的規(guī)則，到電腦和手機(jī)上卻被忽略了。

Eric：當(dāng)有連續(xù)兩個及以上的標(biāo)點放在一起時，因為中文的標(biāo)點是全寬的，所以看起來會很稀疏，在紙面上就是一個窟窿。因此在正規(guī)的書籍排版中，我們會調(diào)整標(biāo)點符號的間距，讓標(biāo)點挨得近些，這就是「標(biāo)點擠壓」。小學(xué)生用文稿紙寫作文的時候，語文老師會要求把連續(xù)兩個標(biāo)點寫在同一個格子里，也是同樣的道理。可是在網(wǎng)頁排版里，這是沒辦法輕易實現(xiàn)的，你必須用 JavaScript 強(qiáng)制把它們挪到一起。

連續(xù)出現(xiàn)句號和后括弧兩個標(biāo)點時，把句號按半寬處理，是一種常見的標(biāo)點擠壓方式

標(biāo)點擠壓也是有不同風(fēng)格的：傳統(tǒng)論文會比較緊一點，輕松小說可能稀疏一點；不同的出版社也有不同的風(fēng)格。在出版行業(yè)，大家都知道一種叫「開明式」的標(biāo)點擠壓方式。但隔行如隔山，很多設(shè)計師不知道，所以我們要把它翻譯出來，讓做網(wǎng)頁設(shè)計的朋友知道。

「開明式」按語義調(diào)整標(biāo)點寬度，代表句子結(jié)束的標(biāo)點（如句號、問號、感嘆號）用全寬，句中標(biāo)點（如逗號）用半寬。徐調(diào)孚等編《開明新編國文讀本》（注釋本乙種第一冊），開明書店，1948 年初版，上海福州路。| 圖：臺灣華文電子書庫

UX Coffee：另外一個很常見的場景，就是做設(shè)計的時候，我們經(jīng)常隨手拉開一個文本框，開始打字。在中文排版里，這個文本框不應(yīng)該是隨手拉出來的。因為在中文排版里有一個基本原則：文本框的寬度應(yīng)該是字號的整數(shù)倍。

Eric：中文是方塊字，中文排版應(yīng)該兩端對齊。但是兩端對齊后，最后一行的字距是不會變的。如果文本框?qū)挾炔皇亲痔柕恼麛?shù)倍，也就不是字?jǐn)?shù)的整數(shù)倍，那前面幾行都會被拉開，以達(dá)到兩端對齊的效果，而最后一行沒有被撐開，那么最后一行和前幾行就無法對齊。

左對齊時，右邊會有空格，不適合中文的方塊字

若行長不是字號的整數(shù)倍，兩端對齊后，前幾行通過拉開字距的方式，達(dá)到了兩端對齊，但最后一行依然保留了左對齊的字距，無法和前幾行對齊。

行長改為字號的整數(shù)倍，兩端對齊時，其他行的字間距和最后一行保持一致

這條規(guī)則在中文本來是理所當(dāng)然的。但因為西文默認(rèn)是左對齊的，而且西文作為字母文字，有更多字距調(diào)整的方式，所以在西文排版里，大家一般會先算好兩邊頁邊距要空出多少，不在乎每一行有多少個字。而在中文排版里，需要先算好每一行要放多少個漢字，再去看兩邊的邊距。這就是中西文排版的根本區(qū)別。

紙面上做這一點比較容易，網(wǎng)頁上需要考慮響應(yīng)式設(shè)計，會有不同的寬度，但如果你有關(guān)注這方面的需求，實際做法有很多。比如蘋果公司的中文網(wǎng)頁排版，你去看源代碼就知道，排版非常精細(xì)。你可能在 iPhone、iPad 或者電腦上看蘋果的網(wǎng)頁，這些屏幕的寬度不同。為了在不同屏幕上達(dá)到好的效果，他們非常認(rèn)真地把網(wǎng)頁上的小標(biāo)題用 span 一個個括起來，來控制換行的地方。

從大屏幕切換到小屏幕，換行只會換在「輕輕地，」后面，符合閱讀規(guī)律

中西文混排：為什么不能隨便「拉郎配」

Eric：中文排版的另一個特點是中文和西文的混排，中西文混排的第一步就是選擇合適的字體。中文字體里附帶的西文實在是太難看了，比如老的中易宋體和中易黑體，里面的西文是等寬的，像打字機(jī)一樣，根本沒辦法用于長篇排版。所以絕大多數(shù)設(shè)計師還是分別為中文指定一個字體，西文指定一個字體。這在網(wǎng)頁排版是可以實現(xiàn)的，在 CSS 里把西文字體寫在中文字體前面就可以了。

不過，這么做的前提是你會用復(fù)合字體，會微調(diào)中西文的搭配。因為同樣的字號，漢字顯得大，西文顯得小，因此需要調(diào)整它們的大小。另外，西文是以基線為基礎(chǔ)的，而漢字是以字框為基礎(chǔ)，基線和字框有時無法對齊，需要手動調(diào)整位置。

你也可以自己把這些都調(diào)好了，封裝成一個新的復(fù)合字體 woff。蘋果就是這樣，它的中文字和西文字的大小是調(diào)過的。

你也可以用已經(jīng)搭配好中西文的字體。比如很多人用的開源字體「思源宋」、「思源黑」，里面的西文有針對中西搭配的場景調(diào)整過，放大了西文、調(diào)整了基線。所以你可以直接用這兩個字體做中西文的混排。

中西文混排還有一個間距問題。印刷時，原則上中西間距是 1/4 空。但是這在網(wǎng)頁上還沒有辦法控制，很多人會手動去控制，就是人工在中英文之間輸入一個空格，但理論上這應(yīng)該讓排版引擎去實現(xiàn)。這個問題我們會在 CSS 的 level 4 里解決，還需要花一段時間。

其實網(wǎng)頁上有一套現(xiàn)成的排版框架。 Ethan （陳奕鈞） 制作了「漢字標(biāo)準(zhǔn)格式」，這是一套支持各種印刷效果的 Sass + JavaScript 排版框架。你可以借此來實現(xiàn)剛才提到的效果。當(dāng)然添加這些代碼的話，肯定會影響性能，所以這還是設(shè)計決策的考慮：你自己要拿捏好「實現(xiàn)效果」與「性能」之間的平衡。

「漢字標(biāo)準(zhǔn)格式」里有諸多高級排版功能，包括「標(biāo)點擠壓」、中西文混排間距調(diào)整等

最后我想說一點，很多人都是平面設(shè)計師出身，其實平面的要素就是圖和文。我非常希望大家在平時的工作和生活中多想想：「我們很重視圖片的設(shè)計，但有沒有足夠重視同樣重要的文字？」

UX Coffee：這對 UI 設(shè)計師也適用。UI 設(shè)計本質(zhì)上是圖和文字的混排，很多時候那張圖還是用戶上傳的，你無法控制，你只能控制 UI 里的字體排印，這甚至是比設(shè)計圖片更重要的技能。

Eric：另外，Typography 這個概念其實是從國外過來的，大家現(xiàn)在用的電腦、字體技術(shù)、整個排版引擎，操作系統(tǒng)其實都是國外的。大家可以想想在這樣的基礎(chǔ)設(shè)施上，中文應(yīng)該怎么體現(xiàn)，中文的 Typography、OpenType、排版引擎應(yīng)該是什么樣的？對外國企業(yè)來講，這些問題是國際化、本地化。但作為母語使用者，我們有義務(wù)去提需求，有義務(wù)去設(shè)計、提高中文排版。不要總想著老外幫你把本地化做得多好，作為中文母語者，作為專業(yè)設(shè)計師，我們應(yīng)該有自己的思考。

原創(chuàng)：?UX Coffee?

公眾號：設(shè)計咖UXCoffee?