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

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

一、文字的基礎屬性認識

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

1. 字體的選擇

屏幕中 UI 界面顯示的文本樣式源自系統安裝的字體文件，每個字體文件內會記錄若干文字、符號的圖形，所以切換字體，就能得到不同的字體樣式。同時，每個字體文件還包含了不同的特性，會對其它屬性的設置產生關鍵的影響。

在 Figma 中進行 UI 設計時，字體選擇主要根據面向的系統類型決定，以模擬真實的顯示情況，下面是不同系統中的中英文字體選擇：

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

同時，安卓和網頁端的字體選擇僅是建議，因為不同客戶端使用的字體類型是有差異的（小米、OPPO、華為等都用自己的字體），UI 設計過程無法確保一個字體能應用到所有設備中，所以面向它們的設計只需要選擇常規的黑體類型作為示意即可。

2. 字重的選擇

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

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

標題字：Medium、Semibold一般文本：Regular注釋：Light/Regular

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

3. 字號的設置

字號就是文字大小設置，在 UI 設計中字號的設置也比較固定，只要確認文本的類型和權重，就有對應的字號選擇范圍，而不是憑感覺從小到大試過去。

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

大標題：16-24小標題：14-16正文字號：14-16注釋文本：10-13

在字號的參數選擇上，不需要遵循偶數和4的倍數，可以使用奇數和質數。同時，中文10號字以下基本已經無法看清，不要輕易使用，而英文因為筆畫比中文簡單，所以最小字號可以用到8左右。

4. 字色的設置

字色就是文字使用的色彩，在其它設計軟件中字色往往會在字體屬性設置欄里，但在 Figma 中字色的設置是在圖層的填充 Fill 選項中實現。

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

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

標題/正文：B 值5-40次要文本：B 值40-60注釋文本：B 值60-80

要注意的是，實際設計中純黑文本的使用要慎重，因為手機主流 Oled 屏的純黑色是不發光的，會產生比較特殊的視覺效果。

如果是設計黑底白字的模式，那么字色的調整通常就不是調整 B 值，而是一開始填充白色后，通過透明度的調節來實現字色的控制。

5. 裝飾設置

Figma 還提供了一些比較常規的文本裝飾設置 Decoration，主要包含下劃線和刪除線兩種。在強調或原價類型的文本中可以直接使用該設置完成劃線的添加，而不用我們單獨添加。

二、文字的排版屬性認識

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

1. 文本布局的設置

文本的布局設置顯示在 Figma 屬性欄中的 Layout 面板，包含自動寬度、固定寬度、固定尺寸三種選項。理解它們的特點就要先認識文本區域，任何文本的現實都只能顯示在文本區域內，而布局控制的就是文本區域的尺寸特性。

自動寬度：默認布局形式，在輸入文本后文本區域會自動向右延長，主要在應用在單行文本中。固定寬度：固定文本區域寬度，如果輸入的內容過多就會實現自動換行，向下延長，主要應用在多端長文本中。固定尺寸：固定文本區域的寬度和高度，不管輸入多少文本這個區域的尺寸都不變。通常會結合 Figma 字體基礎設置中的 Truncate Text 使用，文本超出時自動使用省略號。主要用于標題或簡介文本中。

2. 對齊的設置

對齊就是文本在文本區域內的對齊方向，包含水平和垂直兩個方向的設置。其中水平方向的左、中、右對齊很好理解，根據場景中文本在區域內左、中、右對齊的需要設置即可。

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

3. 行高的設置

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

因為默認行高的存在，所以文本區域必然會大于文字邊緣，在 UI 設計的常規情況下，是不會強行抹除這個間距進行排版的，而是依舊使用文本區域對齊。

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

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

4. 字距的設置

字距就是文字左右之間的距離，使用的單位是百分比（字號的）。在中文字體的排版中，是不需要使用字間距的，因為中文的特性是文字定寬，形成統一的節奏。

但在英文排版上，字間距就必須要設置，因為英文的字符寬度不一，需要控制字符間距形成更穩定的閱讀節奏。而因為字號不同，人眼對字間距的感受也不一樣，所以不同字號要設置不同的字間距，沒有統一的數值。

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

5. 段間距的設置

段間距是段落之間的間距設置，確保段落之間有一定的留白更有利于閱讀的體驗。當我們在一個文本區域內輸入多段文本時（文章內容），可以單獨通過該屬性的設置來實現段落間距的控制，而不是使用回車作為隔斷。

段間距的設置也沒有固定的標準，通常在行高的40%-80%之間，看具體效果和設計目標決定。

雖然 Figma 還提供了其它排版細節的屬性設置，但上面5個是 UI 設計中最重要也最常用的5種，優先掌握它們的知識和使用場景即可。

結尾

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

作者：超人的電話亭

---