前言

去年 10 月，我向一位書籍設(shè)計(jì)師朋友討教該如何調(diào)整行距，本希望他可以給我一些專業(yè)意見，然而他給我的回復(fù)是憑感覺調(diào)整。他的回答無疑是不專業(yè)的，聯(lián)想到自己學(xué)習(xí)和工作經(jīng)歷，不禁覺得數(shù)字時(shí)代好像設(shè)計(jì)師對(duì)字體排印越來越陌生。作為一項(xiàng)設(shè)計(jì)師必備的能力，筆者深感字體排印的重要性，因此有了這篇文章。由于筆者長期從事海外產(chǎn)品的設(shè)計(jì)工作，所以本篇會(huì)在“西文”語境下分享字體排印的相關(guān)知識(shí)，為大家做好西文字體排印提供理論依據(jù)。

更多字體相關(guān)文章：

一、什么是西文？

西文是歐美國家文字的總稱，以拉丁字母進(jìn)行書寫，如英文、法文、意大利文、德文等等。

二、如何理解字體排印？

字體排印譯自英文單詞“Typography”，是指通過排版使得文字易認(rèn)、可讀和優(yōu)美的技藝。通過中文翻譯也可領(lǐng)略這項(xiàng)技藝包含四個(gè)層面的內(nèi)容，分別為文字、字體、排版和印刷。

1. 文字（Script）

文字是人類用來記錄和傳播語言的書寫符號(hào)，只有對(duì)文字有了充足的了解，才能設(shè)計(jì)出更專業(yè)的作品。

首先，文字是不斷進(jìn)化的。我們現(xiàn)在使用的拉丁字母可以任意切換大小寫，而在歷史上出現(xiàn)最早的拉丁字母卻只有大寫，直到公元 8 世紀(jì)卡洛琳（Caroline）小寫體的出現(xiàn)，才首次明確了字母的大小寫。如果此時(shí)給你一個(gè)設(shè)計(jì)項(xiàng)目，需要完成一幅時(shí)間背景在公元 7 世紀(jì)的海報(bào)，而你的作品使用了小寫字母，那么在專家眼里你的作品便是不專業(yè)的。因?yàn)榘耸兰o(jì)前是沒有小寫字母的，你的作品顯然不符合時(shí)代特征。

其次，不同文化背景對(duì)同一文字的使用存在差異。德語采用拉丁字母進(jìn)行書寫，但是除了 26 個(gè)常規(guī)字母外，還新增了 3 個(gè)帶分音符的元音字母[?] [?] [ü]和 1 個(gè)特殊字母[?]。[?]和希臘字母[β]造型十分相似，在之前的案例中就常有設(shè)計(jì)師誤將[?]寫成[β]，這在德語使用者看來是極其不專業(yè)的。

2. 字體（Typeface）

字體的英文翻譯是“Typeface”，而在中文語境下“Font”也譯作字體，如 Font Family 中文稱作字體家族，那兩者之間有何區(qū)別呢？“Typeface”字面意思字臉，指代具有相同特征的字形集合，我們做設(shè)計(jì)切換不同字體，即是選擇不同的 Typeface。而 Font 是指同一造型和尺寸的文字集。印刷時(shí)代在字體商店購買字體時(shí)，可以看到貨架上擺放著一個(gè)個(gè)小盒子，里面裝滿了鉛字，盒子外面寫著字體名稱、字號(hào)大小、字重類型等信息。而每盒鉛字都是一套同一造型和尺寸的文字集，也被稱為一套 Font。

在界面設(shè)計(jì)中會(huì)制定文字規(guī)范，針對(duì)不同場景進(jìn)行字號(hào)、字重、行高等設(shè)定，每種場景的設(shè)定都是一套同一造型和尺寸的文字集，所以此處的文字規(guī)范也可稱為 Font。

3. 排版（Typesetting）

