文字是人類文化的重要組成部分，經(jīng)歷了數(shù)千年的發(fā)展和演變，字體排版已經(jīng)積累了非常多的專業(yè)性知識(shí)。

無(wú)論是平面設(shè)計(jì)師還是 UI 設(shè)計(jì)師，都應(yīng)該了解和學(xué)習(xí)這些基礎(chǔ)設(shè)計(jì)知識(shí)，從而幫助我們創(chuàng)造更優(yōu)秀的產(chǎn)品體驗(yàn)。

文字是界面設(shè)計(jì)中最重要的組成部分，也是最不可忽視的核心元素，文字排版的好壞，直接影響著產(chǎn)品的信息傳遞和視覺(jué)傳達(dá)效果，對(duì)閱讀體驗(yàn)更是有著至關(guān)重要的作用。

在用戶與界面交互的過(guò)程中，字體的使用也能夠反映出品牌的性格與氣質(zhì)，如果說(shuō)圖形和色彩是品牌的皮膚和血肉，那字體則是品牌的內(nèi)在骨骼。

1. 字體 Typeface

再解釋字體前先來(lái)了解下「typeface」和「font」的區(qū)別是什么？在很多時(shí)候，當(dāng)人們?cè)谡f(shuō)"font"時(shí)，他們實(shí)際上指的是"typeface"

Font 和 Typeface 這兩個(gè)概念，通常會(huì)被我們混淆，或者當(dāng)作近義詞。

當(dāng)然這是有一定歷史原因的，在西文印刷時(shí)代，typeface 是一個(gè)抽象的總體概念（它是一款"設(shè)計(jì)"），而 font 是這個(gè)概念受到幾個(gè)參數(shù)的制約而成的具象物體（它是一組具有確定大小和風(fēng)格的文字，是 typeface 的子集）

所以嚴(yán)格來(lái)說(shuō)，typeface 要翻譯成字型，而 font 要翻譯成字體，前者是一種設(shè)計(jì)，后者是具體的產(chǎn)品。例如 Helvetica 是一款 typeface，而 Helvetica Regular 就是一個(gè) font。

我們回到字體，這里我們稱它 Font，當(dāng)然也可以稱它為 Typeface，這些概念我們只要了解就好了。

字體是同一種外觀樣式，但排版尺寸不同的字體的集合，例如「SF-UI」里有不同粗細(xì)（Regular、Blod、Light）。

在移動(dòng)端產(chǎn)品設(shè)計(jì)中，大多數(shù)手機(jī)廠商都會(huì)使用平臺(tái)默認(rèn)的字體，所以在 UI 設(shè)計(jì)中我們一般會(huì)使用系統(tǒng)默認(rèn)的字體。

在一些產(chǎn)品設(shè)計(jì)中，為了體現(xiàn)產(chǎn)品屬性和品牌特征，往往會(huì)使用到特殊字體來(lái)作為主要文字，這種特殊字體通常需要在開(kāi)發(fā)的過(guò)程中把對(duì)應(yīng)字體嵌入到客戶端中。

2. 字體家族 FontFamily。

一個(gè)字體家族包含不同的字體，例如 Helvetica 就有超過(guò) 40 多個(gè)字體。這是為了在不同的場(chǎng)景中傳達(dá)信息而設(shè)計(jì)的人們?cè)诓煌氖褂脠?chǎng)景下表達(dá)合適的意思。

3. 字號(hào) FontSize

字號(hào)是文字的大小數(shù)值，在 web 端使用 px 來(lái)做為字號(hào)的單位，移動(dòng)端 iOS 的字號(hào)單位 pt，安卓的字號(hào)單位是 sp。

字號(hào)大小決定了信息的層級(jí)和主次關(guān)系，合理的字號(hào)排版會(huì)使界面信息清晰有序，相反，糟糕無(wú)序的字號(hào)使用就會(huì)讓界面的信息變得混亂，影響閱讀體驗(yàn)。

字號(hào)的大小使用是有文字所處的場(chǎng)景來(lái)決定的，但在界面設(shè)計(jì)中有會(huì)有一定的基礎(chǔ)限制。

以中文為例，在界面中最小的文字不應(yīng)小于 10pt，否則就會(huì)因?yàn)樘《荒芎芎玫淖R(shí)別，而英文和數(shù)字的最小字號(hào)限制則為 9pt。

