字體一直是 UI 設(shè)計(jì)中最重要的組成部分之一，而 UI 的字體設(shè)計(jì)運(yùn)用又和平面有很大的差異，所以也是新手需要優(yōu)先掌握的知識之一。

在這次的字體說明更新中，我們要以 Figma 的屬性欄為基礎(chǔ)展開說明，結(jié)合軟件的使用用更直觀簡潔的方式讓大家用最高效的方式掌握這些信息。

一、文字的基礎(chǔ)屬性認(rèn)識

文字的基礎(chǔ)屬性就是控制文字樣式輪廓和顯示效果的基本屬性類型，包括字體、字重、字號、字色、裝飾等。

1. 字體的選擇

屏幕中 UI 界面顯示的文本樣式源自系統(tǒng)安裝的字體文件，每個(gè)字體文件內(nèi)會(huì)記錄若干文字、符號的圖形，所以切換字體，就能得到不同的字體樣式。同時(shí)，每個(gè)字體文件還包含了不同的特性，會(huì)對其它屬性的設(shè)置產(chǎn)生關(guān)鍵的影響。

在 Figma 中進(jìn)行 UI 設(shè)計(jì)時(shí)，字體選擇主要根據(jù)面向的系統(tǒng)類型決定，以模擬真實(shí)的顯示情況，下面是不同系統(tǒng)中的中英文字體選擇：

如果設(shè)計(jì)的是中文界面，那么可以直接使用中文字體來輸出英文或數(shù)字，無須為一個(gè)段落中混排的英文單獨(dú)設(shè)置英文字體。只有在設(shè)計(jì)英文界面或者獨(dú)立的英文、數(shù)字信息上，可以切換成英文字體。

同時(shí)，安卓和網(wǎng)頁端的字體選擇僅是建議，因?yàn)椴煌蛻舳耸褂玫淖煮w類型是有差異的（小米、OPPO、華為等都用自己的字體），UI 設(shè)計(jì)過程無法確保一個(gè)字體能應(yīng)用到所有設(shè)備中，所以面向它們的設(shè)計(jì)只需要選擇常規(guī)的黑體類型作為示意即可。

2. 字重的選擇

字重是設(shè)置文本輪廓和筆畫粗細(xì)的選項(xiàng)，不同字體會(huì)附帶不同的字重選項(xiàng)（斜體也被算在字重選擇中），比如蘋方默認(rèn)包含 Ultralight、Thin、Light、Regular、Medium、Semibold 6種字重，而微軟雅黑默認(rèn)只有 Light、Regular、Bold 三種字重。

通常，中文的字重較少（蘋方6種），而英文的字重更多（SF Pro DISPlay 有18種）。同時(shí)中文的排版中，極細(xì)字體 Ultralight、Light 很少會(huì)用到，所以字重的選擇就很固定（更簡單），只需要遵照下面的規(guī)則即可：

1. 標(biāo)題字：Medium、Semibold
2. 一般文本：Regular
3. 注釋：Light/Regular

而在 Figma 還引入了一個(gè)比較特殊的字體設(shè)置方式，即字體變量 Font Variable，通過調(diào)整數(shù)值來更改字重、傾斜角、圓角等，但這需要字體文件的支持，不是所有字體都能使用這種方法進(jìn)行調(diào)節(jié)。

3. 字號的設(shè)置

字號就是文字大小設(shè)置，在 UI 設(shè)計(jì)中字號的設(shè)置也比較固定，只要確認(rèn)文本的類型和權(quán)重，就有對應(yīng)的字號選擇范圍，而不是憑感覺從小到大試過去。

主要的字號選擇范圍可以參考下面的規(guī)則：

1. 大標(biāo)題：16-24
2. 小標(biāo)題：14-16
3. 正文字號：14-16
4. 注釋文本：10-13

在字號的參數(shù)選擇上，不需要遵循偶數(shù)和4的倍數(shù)，可以使用奇數(shù)和質(zhì)數(shù)。同時(shí)，中文10號字以下基本已經(jīng)無法看清，不要輕易使用，而英文因?yàn)楣P畫比中文簡單，所以最小字號可以用到8左右。

4. 字色的設(shè)置

字色就是文字使用的色彩，在其它設(shè)計(jì)軟件中字色往往會(huì)在字體屬性設(shè)置欄里，但在 Figma 中字色的設(shè)置是在圖層的填充 Fill 選項(xiàng)中實(shí)現(xiàn)。

除了使用彩色字體外，常規(guī)文本通常填充的是 “中性色”，即黑白灰。當(dāng)我們把色彩模式切換成 HSB 以后，就可以以 B 值（灰度值）來設(shè)置字色，B 值越低則顏色越黑，反之則越白。

在白底中，字色從淺到深可以分為三檔，可以參考下面的規(guī)則：

1. 標(biāo)題/正文：B 值5-40
2. 次要文本：B 值40-60
3. 注釋文本：B 值60-80

要注意的是，實(shí)際設(shè)計(jì)中純黑文本的使用要慎重，因?yàn)槭謾C(jī)主流 Oled 屏的純黑色是不發(fā)光的，會(huì)產(chǎn)生比較特殊的視覺效果。

如果是設(shè)計(jì)黑底白字的模式，那么字色的調(diào)整通常就不是調(diào)整 B 值，而是一開始填充白色后，通過透明度的調(diào)節(jié)來實(shí)現(xiàn)字色的控制。

5. 裝飾設(shè)置

