西文字體排印基礎知識篇

Sponsor

本篇會在“西文”語境下分享字體排印的相關知識，為大家做好西文字體排印提供理論依據。

西文字體排印基礎知識篇

前言

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

一、什么是西文？

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

二、如何理解字體排??？

字體排印譯自英文單詞“Typography”，是指通過排版使得文字易認、可讀和優美的技藝。通過中文翻譯也可領略這項技藝包含四個層面的內容，分別為文字、字體、排版和印刷。

1、文字（Script）

文字是人類用來記錄和傳播語言的書寫符號，只有對文字有了充足的了解，才能設計出更專業的作品。

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

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

2、字體（Typeface）

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

在界面設計中會制定文字規范，針對不同場景進行字號、字重、行高等設定，每種場景的設定都是一套同一造型和尺寸的文字集，所以此處的文字規范也可稱為Font。

3、排版（Typesetting）

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

4、印刷（Printing）

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

三、字體排印的基礎知識

1、易認性和可讀性（Legibility & Readability）

工作中常有設計師搞混 Legibility 和 Readability，在字體排印中Legibility譯作“易認性”，指文字是否容易識別，屬于字體設計層面的內容。如西文字體設計中，設計師時常關注大寫字母“I”，小寫字母“l”和數字“1”的造型，這三個字符字型相似，處理不好就會出現無法區分的情況。為了提升字體的易認性設計師通常會進行特殊處理，如大寫字母“I”上下兩端會加入橫線，小寫字母“l”尾端會向右側彎曲。當前評價一套字體是否具有較好的易認性，以上三個字符的區分也作為一項標準。

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

2、字間距和字偶?。═racking & Kerning）

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

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

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

行距和行高是很多設計師經常搞混的兩個概念，工作中時常聽到有設計師將行距稱為行高，或將行高稱為行距。在印刷時代想要調整行與行之間的距離，排字工人會在鉛字行與行之間插入鉛條，鉛條的英文是“Lead”，所以“Leading”后續引申為行距，是指行與行的間距。數字時代設計師使用電腦軟件進行排版，此時行距的定義又發生了改變，指的是文本基線與基線之間的間距。

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

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

4、段落間距（Paragraph spacing）

行文過程中為了方便用戶理解語義，會進行分段處理，而段落間距（Paragraph spacing）是對這一分段操作所進行的視覺標記。除段落間距外，還可以使用? （分段符）、縮進進行標記。? 類似一種標點符號，可以在連續的行文內部標記出段落分割點?？s進通常被認為是對? （分段符）的省略，只保留其占據的空間，由此形成視覺縮進。

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

四、界面設計中常見的字體排印問題

1、極少調整字母間距和行高

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

2、段落間距錯誤的實現方式

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

3、列表樣式錯誤的實現方式

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

五、結語

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

巴特里克的字體排印指南（Butterick’s Practical Typography）：https://practicaltypography.com/

字談字暢（一個介紹西文字體排印的中文播客）：https://www.xiaoyuzhoufm.com/podcast/5e280faf418a84a0461fc02d

The Type（分享字體排印的專業網站）：https://www.thetype.com/

Material Design的字體排印章節：https://m2.material.io/design/typography/understanding-typography.html#type-properties

IOS人機交互指南中的字體排印章節：https://developer.apple.com/design/human-interface-guidelines/typography

作者：Ye_susu（zcool.com.cn/u/1072459）
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。