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

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

更多字體設(shè)計(jì)干貨：

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

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

1. 字體的選擇

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

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

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

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

2. 字重的選擇

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

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

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

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

3. 字號(hào)的設(shè)置

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

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

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

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

4. 字色的設(shè)置

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

除了使用彩色字體外，常規(guī)文本通常填充的是 “中性色”，即黑白灰。當(dāng)我們把色彩模式切換成 HSB 以后，就可以以 B 值（灰度值）來(lái)設(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)生比較特殊的視覺(jué)效果。

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

5. 裝飾設(shè)置

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

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

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

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

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

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

2. 對(duì)齊的設(shè)置

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

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

3. 行高的設(shè)置

行高是指文本單行顯示的高度，也是影響文本區(qū)域大小的關(guān)鍵因素。任何字體的默認(rèn)行高（auto）都是大于字號(hào)的，這才能保證一些特殊字符有顯示空間，且當(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ù)字類(lèi)型中，可以移除行高的縫隙方便排版，想要實(shí)現(xiàn)這樣的效果可以在 Vertical trim 選項(xiàng)中實(shí)現(xiàn)。

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

4. 字距的設(shè)置

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

但在英文排版上，字間距就必須要設(shè)置，因?yàn)橛⑽牡淖址麑挾炔灰?，需要控制字符間距形成更穩(wěn)定的閱讀節(jié)奏。而因?yàn)樽痔?hào)不同，人眼對(duì)字間距的感受也不一樣，所以不同字號(hào)要設(shè)置不同的字間距，沒(méi)有統(tǒng)一的數(shù)值。

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

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

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

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

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

結(jié)尾

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

還有什么其它問(wèn)題也可以在留言中分享出來(lái)。

我們下篇再賤~

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」