印刷時(shí)代設(shè)計(jì)師在完成板面設(shè)計(jì)（Layout）后，排字工人（Typesetter）會(huì)在設(shè)定好的版面內(nèi)擺放鉛字，擺放鉛字這一過程被稱為排版（Typesetting）。但隨著數(shù)字時(shí)代來臨，設(shè)計(jì)工作具有了所見即所得的特性，設(shè)計(jì)師在版面設(shè)計(jì)中可以自己完成文字的擺放，至此排版（Typesetting）的內(nèi)涵也發(fā)生了變化。從單指擺放鉛字到涵蓋版面設(shè)計(jì)，也是由于這一原因排字工人這一職業(yè)也消失在了歷史長河中。

4. 印刷（Printing）

印刷時(shí)代，字體排印中的“印”單指印刷（Printing），但隨著數(shù)字技術(shù)的發(fā)展，其內(nèi)涵也得到拓展，如今的“印”也指呈現(xiàn)方式，如數(shù)字時(shí)代文字呈現(xiàn)在屏幕上，了解呈現(xiàn)方式可以倒逼我們做出更好的設(shè)計(jì)。早期印刷活動(dòng)中，油墨質(zhì)量參差不齊，最終呈現(xiàn)效果會(huì)出現(xiàn)油墨外溢的情況，小字場景下會(huì)嚴(yán)重影響文本可讀性。為了解決這一問題設(shè)計(jì)師針對(duì)不同字號(hào)進(jìn)行了特殊處理，如小寫字母“i”圓點(diǎn)和豎線間的距離，小字號(hào)相比大字號(hào)會(huì)預(yù)留更多。數(shù)字時(shí)代也面臨類似情況，早期顯示設(shè)備分辨率較低，小字顯示會(huì)直接糊掉，為了應(yīng)對(duì)這種情況設(shè)計(jì)師創(chuàng)造了點(diǎn)陣字體，雖然損失了字體細(xì)節(jié)，但卻保留了字體的易認(rèn)性。

三、字體排印的基礎(chǔ)知識(shí)

1. 易認(rèn)性和可讀性（Legibility & Readability）

工作中常有設(shè)計(jì)師搞混 Legibility 和 Readability，在字體排印中 Legibility 譯作“易認(rèn)性”，指文字是否容易識(shí)別，屬于字體設(shè)計(jì)層面的內(nèi)容。如西文字體設(shè)計(jì)中，設(shè)計(jì)師時(shí)常關(guān)注大寫字母“I”，小寫字母“l(fā)”和數(shù)字“1”的造型，這三個(gè)字符字型相似，處理不好就會(huì)出現(xiàn)無法區(qū)分的情況。為了提升字體的易認(rèn)性設(shè)計(jì)師通常會(huì)進(jìn)行特殊處理，如大寫字母“I”上下兩端會(huì)加入橫線，小寫字母“l(fā)”尾端會(huì)向右側(cè)彎曲。當(dāng)前評(píng)價(jià)一套字體是否具有較好的易認(rèn)性，以上三個(gè)字符的區(qū)分也作為一項(xiàng)標(biāo)準(zhǔn)。

Readability 譯作“可讀性”，指文本組織是否清晰可讀，屬于排版層面的內(nèi)容，字體排印的最終目的即是提升文本的可讀性。

2. 字間距和字偶劇（Tracking & Kerning）

字間距（Tracking），有時(shí)也被稱為 Letter Spacing，是指字母與字母的間距。設(shè)計(jì)師在設(shè)計(jì)字體時(shí)會(huì)給到默認(rèn)的字間距，但默認(rèn)字間距通常不能滿足設(shè)計(jì)使用，需要經(jīng)過調(diào)整。調(diào)整原則以字號(hào)和字重作為參考，字號(hào)越小，字重越粗，字間距越大，具體取值需要考慮字體和版面效果。Figma 為調(diào)整字間距提供了兩種計(jì)算方式，默認(rèn)以百分比進(jìn)行計(jì)算，取值為當(dāng)前字號(hào)乘以百分比。如當(dāng)前字號(hào)是 58，字間距設(shè)置為 10%，實(shí)際字母之間的間距會(huì)增大 58*10%，即 5.8 個(gè)像素。你也可以直接輸入 5.8px 進(jìn)行調(diào)整，也就是第二種方式以像素進(jìn)行計(jì)算。

