如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
字體是界面設(shè)計(jì)中重要的構(gòu)成要素之一，它能輔助信息的傳遞，是文字的外在表現(xiàn)形式；字體還可以通過(guò)其獨(dú)有的藝術(shù)魅力，表達(dá)情感體驗(yàn)，并塑造品牌形象。
本文總結(jié)了字體設(shè)計(jì)的重要性、界面常用字體推薦以及國(guó)內(nèi)外權(quán)威設(shè)計(jì)體系中對(duì)字號(hào)、行高、字重的選擇和設(shè)置。如果你想對(duì)界面字體設(shè)計(jì)有更深一步地了解和運(yùn)用，本文將會(huì)提供一些幫助。
一、字體
1. 字體設(shè)計(jì)的重要性
輔助信息傳遞
文字是信息內(nèi)容的載體，是記錄思想、交流思想、承載語(yǔ)言的圖像或符號(hào)，而字體則是文字的外在形式特征，是文字的視覺(jué)風(fēng)格表現(xiàn)。合適的字體可以輔助文字，將信息清晰、準(zhǔn)確地傳遞給用戶。
表達(dá)情感體驗(yàn)
字體的藝術(shù)性體現(xiàn)在其完美的外在形式與豐富的內(nèi)涵之中。在文字信息傳遞給用戶之前，人們首先感受到的是字體帶來(lái)的視覺(jué)魅力以及情感表達(dá)。
塑造品牌形象
不同字體有著不同的風(fēng)格特征: 有的字體優(yōu)美清新、線條流暢；有的字體造型規(guī)整、充滿張力；還有的字體生動(dòng)活潑、色彩明快……根據(jù)產(chǎn)品的屬性選擇正確的字體，便能有效地塑造品牌形象。
2. 界面常用字體推薦
字體的選擇是由產(chǎn)品屬性或品牌特性的關(guān)鍵詞而決定。一般中文字體種類分為：黑體、宋體、仿宋、楷體等；英文字體種類分為：無(wú)襯線體、襯線體、意大利斜體、手寫(xiě)體、黑字體等。
中文字體推薦
線上中文字體推薦使用思源黑體、華文黑體、冬青黑體、微軟雅黑、蘋(píng)方-簡(jiǎn)、黑體-簡(jiǎn)、方正蘭亭黑。其中 iOS 系統(tǒng)默認(rèn)中文字體是「蘋(píng)方PingFang」，Android 系統(tǒng)中文字體使用「思源黑體Noto Sans CJK」。
介紹下「思源黑體」這款字體，它是由 Google 和 Adobe 合作開(kāi)發(fā)出來(lái)的，風(fēng)格介于現(xiàn)代和傳統(tǒng)之間，可以廣泛用于多種途徑，比如手機(jī)、平板、桌面的用戶界面、網(wǎng)頁(yè)瀏覽或者電子書(shū)閱讀等。它為人們帶來(lái)了愉悅和的信息閱讀體驗(yàn)，并且是免費(fèi)的。
英文字體推薦
線上英文字體推薦使用 San Francisco、Helvetica Neue、Roboto、Avenir Next、Open Sans。其中 iOS 系統(tǒng)默認(rèn)英文字體為「San Francisco」，Android 系統(tǒng)默認(rèn)英文字體為「Roboto」。
Helvetica 是一種被廣泛使用的西文字體，1957年由瑞士字體設(shè)計(jì)師設(shè)計(jì)，微軟常用的 Arial 字體也來(lái)自于它。
作為一款經(jīng)典的無(wú)襯線字體，Helvetica 在平面設(shè)計(jì)和商業(yè)上非常普及和成功，被認(rèn)為是現(xiàn)代主義設(shè)計(jì)理念的典范，其簡(jiǎn)潔樸素的線條風(fēng)格非常受追捧。
數(shù)字字體推薦
線上數(shù)字字體推薦使用 DIN、Core Sans D、Helvetica Neue。
DIN 起源于1995年的德國(guó)，無(wú)襯線字體，易用耐看、字形開(kāi)放，是設(shè)計(jì)師最愛(ài)的幾類字體之一，適合顯示比較長(zhǎng)的大號(hào)數(shù)字，但是小字號(hào)的情況下識(shí)別度較低。
Core Sans D 是由韓國(guó)設(shè)計(jì)師設(shè)計(jì)的一款無(wú)襯線字體，支持 Thin、Light、Regular、Medium、Bold 等類型字重，對(duì)大號(hào)數(shù)字的顯示效果不錯(cuò)，不過(guò)它是收費(fèi)字體。
Helvetica Neue 除了上文介紹的簡(jiǎn)潔樸素、中性嚴(yán)謹(jǐn)、沒(méi)有多余的修飾外，還是 Helvetica 的升級(jí)版，擁有了更多的字重，可以作為 iOS 和 Android 跨平臺(tái)數(shù)字字體使用。
二、字號(hào)
1. 關(guān)于字號(hào)
字號(hào)是界面設(shè)計(jì)中另一個(gè)重要的元素，字號(hào)大小決定了信息的層級(jí)和主次關(guān)系，合理有序的字號(hào)設(shè)置能讓界面信息清晰易讀、層次分明；相反，糟糕無(wú)序的字號(hào)使用會(huì)讓界面混亂不堪，影響閱讀體驗(yàn)。
2. 字號(hào)的選擇
字號(hào)的選擇，可以遵循 iOS 、Material Design、Ant Design 等國(guó)內(nèi)外權(quán)威設(shè)計(jì)體系中的字號(hào)規(guī)則，也可以根據(jù)產(chǎn)品的特點(diǎn)自行定義。
iOS 字號(hào)規(guī)則
在 iOS11 系統(tǒng)中，使用 San Francisco 作為系統(tǒng)英文字體，包含了以下幾種字號(hào)的文本樣式：
-
11pt / 12pt Caption 說(shuō)明文字
-
13pt Footnote 腳注
-
15pt Subhead 副標(biāo)題
-
16pt Callout 標(biāo)注
-
17pt Body / Headline 正文 / 模塊標(biāo)題
-
20pt / 22pt / 28pt Title 頁(yè)面標(biāo)題
-
34pt Large Title 頁(yè)面大標(biāo)題
需要注意的是，San Francisco 字體有兩種模式：文本模式 SF Pro Text 和展示模式 SF Pro Display，文本模式適用于字號(hào)小于 20pt 的文字，展示模式適用于字號(hào)大于等于 20pt 的文字。
Material Design 字號(hào)規(guī)則
在 Material Design 設(shè)計(jì)體系中，使用 Roboto 作為英文字體，規(guī)定了以下文字排版的常用字號(hào)：
-
12sp 小字提示
-
14sp（桌面端 13sp）正文 / 按鈕文字
-
16sp（桌面端 15sp）小標(biāo)題
-
20sp Appbar 文字
-
24sp 大標(biāo)題
-
34sp / 45sp / 56sp / 112sp 超大號(hào)文字
長(zhǎng)篇幅正文，每行建議 60 字符左右，短文本建議每行 30 字符左右。
Ant Design 字號(hào)規(guī)則
Ant Design 受到5音階以及自然律的啟發(fā)定義了10種不同的字號(hào)，從小到大依次為: 12px、14px、16px、20px、24px、30px、38px、46px、56px、68px。
建議主要字號(hào)為 14px，其余字號(hào)的選擇可根據(jù)具體情況進(jìn)行自由的定義，盡量控制在3-5種之間，保持克制的原則。
Kiwi 字號(hào)規(guī)則
Kiwi 是餓了么的中后臺(tái)設(shè)計(jì)語(yǔ)言，致力于打造出能夠「了解、洞察、溫暖、激勵(lì)用戶」的產(chǎn)品。
在 Kiwi Web 中，規(guī)定最小字號(hào)為 12px，主要文本字號(hào)為 14px，最大字號(hào)為 46px。
三、行高
1. 關(guān)于行高
行高可以理解為一個(gè)包裹在字體外面的無(wú)形的框，字體距框的上下空隙為半行距。
參考 W3C 原理，眼睛到屏幕的距離 25cm 為最佳閱讀距離。
西文的基本行高通常是字號(hào)的 1.2 倍左右。而中文因?yàn)樽址軐?shí)且高度一致，沒(méi)有西文的上伸部和下延部來(lái)創(chuàng)造行間空隙，所以一般行高需要更大，根據(jù)不同人群的特點(diǎn)（兒童、年輕人、老年人）以及使用環(huán)境，可達(dá)到1.5至2倍甚至更大。
2. 行高的設(shè)置
iOS 行高設(shè)置
Apple 官方的 iOS 字號(hào)與行高對(duì)應(yīng)關(guān)系如下（@1x倍率）：
Fluent Design 行高設(shè)置
Microsoft 官方的 Fluent Design 字號(hào)與行高對(duì)應(yīng)關(guān)系如下（使用字體 Segoe UI）：
Ant Design 行高設(shè)置
螞蟻金服的 Ant Design 字號(hào)與行高對(duì)應(yīng)關(guān)系如下（優(yōu)先使用系統(tǒng)默認(rèn)字體）：
行高計(jì)算公式：L = F + 8。其中 L 是行高（Line Height），F(xiàn) 是字號(hào)（Font Size），F(xiàn) ≥ 12。
四、字重
1. 關(guān)于字重
字重是指字體的粗細(xì)，一般在字體家族名后面注明的 Thin、Light、Regular、Medium、Bold、Heavy 等都是字重名稱。越來(lái)越多的產(chǎn)品界面需要通過(guò)字重來(lái)拉開(kāi)信息層次，當(dāng)下主流趨勢(shì) iOS11 大標(biāo)題風(fēng)格就是通過(guò)字重來(lái)拉開(kāi)信息層級(jí)的。
不同的字重體現(xiàn)不同的層級(jí)關(guān)系和情緒感受，細(xì)的字體給人以細(xì)膩、輕盈的感覺(jué)，而粗體則給人莊重和嚴(yán)肅的感受，所以在定義字體規(guī)范時(shí)候需要考慮什么場(chǎng)景用什么字重，從而保持良好閱讀體驗(yàn)。
2. 字重的設(shè)置
字重的設(shè)置同樣基于秩序、穩(wěn)定、克制的原則。為了統(tǒng)一整體效果，一般情況下使用兩種字重為佳，例如只出現(xiàn) Regular 以及 Medium 這兩種字體粗細(xì)，特殊情況下可以使用更粗或更細(xì)的字重進(jìn)一步拉開(kāi)信息層級(jí)。
當(dāng)字號(hào)大小為 12-18pt 時(shí)，使用 Regular；20-26pt 時(shí)，使用 Light；28-34pt 時(shí)，使用 Thin；當(dāng)字號(hào)大小超過(guò) 34pt 時(shí)，建議使用 Ultralight。
以上是按字號(hào)與字重反比的規(guī)則設(shè)置，即字號(hào)越大，字重越輕。當(dāng)然也可以按正比的規(guī)則或者自定義規(guī)則，具體還是要根據(jù)產(chǎn)品的定位和用戶的特點(diǎn)來(lái)設(shè)置，以保證信息層級(jí)清晰明了為準(zhǔn)。
藍(lán)藍(lán)設(shè)計(jì)( cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