那我們是如何確定 10pt 這個(gè)數(shù)值的，我們手機(jī)距離眼睛的閱讀距離（30cm）左右以及最佳閱讀角度（0.3），使用視角計(jì)算公式，我們能識(shí)別到的最低的文字大小為 h= 2*30·tan(0.3/2) ≈ 0.157cm ，

拿 iPhone X 的 ppi 458 為例，公式中的距離和高度的單位都是厘米，字體的單位是 pixel。因此我們還需要將二者之間做一輪轉(zhuǎn)換，完成轉(zhuǎn)換數(shù)值是 2.45（cm 到 inch）0.157cm=458*(0.157/2.54cm)= 20px。

4. 字階 Typographic Scale

從字號(hào)的使用中可以延伸出字階的概念，在傳統(tǒng)的平面和印刷設(shè)計(jì)中字階被用來(lái)營(yíng)造版面平衡，經(jīng)典印刷字階中的字體尺寸是保持一定韻律變化的，和古典的音階十分相似。

我們知道在為樂(lè)曲選擇不同的音階可以讓聽(tīng)眾產(chǎn)生不同的感受，那么我們選擇不同的字階同樣也會(huì)影響我們的視覺(jué)感受。

定義有規(guī)律的字階是構(gòu)建設(shè)計(jì)秩序感的基礎(chǔ)，在 UI 設(shè)計(jì)中元素單位需要遵循偶數(shù)原則，因?yàn)殚_(kāi)發(fā)工程上是使用一倍圖進(jìn)行布局，在@2x 和@3x 的適配過(guò)程中不會(huì)出現(xiàn)半像素。

這樣下來(lái)我們可以使用偶數(shù)來(lái)作為基數(shù)進(jìn)行遞增，如 2、4、6、8、10。這種以 2pt 為字階的階梯關(guān)系也能很好的區(qū)分出字體層級(jí)。

對(duì)于最大字號(hào)就沒(méi)有過(guò)多限制，一般標(biāo)題使用最大能達(dá)到 32pt，這種大字號(hào)的標(biāo)題或文字設(shè)計(jì)需要根據(jù)具體場(chǎng)景來(lái)制定。

5. 行高 lineHeight

在字體設(shè)計(jì)中行距等同于行高，也就是文字外邊框整體的高度，字體距框的上下空隙為半行距，行高是這個(gè)高度通常會(huì)大于字本身的高度，例如 14 的文字行高為 22。

在過(guò)往的 UI 字體設(shè)計(jì)中通常是用字體乘一個(gè)固定的倍數(shù)去定義行高。但在實(shí)際設(shè)計(jì)中，這樣的方式會(huì)有一個(gè)問(wèn)題，當(dāng)字體越大，行高也會(huì)越來(lái)越大。

Ant Design 嘗試從「自然律」的啟發(fā)定義了字體行高，并定義出行高的計(jì)算規(guī)律，也就是行高和字體之間都相差 8。感興趣的同學(xué)可以參考：https://zhuanlan.zhihu.com/p/32746810

有兩個(gè)關(guān)鍵點(diǎn)大家可以參考：

1. 設(shè)計(jì)師希望字體高度和行高之間能從靜態(tài)黃金比出發(fā)。
2. 但是基于設(shè)計(jì)經(jīng)驗(yàn)，同時(shí)不給布局造成壓力，我們希望行高的增長(zhǎng)速度能夠隨著字體的增長(zhǎng)逐漸趨向于緩慢，并且最終不要超過(guò) 1 倍。

Ant 這套字體在實(shí)際落地應(yīng)用中更多是用于 web 端，在移動(dòng)端中還有一些是段落文字的排版設(shè)計(jì)，這種場(chǎng)景中就需要單獨(dú)對(duì)字體進(jìn)行行高的設(shè)置。一般是根據(jù)場(chǎng)景文字的大小的 1.5-2.0 倍，這樣段落文本的閱讀就會(huì)比較舒適。

需要注意的是，英文的行高是基線與基線之間的距離，基線（baseline）是英文字體結(jié)構(gòu)中的概念，在 css 里文字的元素都是按基線來(lái)對(duì)齊的。西文基本行高是字號(hào)的 1.2 倍左右。

6. 行間距 spacing

說(shuō)到行高就不得不提行間距這件事，首先中英文行間距都是一行的最底部與另一行的最頂部的距離。但在字體排版中我們需要要拋棄掉行間距的使用。