字偶劇（Kerning）也指字母與字母的間距，不同之處在于它特指某對(duì)特定字母。如大寫字母 A 和 V，由于造型原因頂部和底部分別預(yù)留了較大空間，這兩個(gè)字母組合到一起使用默認(rèn)字間距，視覺上會(huì)覺得空隙太大。所以設(shè)計(jì)師會(huì)針對(duì)這兩個(gè)特定字母進(jìn)行調(diào)整，這個(gè)間距稱作字偶劇，類似的字母還有 T 和 y、L 和 T 等等。字偶劇一般由字體設(shè)計(jì)師設(shè)置，排版時(shí)我們可以選擇是否使用，但一般情況下會(huì)默認(rèn)使用。

3. 行距和行高（Leading & Line height）

行距和行高是很多設(shè)計(jì)師經(jīng)常搞混的兩個(gè)概念，工作中時(shí)常聽到有設(shè)計(jì)師將行距稱為行高，或?qū)⑿懈叻Q為行距。在印刷時(shí)代想要調(diào)整行與行之間的距離，排字工人會(huì)在鉛字行與行之間插入鉛條，鉛條的英文是“Lead”，所以“Leading”后續(xù)引申為行距，是指行與行的間距。數(shù)字時(shí)代設(shè)計(jì)師使用電腦軟件進(jìn)行排版，此時(shí)行距的定義又發(fā)生了改變，指的是文本基線與基線之間的間距。

行高（Line height）是 CSS 中的概念，指的是文本行的高度。兩者區(qū)別在于計(jì)算方式不同，行高是取行高與字號(hào)的差值除以 2，分別加到文本行的頂部和底部。行距是取行距與字號(hào)差值，加到文本行的底部。如字號(hào) 16px 的文本將行高設(shè)置為 24px，它會(huì)在文本行上下分別加 4px，如果字號(hào) 16px 的文本將行距設(shè)置成 24px，它會(huì)在文本行底部加 8px，最終的視覺效果設(shè)置行高的文本會(huì)比設(shè)置行距的文本下移 4px（如下圖所示）。留心觀察的話可以發(fā)現(xiàn) Ps 和 Ai 中采用的是行距的計(jì)算方式，Sketch 和 Figma 采用的是行高的計(jì)算方式。

行距和行高如何設(shè)置？巴特里克的字體排印指南（Butterick's Practical Typography）給到建議，提倡使用字號(hào)的 1.2-1.45 倍。

4. 段落間距（Paragraph spacing）

行文過程中為了方便用戶理解語義，會(huì)進(jìn)行分段處理，而段落間距（Paragraph spacing）是對(duì)這一分段操作所進(jìn)行的視覺標(biāo)記。除段落間距外，還可以使用? （分段符）、縮進(jìn)進(jìn)行標(biāo)記。? 類似一種標(biāo)點(diǎn)符號(hào)，可以在連續(xù)的行文內(nèi)部標(biāo)記出段落分割點(diǎn)。縮進(jìn)通常被認(rèn)為是對(duì)? （分段符）的省略，只保留其占據(jù)的空間，由此形成視覺縮進(jìn)。

段落間距如何設(shè)置？打印機(jī)時(shí)代打字員會(huì)多敲下回車鍵，空出一行作為段落間距，所以一行的高度可以作為參考值。除此之外，Material Design 的排版指南也給出了建議，可以使用字號(hào)的 0.75-1.25 倍。

四、界面設(shè)計(jì)中常見的字體排印問題

1. 極少調(diào)整字母間距和行高

