字體是界面設計中重要的構成要素之一，它能輔助信息的傳遞，是文字的外在表現形式；字體還可以通過其獨有的藝術魅力，表達情感體驗，并塑造品牌形象。本文總結了字體設計的重要性、界面常用字體推薦以及國內外權威設計體系中對字號、行高、字重的選擇和設置。如果你想對界面字體設計有更深一步地了解和運用，本文將會提供一些幫助。

一、字體

1. 字體設計的重要性

輔助信息傳遞

文字是信息內容的載體，是記錄思想、交流思想、承載語言的圖像或符號，而字體則是文字的外在形式特征，是文字的視覺風格表現。合適的字體可以輔助文字，將信息清晰、準確地傳遞給用戶。

表達情感體驗

字體的藝術性體現在其完美的外在形式與豐富的內涵之中。在文字信息傳遞給用戶之前，人們首先感受到的是字體帶來的視覺魅力以及情感表達。

塑造品牌形象

不同字體有著不同的風格特征: 有的字體優美清新、線條流暢；有的字體造型規整、充滿張力；還有的字體生動活潑、色彩明快… 根據產品的屬性選擇正確的字體，便能有效地塑造品牌形象。

2. 界面常用字體推薦

字體的選擇是由產品屬性或品牌特性的關鍵詞而決定。一般中文字體種類分為：黑體、宋體、仿宋、楷體等；英文字體種類分為：無襯線體、襯線體、意大利斜體、手寫體、黑字體等。

中文字體推薦

線上中文字體推薦使用 思源黑體、華文黑體、冬青黑體、微軟雅黑、蘋方-簡、黑體-簡、方正蘭亭黑。其中 iOS 系統默認中文字體是「蘋方 (PingFang)」，Android 系統中文字體使用「思源黑體 (Noto Sans CJK)」。

介紹下「思源黑體」這款字體，它是由 Google 和 Adobe 合作開發出來的，風格介于現代和傳統之間，可以廣泛用于多種途徑，比如手機、平板、桌面的用戶界面、網頁瀏覽或者電子書閱讀等。它為人們帶來了愉悅和高效的信息閱讀體驗，并且是免費的。

英文字體推薦

線上英文字體推薦使用 San Francisco、Helvetica Neue、Roboto、Avenir Next、Open Sans?。其中 iOS 系統默認英文字體為「San Francisco」，Android 系統默認英文字體為：「Roboto」。

Helvetica 是一種被廣泛使用的西文字體，1957 年由瑞士字體設計師設計，微軟常用的 Arial 字體也來自于它。作為一款經典的無襯線字體，Helvetica 在平面設計和商業上非常普及和成功，被認為是現代主義設計理念的典范，其簡潔樸素的線條風格非常受追捧。

數字字體推薦

線上數字字體推薦使用 DIN、Core Sans D、Helvetica Neue。

DIN 起源于 1995 年的德國，無襯線字體，易用耐看、字形開放，是設計師最愛的幾類字體之一，適合顯示比較長的大號數字，但是小字號的情況下識別度較低。

Core Sans D 是由韓國設計師設計的一款無襯線字體，支持 Thin、Light、Regular、Medium、Bold 等類型字重，對大號數字的顯示效果不錯，不過它是收費字體。

Helvetica Neue 除了上文介紹的簡潔樸素、中性嚴謹、沒有多余的修飾外，還是 Helvetica 的升級版，擁有了更多的字重，可以作為 iOS 和 Android 跨平臺數字字體使用。

二、字號

1. 關于字號

字號是界面設計中另一個重要的元素，字號大小決定了信息的層級和主次關系，合理有序的字號設置能讓界面信息清晰易讀、層次分明；相反，糟糕無序的字號使用會讓界面混亂不堪，影響閱讀體驗。

2. 字號的選擇

字號的選擇，可以遵循 iOS 、Material Design、Ant Design 等國內外權威設計體系中的字號規則，也可以根據產品的特點自行定義。

iOS 字號規則

在 iOS11 系統中，使用 San Francisco 作為系統英文字體，包含了以下幾種字號的文本樣式：