原因是在中文字體中行間距 = 行高 – 字號(hào)，我們?cè)谠O(shè)計(jì)過(guò)程中需要盡量減少過(guò)多的屬性設(shè)置，僅通過(guò)行高來(lái)控制行間距，所以在文字行高的設(shè)定上我們就需要考慮多行顯示的效果。

7. 字重 FontWeight

字重是指文字筆畫的粗細(xì)，常規(guī)的字重會(huì)包含 4-6 種，例如細(xì)體、常規(guī)、粗體、斜體等幾種類型。

在開(kāi)發(fā)框架中 font-weight 的屬性值還會(huì)有 100-900 的數(shù)值，這也代表了字體的粗細(xì)程度，font-weight 屬性值也與字體的字重描述詞一一對(duì)應(yīng)。例如 normal 等價(jià)于 400，bold 等價(jià)于 700。

在 Figma 等設(shè)計(jì)軟件中我們一般遇到的字體都是使用一些通用的詞描述劃分其字重。

100 – Thin

200 – Extra Light (Ultra Light)

300 – Light

400 – Regular (Normal、Book、Roman)

500 – Medium

600 – Semi Bold (Demi Bold)

700 – Bold

800 – Extra Bold (Ultra Bold)

900 – Black (Heavy)

為了使文字在界面中更加穩(wěn)定，同時(shí)清晰有序。在多數(shù)情況下我們只使用 Regular、Medium 的兩種常規(guī)字重，在使用上需要和字號(hào)形成對(duì)應(yīng)關(guān)系，特殊情況下可以使用更粗或更細(xì)的字重來(lái)拉開(kāi)信息層級(jí)。

這里要著重說(shuō)明下安卓的字重使用，通常安卓使用的第一順位默認(rèn)字體字重僅 2 檔字重，如 Regular 和 Bold，所以在部分安卓機(jī)型上，字體會(huì)出現(xiàn)比較粗的情況。

所以在對(duì)接安卓開(kāi)發(fā)的過(guò)程中，可以調(diào)整 font-family 中的字體適配順位，優(yōu)先適配字重更全的字體，保證安卓端能夠展示 Medium 的字重 ，以優(yōu)化內(nèi)容可讀性。

8. x 高 x-height

在英文字體中，x 高是小寫字母 x 的高度，在 CSS 樣式中有一個(gè)單位叫 ex,就是基于 x 高的一種計(jì)量單位，1ex=小寫字母 x 的高度，也就是基線和主線之間的高度。

升部線、降部線：是英文字符的上限和下限。

基線 baseline：是西文字體設(shè)計(jì)與排版的概念，是既無(wú)升部也無(wú)降部的字符(如 x、e、z 等)坐落的一條線。

9. 字間距 Tracking

顧名思義，字間距是指字符與字符之間的水平距離。在西文排版中字間距是十分重要的參數(shù)，這是因?yàn)橛⑽淖帜傅膶挾仁遣煌模枰獎(jiǎng)討B(tài)調(diào)節(jié)字間距。

這個(gè)屬性在中文的排版中很少會(huì)用到，因?yàn)橹形牡淖址麉^(qū)域是以正方形進(jìn)行設(shè)計(jì)的，且在設(shè)計(jì)時(shí)就以已經(jīng)考慮到了字符與字符之間的最佳距離，只有一些比較特殊的場(chǎng)景會(huì)用到。

10. 字偶間距 Kerning

字偶間距也叫做「字距調(diào)整」，是在字間距的基礎(chǔ)上，為實(shí)現(xiàn)不同字偶（一對(duì)字符）可以有不同字間距的調(diào)整值。我們都知道，不同的字母外形不同，所以只有同樣的字間距是不協(xié)調(diào)的。

例如，「NA」間是標(biāo)準(zhǔn)的字間距，而「WA」由于 W 和 A 的形狀可以重疊，所以需要負(fù)字偶間距才能達(dá)到協(xié)調(diào)一致的外觀。

一般我們不需要更改字間距和字偶間距，因?yàn)樽煮w設(shè)計(jì)師已經(jīng)對(duì)他們做過(guò)了最優(yōu)處理。在單獨(dú)對(duì)字體設(shè)計(jì)時(shí)就需要考慮字偶間距，以達(dá)到更協(xié)調(diào)的視覺(jué)效果。

11. 比例字體和等寬字體