工作中看到最多的問題就是使用默認(rèn)字母間距、行高進(jìn)行排版，默認(rèn)參數(shù)只能確保排版不會(huì)犯錯(cuò)，但要想追求更好的效果必須學(xué)會(huì)如何進(jìn)行設(shè)置。其實(shí) Material Design 和 IOS 人機(jī)交互指南已經(jīng)告訴我們答案，在字體排印這一章節(jié)提供了其系統(tǒng)字母間距和行高參數(shù)，我們只需要按照此參數(shù)進(jìn)行設(shè)置即可。當(dāng)然也有人認(rèn)為規(guī)范給出的參數(shù)未必適合自身項(xiàng)目，此時(shí)可參考規(guī)范參數(shù)，然后結(jié)合項(xiàng)目實(shí)際情況進(jìn)行設(shè)置。設(shè)置完成后可在軟件中定義為文本樣式，在后續(xù)設(shè)計(jì)中直接調(diào)用即可。

2. 段落間距錯(cuò)誤的實(shí)現(xiàn)方式

記得有次在看同事設(shè)計(jì)稿時(shí)，他是這樣實(shí)現(xiàn)段落間距的，每段文字建立一個(gè)文本框，然后文本框之間設(shè)置間距拼接出整個(gè)段落。我心中不免疑惑難道不應(yīng)該是使用軟件排版功能去實(shí)現(xiàn)嗎？當(dāng)然也有人認(rèn)為最終的視覺效果相差無幾，使用哪種方式都可以。但是作為界面設(shè)計(jì)師需要明白一點(diǎn)我們的設(shè)計(jì)是需要落地屏幕的，若使用拼接方式，那么前端還原設(shè)計(jì)稿時(shí)就不會(huì)設(shè)置段落間距這個(gè)參數(shù)（設(shè)計(jì)側(cè)沒有設(shè)置開發(fā)在參數(shù)面板看不到），此時(shí)剛好使用的文本是后臺(tái)返回的，前端又沒有設(shè)置段落間距，那么最終的顯示效果將是不忍直視的。

3. 列表樣式錯(cuò)誤的實(shí)現(xiàn)方式

行文中需要展示不同文本項(xiàng)目時(shí)，常使用有序列表和無序列表。而在界面設(shè)計(jì)中很少設(shè)計(jì)師使用這個(gè)功能，他們大多有著自己的方式來實(shí)現(xiàn)列表樣式。如有序列表設(shè)計(jì)師會(huì)自己輸入列表序號(hào)，無序列表會(huì)自己繪制出文本前面的圓點(diǎn)，但這樣的實(shí)現(xiàn)方式都會(huì)造成樣式上的差錯(cuò)。正確的有序列表，文本換行后是和序號(hào)后的文本居左對(duì)齊的，但上述方式文本換行后是和序號(hào)對(duì)齊的。還有正確的無序列表，小圓點(diǎn)的前方都會(huì)空出一部分間距，但常有設(shè)計(jì)師自己繪制圓點(diǎn)，為了追求絕對(duì)的視覺對(duì)齊，選擇拿掉本應(yīng)空出的這部分間距。Figma 和 Sketch 都提供了相應(yīng)的列表功能，作為設(shè)計(jì)師應(yīng)該使用對(duì)應(yīng)功能來實(shí)現(xiàn)以上樣式。

五、結(jié)語

字體排印有著巨大的知識(shí)范疇，筆者文中聊到的部分也只是滄海一粟，如對(duì)西文字體排印有更多興趣，可關(guān)注以下參考資料。

1. 巴特里克的字體排印指南： https://practicaltypography.com/
2. 字談字暢（一個(gè)介紹西文字體排印的中文播客）： https://www.xiaoyuzhoufm.com/podcast
3. The Type（字體排印的專業(yè)網(wǎng)站）： https://www.thetype.com/
4. Material Design 的字體排印章節(jié)： https://m2.material.io/design/typography
5. IOS 人機(jī)交互指南中的字體排印章節(jié)： https://developer.apple.com/design