• 11pt/12pt Caption (說明文字)
• 13pt Footnote (腳注)
• 15pt Subhead (副標題)
• 16pt Callout (標注)
• 17pt Body/Headline (正文/模塊標題)
• 20pt/22pt/28pt Title (頁面標題)
• 34pt Large Title (頁面大標題)

需要注意的是，San Francisco 字體有兩種模式: 文本模式 SF Pro Text 和展示模式 SF Pro Display，文本模式適用于字號小于 20pt 的文字，展示模式適用于字號大于等于 20pt 的文字。

Material Design 字號規則

在 Material Design 設計體系中，使用 Roboto 作為英文字體，規定了以下文字排版的常用字號：

• 12sp 小字提示
• 14sp (桌面端 13sp) 正文/按鈕文字
• 16sp (桌面端 15sp) 小標題
• 20sp Appbar 文字
• 24sp 大標題
• 34sp/45sp/56sp/112sp 超大號文字

長篇幅正文，每行建議 60 字符左右，短文本建議每行 30 字符左右。

Ant Design 字號規則

Ant Design 受到 5 音階以及自然律的啟發定義了 10 種不同的字號，從小到大依次為：12px、14px、16px、20px、24px、30px、38px、46px、56px、68px。

建議主要字號為 14px，其余字號的選擇可根據具體情況進行自由的定義，盡量控制在 3-5 種之間，保持克制的原則。

Kiwi 字號規則

Kiwi 是餓了么的中后臺設計語言，致力于打造出能夠「了解、洞察、溫暖、激勵用戶」的產品。在 Kiwi Web 中，規定最小字號為 12px，主要文本字號為 14px，最大字號為 46px。

三、行高

1. 關于行高

行高可以理解為一個包裹在字體外面的無形的框，字體距框的上下空隙為半行距。

參考 W3C 原理，眼睛到屏幕的距離 25cm 為最佳閱讀距離。西文的基本行高通常是字號的 1.2 倍左右。而中文因為字符密實且高度一致，沒有西文的上伸部和下延部來創造行間空隙，所以一般行高需要更大，根據不同人群的特點 (兒童、年輕人、老年人) 以及使用環境，可達到 1.5 至 2 倍甚至更大。

2. 行高的設置

iOS 行高設置

Apple 官方的 iOS 字號與行高對應關系如下 (@1x倍率)：

Fluent Design 行高設置

Microsoft 官方的 Fluent Design 字號與行高對應關系如下 (使用字體 Segoe UI)：

Ant Design 行高設置

螞蟻金服的 Ant Design 字號與行高對應關系如下 (優先使用系統默認字體)：

行高計算公式: L = F + 8。其中 L 是行高 (Line Height)，F 是字號 (Font Size) ，F ≥ 12

四、字重

1. 關于字重

字重是指字體的粗細，一般在字體家族名后面注明的 Thin、Light、Regular、Medium、Bold、Heavy 等都是字重名稱。越來越多的產品界面需要通過字重來拉開信息層次，當下主流趨勢 iOS11 大標題風格就是通過字重來拉開信息層級的。

不同的字重體現不同的層級關系和情緒感受，細的字體給人以細膩、輕盈的感覺，而粗體則給人莊重和嚴肅的感受，所以在定義字體規范時候需要考慮什么場景用什么字重，從而保持良好閱讀體驗。

2. 字重的設置

字重的設置同樣基于秩序、穩定、克制的原則。為了統一整體效果，一般情況下使用兩種字重為佳，例如只出現 Regular 以及 Medium 這兩種字體粗細，特殊情況下可以使用更粗或更細的字重進一步拉開信息層級。

當字號大小為 12-18pt 時，使用 Regular；20-26pt 時，使用 Light；28-34pt 時，使用 Thin；當字號大小超過 34pt 時，建議使用 Ultralight。

以上是按字號與字重反比的規則設置，即字號越大，字重越細。當然也可以按正比的規則或者自定義規則，具體還是要根據產品的定位和用戶的特點來設置，以保證信息層級清晰明了為準。

本文到此就要告一段落了，如果對你有一點幫助就請點個贊吧~ 感謝你的閱讀~

作者：Neil彭彭，公眾號：彭彭設計筆記，不定期更新 UI/UX 設計類精品文章

本文由 @Neil彭彭 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖由作者提供