比例字體：一般是西文的字體會(huì)應(yīng)用到，比例字體根據(jù)字符外形設(shè)置不同字寬的字體，使得字體外形協(xié)調(diào)，可讀性更好。

等寬字體：我們中文可以理解就是等寬字體，因?yàn)橹形亩际堑葘挼姆綁K字，而英文的等寬字體經(jīng)常被用于顯示計(jì)算機(jī)代碼示例。

12. 全角與半角

全角是指一個(gè)字符占用兩個(gè)標(biāo)準(zhǔn)字符（英文）的位置。中文字符、全角的英文字符、國(guó)標(biāo) GB2312-1980 中的圖形符號(hào)、特殊符號(hào)都是全角字符。半角是指一個(gè)字符占用一個(gè)標(biāo)準(zhǔn)字符的位置。

通常情況下，英文字母、數(shù)字、符號(hào)等都是半角字符，而漢語(yǔ)、日語(yǔ)、及朝鮮文等文字都是全角。

在排版設(shè)計(jì)中時(shí)也一定要記得中文搭配全角符號(hào)，英文使用半角符號(hào)。否則會(huì)出現(xiàn)諸如「謝謝.」或者「t hanks?！惯@樣的錯(cuò)誤。

1. 體系化設(shè)計(jì)

在同一個(gè)產(chǎn)品中需要建立起體系化設(shè)計(jì)的思路，對(duì)主標(biāo)題、副標(biāo)題、常規(guī)文字、輔助信息等字體做統(tǒng)一的規(guī)劃，落地到具體應(yīng)用場(chǎng)景中再進(jìn)行微調(diào)。

建立體系化設(shè)計(jì)的思路有助于強(qiáng)化字體在落地的一致性問(wèn)題，減少不必要的樣式出現(xiàn)。

2. 少即是多

在視覺(jué)展現(xiàn)上用盡量少的樣式去達(dá)到設(shè)計(jì)目的。避免使用大量字階、顏色、字重去強(qiáng)調(diào)視覺(jué)重點(diǎn)或?qū)Ρ汝P(guān)系。減少字體類型的應(yīng)用，也能夠避免界面看起來(lái)零碎，使閱讀效率提高。

除字體外的其它元素設(shè)計(jì)也是同樣的道理，顏色、分割線、圖形，柵格等都需要遵循這個(gè)原則，避免樣式過(guò)多。

這樣做的好處是，在設(shè)計(jì)的過(guò)程中不同業(yè)務(wù)的設(shè)計(jì)師能夠很快的對(duì)齊，并且方便記憶，研發(fā)的效率也能夠提升。

3. 信息節(jié)奏感

在需要拉開(kāi)信息層級(jí)的時(shí)候可以嘗試有節(jié)奏感的字階，參考 Ant 的字號(hào)設(shè)定就是從傳統(tǒng)音階的韻律中提取了字號(hào)的階梯，這種階梯關(guān)系能夠使字號(hào)的對(duì)比之間產(chǎn)生一種微妙的韻律感。

節(jié)奏感在文字布局中也常常被應(yīng)用到，比如通過(guò)左對(duì)齊的方式能夠減量減少視線的移動(dòng)，從而使用戶專注于文本，減少閱讀的時(shí)間。

1. iOS 系統(tǒng)字體規(guī)范

在 iOS 系統(tǒng)中，中文和英文分別是兩套字體，中文是字「蘋方」。英文字體有兩套，分別是無(wú)襯線體 San Francisco (SF) 和襯線字體「NewYork」。

在中文字體環(huán)境中，我們使用蘋方就可以，蘋方中帶有英文字符，所以中英文混排不需要特意設(shè)置英文字體，統(tǒng)一使用蘋方就可以。

iOS 系統(tǒng)還為有閱讀大字體的需求的用戶提供了動(dòng)態(tài)調(diào)整的字體規(guī)范（系統(tǒng)字體顯示大小設(shè)置），蘋果官方字體可在 iOS 規(guī)范網(wǎng)站下載。

地址： https://developer.apple.com/fonts/

1. AndROId 系統(tǒng)字體規(guī)范

在 Android 系統(tǒng)中，為了更好的顯示效果，Goole 與 Adobe 聯(lián)合制作了「思源黑體」Noto 來(lái)作為中文默認(rèn)字體，英文字體則為「Roboto」。

Material Design 字體規(guī)范，包含了 5 種類型的字體使用范圍，包含展示性標(biāo)題、大標(biāo)題、標(biāo)題、正文、標(biāo)簽合。