Figma 還提供了一些比較常規(guī)的文本裝飾設(shè)置 Decoration，主要包含下劃線和刪除線兩種。在強(qiáng)調(diào)或原價(jià)類型的文本中可以直接使用該設(shè)置完成劃線的添加，而不用我們單獨(dú)添加。

二、文字的排版屬性認(rèn)識

確認(rèn)完文字的樣式以后，還要設(shè)置文字的排版，而 Figma 中提供的文字排版選項(xiàng)主要有布局、對齊、行高、字距、段間距等基本選項(xiàng)。

1. 文本布局的設(shè)置

文本的布局設(shè)置顯示在 Figma 屬性欄中的 Layout 面板，包含自動(dòng)寬度、固定寬度、固定尺寸三種選項(xiàng)。理解它們的特點(diǎn)就要先認(rèn)識文本區(qū)域，任何文本的現(xiàn)實(shí)都只能顯示在文本區(qū)域內(nèi)，而布局控制的就是文本區(qū)域的尺寸特性。

1. 自動(dòng)寬度：默認(rèn)布局形式，在輸入文本后文本區(qū)域會(huì)自動(dòng)向右延長，主要在應(yīng)用在單行文本中。
2. 固定寬度：固定文本區(qū)域?qū)挾龋绻斎氲膬?nèi)容過多就會(huì)實(shí)現(xiàn)自動(dòng)換行，向下延長，主要應(yīng)用在多端長文本中。
3. 固定尺寸：固定文本區(qū)域的寬度和高度，不管輸入多少文本這個(gè)區(qū)域的尺寸都不變。通常會(huì)結(jié)合 Figma 字體基礎(chǔ)設(shè)置中的 Truncate Text 使用，文本超出時(shí)自動(dòng)使用省略號。主要用于標(biāo)題或簡介文本中。

2. 對齊的設(shè)置

對齊就是文本在文本區(qū)域內(nèi)的對齊方向，包含水平和垂直兩個(gè)方向的設(shè)置。其中水平方向的左、中、右對齊很好理解，根據(jù)場景中文本在區(qū)域內(nèi)左、中、右對齊的需要設(shè)置即可。

但是垂直方向的上、中、下設(shè)置，則有明確的條件，只有在文本區(qū)域使用自動(dòng)固定尺寸的模式下，才有設(shè)置的差異，否則自動(dòng)和定寬模式的文本區(qū)域沒有上下的空隙進(jìn)行對齊。

3. 行高的設(shè)置

行高是指文本單行顯示的高度，也是影響文本區(qū)域大小的關(guān)鍵因素。任何字體的默認(rèn)行高（auto）都是大于字號的，這才能保證一些特殊字符有顯示空間，且當(dāng)文字出現(xiàn)兩行以后上下留有縫隙。

因?yàn)槟J(rèn)行高的存在，所以文本區(qū)域必然會(huì)大于文字邊緣，在 UI 設(shè)計(jì)的常規(guī)情況下，是不會(huì)強(qiáng)行抹除這個(gè)間距進(jìn)行排版的，而是依舊使用文本區(qū)域?qū)R。

只有在特殊的價(jià)格或數(shù)字類型中，可以移除行高的縫隙方便排版，想要實(shí)現(xiàn)這樣的效果可以在 Vertical trim 選項(xiàng)中實(shí)現(xiàn)。

單行文本使用默認(rèn)行高即可，如果多行文本通常還需要增加行高才能便于閱讀。具體行高應(yīng)該設(shè)置成多大沒有絕對準(zhǔn)確的數(shù)值，如果沒有把握可以在設(shè)置在字號的 1.6 - 2倍之間，確保多行閱讀的體驗(yàn)。

4. 字距的設(shè)置

字距就是文字左右之間的距離，使用的單位是百分比（字號的）。在中文字體的排版中，是不需要使用字間距的，因?yàn)橹形牡奶匦允俏淖侄▽挘纬山y(tǒng)一的節(jié)奏。

但在英文排版上，字間距就必須要設(shè)置，因?yàn)橛⑽牡淖址麑挾炔灰唬枰刂谱址g距形成更穩(wěn)定的閱讀節(jié)奏。而因?yàn)樽痔柌煌?，人眼對字間距的感受也不一樣，所以不同字號要設(shè)置不同的字間距，沒有統(tǒng)一的數(shù)值。

如果在英文界面設(shè)計(jì)中不知道該怎么設(shè)置字間距，可以參考蘋果官方的字體樣式列表。

5. 段間距的設(shè)置

段間距是段落之間的間距設(shè)置，確保段落之間有一定的留白更有利于閱讀的體驗(yàn)。當(dāng)我們在一個(gè)文本區(qū)域內(nèi)輸入多段文本時(shí)（文章內(nèi)容），可以單獨(dú)通過該屬性的設(shè)置來實(shí)現(xiàn)段落間距的控制，而不是使用回車作為隔斷。

段間距的設(shè)置也沒有固定的標(biāo)準(zhǔn)，通常在行高的40%-80%之間，看具體效果和設(shè)計(jì)目標(biāo)決定。

雖然 Figma 還提供了其它排版細(xì)節(jié)的屬性設(shè)置，但上面5個(gè)是 UI 設(shè)計(jì)中最重要也最常用的5種，優(yōu)先掌握它們的知識和使用場景即可。

結(jié)尾

UI 字體設(shè)置要掌握的核心知識點(diǎn)就上面這些，建議大家就是強(qiáng)行背也要背下來，而不是在實(shí)際設(shè)計(jì)過程中“憑感覺”去設(shè)計(jì)，這樣做出來的界面字體漏洞百出，是沒辦法進(jìn)步的。

作者：超人的電話亭