在安卓陣營(yíng)中不少手機(jī)廠商還為自家的系統(tǒng)定制了字體，以請(qǐng)強(qiáng)化自身品牌

比如小米的「MiSans」：

OPPO 的「OPPO Sans」：

錘子手機(jī)的「Smartisan T 黑」：

2. 文本定義框

在 UI 設(shè)計(jì)軟件中，我們通常會(huì)使用定寬模式進(jìn)行排版，也就是需要固定文本框的寬度，這樣做的目的是方便開(kāi)發(fā)在查看設(shè)計(jì)稿的時(shí)候能夠清楚的理解文字的顯示區(qū)域。

文本框的高度則由支持多少行文字或者文字顯示區(qū)的高度來(lái)決定，比如我們?cè)O(shè)置一個(gè)支持兩行文字的標(biāo)題，每行高 22，那么文本框的高就為 22*2 = 44。

有一種情況在輸入框中，我們?cè)诒ＷC文字能夠被多露出半行時(shí)，需要將文字框高度增加半行，這樣在超出輸入?yún)^(qū)域時(shí)，用戶也能夠感知到可以滑動(dòng)。

3. 段間距

顧名思義，段間距就是段落與段落之間的距離。相信很多人在打字的時(shí)候是有這樣的習(xí)慣的，當(dāng)在輸入?yún)^(qū)域換段以后，會(huì)直接打一個(gè)回車增加段間距。

這是一種錯(cuò)誤的排版方式，我們?cè)陂L(zhǎng)文本排版的時(shí)候一定要進(jìn)行「段間距」 這個(gè)屬性設(shè)置，在開(kāi)發(fā)還原的時(shí)候也一定要對(duì)段間距進(jìn)行標(biāo)注。

基于親密性原則，段間距在設(shè)置的時(shí)候盡可能的小于行高，且段間距需要隨字號(hào)大小而設(shè)定，避免出現(xiàn)小字應(yīng)用上段間距過(guò)大而大字模式段間距又過(guò)小的問(wèn)題。

4. 文字顏色的使用

首先需要避免使用純黑色來(lái)作為字體顏色，純黑色在白色背景上顯示時(shí)對(duì)比度過(guò)大，看久了就會(huì)感覺(jué)疲勞，讓用戶產(chǎn)生焦慮情緒。

字顏色如果和背景顏色太接近就會(huì)難以閱讀。在深色背景上對(duì)比度過(guò)大也會(huì)降低可讀性。考慮到無(wú)障礙設(shè)計(jì)，參考 WCAG 2.0 的標(biāo)準(zhǔn)，文字與背景應(yīng)該保持至少 4.5:1 ( AA 級(jí)別）的對(duì)比度，大文本的對(duì)比度應(yīng)至少為 3.0:1。

對(duì)比度定義為系統(tǒng)顯示器上最亮顏色和最暗顏色之間的亮度差異。它是顯示性能最重要的指標(biāo)之一。對(duì)比度越高，顏色區(qū)分越容易清晰。

參考：Web 內(nèi)容可訪問(wèn)性指南 2.0

對(duì)比度測(cè)試：contrast-ratio Contrast

我們還可以嘗試在色彩中加入一些品牌色彩傾向，這樣在突出品牌氛圍的同時(shí)，還可以讓頁(yè)面看上去不那么死氣沉沉的。

使用不透明度：在彩色背景上盡量不要使用灰色文字，可以通過(guò)使用降低不透明度的白色或黑色文本來(lái)創(chuàng)建信息層級(jí)和對(duì)比度。

5. 標(biāo)點(diǎn)符號(hào)的設(shè)計(jì)

在中文排版規(guī)則中，為了保持閱讀順暢、體例一致，通常會(huì)有標(biāo)點(diǎn)避頭尾的規(guī)則。即有的標(biāo)點(diǎn)不能放在行首（如逗號(hào)、頓號(hào)、句號(hào)等），有的不能放在行尾（引號(hào)、前括號(hào)等）。

平面排版中處理遵守"先推入，后推出"原則，即不希望標(biāo)點(diǎn)符號(hào)出現(xiàn)在行首時(shí)，應(yīng)在已經(jīng)標(biāo)點(diǎn)擠壓的基礎(chǔ)上再次檢查是否有機(jī)會(huì)將其擠到前一行，如沒(méi)有擠壓機(jī)會(huì)再?gòu)那耙恍腥∽詈笠粋€(gè)字至下一行。

但"先推入，后推出"原則在 UI 場(chǎng)景中實(shí)現(xiàn)難度較大，意味著在判斷每個(gè)標(biāo)點(diǎn)位置的時(shí)候，還需要進(jìn)行多次邏輯判斷，技術(shù)成本太高。

因此我們以效率優(yōu)先，將"先推入，后推出"原則修改為「優(yōu)先推出式」標(biāo)點(diǎn)避頭尾，即從上一行推出一個(gè)字排在下行的行首，避免行首、行末出現(xiàn)禁排的標(biāo)點(diǎn)符號(hào)。

在標(biāo)題排版中還經(jīng)常會(huì)出現(xiàn)在最左側(cè)出現(xiàn)《書名號(hào)這樣的標(biāo)點(diǎn)符號(hào)，在默認(rèn)的字體標(biāo)點(diǎn)符號(hào)通常會(huì)和字體等寬，這樣就會(huì)導(dǎo)致文字左側(cè)會(huì)有比較大的空隙，影響閱讀節(jié)奏感。

這種問(wèn)題的處理方式一般是，將標(biāo)題最左側(cè)的標(biāo)點(diǎn)符號(hào)擠壓為半角的寬度，以保證文字有比較好的視覺(jué)呈現(xiàn)。

同樣如果在一行文字內(nèi)連續(xù)兩個(gè)標(biāo)點(diǎn)同時(shí)出現(xiàn)時(shí)，會(huì)導(dǎo)致文字中垂岸一大段空白，使文字過(guò)于跳躍。

這種問(wèn)題的處理方式是，當(dāng)連續(xù)出現(xiàn)兩個(gè)及以上的標(biāo)點(diǎn)時(shí)，擠壓第二位及以后的標(biāo)點(diǎn)為半角，縮減連續(xù)標(biāo)點(diǎn)的占位，減少文章中出現(xiàn)的"空洞"。

需要注意的是標(biāo)點(diǎn)符號(hào)字面分為"可調(diào)整"和"不可調(diào)整"兩類，其中不可調(diào)整的標(biāo)點(diǎn)禁止擠壓。

"可調(diào)整"的標(biāo)點(diǎn)符號(hào)可擠壓掉標(biāo)點(diǎn)不占位部分的空間。"不可調(diào)整"的是因?yàn)楸旧順?biāo)點(diǎn)就是半個(gè)字寬所以就不需要擠壓。

6. 信噪比理論

「信噪比」（Signal-to-Noise Ratio）原本是用在聲音和圖像領(lǐng)域的概念，比如，音響設(shè)備播放聲音時(shí)，機(jī)器本身也會(huì)產(chǎn)生噪音，能不能原汁原味地播出聲音，同時(shí)最大限度地掩蓋噪音，是衡量設(shè)備好壞的重要指標(biāo)。

同樣在界面設(shè)計(jì)中，用戶所看的內(nèi)容可以分為"有用的信息"和"造成干擾的信息"。我們?cè)谠O(shè)計(jì)時(shí)應(yīng)該減弱或剔除無(wú)用的"噪音"，使有用的"信號(hào)"突顯出來(lái)。

信噪比也跟人的視覺(jué)識(shí)別系統(tǒng)息息相關(guān)，當(dāng)大量的信息同時(shí)呈現(xiàn)在我們面前的時(shí)候，有時(shí)候我們會(huì)覺(jué)得很容易，一下子就可以找到有用的信息。有時(shí)候我們又會(huì)覺(jué)得很困難，要花一些時(shí)間才能找到，比如在一堆類似圖標(biāo)中，就很難找到自己想用的。

在關(guān)于視覺(jué)識(shí)別中有這樣一個(gè)實(shí)驗(yàn)，讓受試者從許多個(gè)「Ⅹ」里面挑出一個(gè)「○」，然后再讓他們從「┸」里面挑出一個(gè)「┼」，挑選O的速度比挑選┼的速度就慢很多。

這是因?yàn)樵谝欢癣?，○的形狀與X的差異較大，所以能夠被更快的識(shí)別，在界面設(shè)計(jì)中，對(duì)于不同類型的功能，我們可以采取使用不同的色彩來(lái)區(qū)分不同的功能，或者將某一個(gè)類型的功能聚合，這種方式可以幫助用戶更快的找到目標(biāo)功。

回到字體排版，我們結(jié)合"信噪比"的理論，文字排版中需要盡可能的突出主要信息，減弱次要信息的展示使信息清晰干凈。

7. 字體與 icon 搭配

字體與圖標(biāo)在很多場(chǎng)景中會(huì)搭配使用，我們?cè)谠O(shè)計(jì)時(shí)可以定義字號(hào)與圖標(biāo)大小的變量搭配規(guī)律，使文字與圖形保持更好的協(xié)調(diào)關(guān)系。

在標(biāo)準(zhǔn)文本框中，字體的高度與實(shí)際文字的上方和下方都有多余的空間，這個(gè)空間在實(shí)際開(kāi)發(fā)還原中經(jīng)常會(huì)遇到很多問(wèn)題。

為了解決這方面的煩惱，CSS Inline Layout Module Level 3 新增了一個(gè) leading-trim 和 text-edge 屬性。

可以讓我們刪除每一種字體中的額外間距，以便我們可以更好的計(jì)算相鄰塊元素之間的間距。請(qǐng)注意，采用修剪僅會(huì)影響文本框，它不會(huì)切斷其中的文本。

在中文排版中，我們也會(huì)遇到字體上下間距不一致的問(wèn)題，包括當(dāng)遇到不同的字體時(shí)，字體的行高也會(huì)不一致，當(dāng)我們?nèi)サ羯舷氯サ粑淖稚舷?padding 時(shí)就可以很省心的使文本垂直居中。

需要注意的是這個(gè)新 CSS 的規(guī)范還在編寫中，還未世界范圍的推進(jìn)，不過(guò)有「微軟」團(tuán)隊(duì)的扶持相信國(guó)際化也不會(huì)太遠(yuǎn)了。

在這之前，我們想要盡可能的解決字符多出的間距問(wèn)題，就需要手動(dòng)把文字行高與客戶端系統(tǒng)默認(rèn)行高保持一致?；蛘呤窃诳蛻舳酥行薷淖煮w的行高，使顯示的字體能夠和我們?cè)O(shè)計(jì)的字體行高保持一致。

Tokens 的意思是令牌，指令等，是一種計(jì)算機(jī)術(shù)語(yǔ)。在設(shè)計(jì)系統(tǒng)中，Design Token 則代表著設(shè)計(jì)變量，可以理解為封裝的視覺(jué)樣式參數(shù)。

Design Token 通過(guò)重新梳理歸納視覺(jué)樣式參數(shù)，并通過(guò)一套符合設(shè)計(jì)師、工程師理解的統(tǒng)一的語(yǔ)義化命名規(guī)則，代替前端代碼中的復(fù)雜代碼。

這樣可以方便設(shè)計(jì)師進(jìn)行統(tǒng)一的管理和擴(kuò)展，保證產(chǎn)品的一致性，也大大提升開(kāi)發(fā)效率。

Design Token 分為名稱和值兩部分。名稱一旦定下來(lái)，便不可改變，值則可以根據(jù)需要進(jìn)行調(diào)整和配置。

譬如我們規(guī)定在設(shè)計(jì)系統(tǒng)中字體大小的層級(jí)有四種: caption, body, headline, large, 在用代碼來(lái)實(shí)現(xiàn)的組件庫(kù)中，字體的大小只能取這四個(gè)類型，每個(gè)類型對(duì)應(yīng)于一個(gè)或多個(gè)特定的值。值的可配置化是設(shè)計(jì)系統(tǒng)客制化的重要組成部分。

簡(jiǎn)單來(lái)說(shuō)就是，比如正文的字號(hào)在普通顯示模式下是 14、在大字顯示模式下是 16，引用語(yǔ)義化文字，命名為 Font Body，開(kāi)發(fā)在實(shí)現(xiàn)的時(shí)候不需要具體寫出文字的代碼，只需要使用 Font Body，那么在普通和大字兩種模式下匹配不同的字號(hào)，這樣一套代碼就可以適配兩種模式了。

寫在最后

字體排版涉及的知識(shí)點(diǎn)真的非常多，很多點(diǎn)也只是簡(jiǎn)要的在這里說(shuō)了下，大家有想要探討的可以在評(píng)論區(qū)留言。

UI 字體與排版設(shè)計(jì)就分享到這里，希望對(duì)大家有所幫助，感謝閱讀。

作者：UX實(shí)驗(yàn)室