字體是界面設(shè)計(jì)的基石

字體是排版中最重要的元素，對(duì)用戶的閱讀體驗(yàn)有著至關(guān)重要的作用。一般來說，設(shè)計(jì)師需要了解的字體通常有中文字體和西文字體兩種。西文字體由來已久，從最早的羅馬字體到現(xiàn)在蘋果手機(jī)中的SF-UI字體，經(jīng)歷了許多設(shè)計(jì)上的變革。而中文字體的發(fā)展并沒有西文字體那么順利，數(shù)量上也遠(yuǎn)遠(yuǎn)落后于其他字體。但中國設(shè)計(jì)正在崛起，我們也看到越來越多的設(shè)計(jì)團(tuán)隊(duì)和設(shè)計(jì)師加入字體設(shè)計(jì)的隊(duì)伍，數(shù)量上正在呈指數(shù)級(jí)別增加。

設(shè)計(jì)是一門非常嚴(yán)謹(jǐn)?shù)膶W(xué)科，里面蘊(yùn)含了很多道理，就連最基礎(chǔ)的字體選擇和排版，都經(jīng)過了將近千年的發(fā)展和演變，有非常多的專業(yè)知識(shí)。像平面設(shè)計(jì)一樣，在UI設(shè)計(jì)中字體的使用也有相應(yīng)的規(guī)范，設(shè)計(jì)師應(yīng)懂得這些基礎(chǔ)知識(shí)，才能將字體為自己所用。

字體的那些屬性

• Font 中文翻譯為「字型」，是指字的粗細(xì)、寬度和樣式，是一套具有同樣風(fēng)格和尺寸的字形。例如「Regular_16pt_SF-UI」。
• Typeface 中文翻譯為「字體」，是指一整套的字形，一個(gè)或多個(gè)字型的多尺寸的集合，例如「SF-UI」里有不同粗細(xì)（Regular、Blod、Light）和不同寬度（12pt、14pt、20pt）。
• Glyph 中文翻譯為「字形」，是指單個(gè)字的形體或是字體的骨骼。 同一字可以有不同的字形，而不影響其表達(dá)的意思，例如漢字中的「令」字，第三筆可以是一點(diǎn)或一撇， 最末兩筆可以作「ㄗ」或「マ」。

1. 族類 GenericFamily

族類就是不同字體類型，例如阿里巴巴普惠體、方正新書宋、站酷酷黑體等。

而這些眾多字體又可分為「襯線體」和「無襯線體」。

襯線體

宋體就是襯線體，特點(diǎn)就是筆畫開始和末端的地方都有額外的裝飾，且筆畫的粗細(xì)有所不同。在傳統(tǒng)的正文印刷中，普遍認(rèn)為襯線字體能帶來更加的可讀性。常見的襯線體有宋體、Times New Roman、Georgia等。

襯線體一般在APP中比較少見，文字閱讀類偏愛這種襯線體，例如「單讀」，大標(biāo)題用的是「華康標(biāo)宋體」、正文內(nèi)容用的是「蘋方-纖細(xì)」而英文用的是「XCross Traditional Bold」

黑體

黑體是無襯線字體，特點(diǎn)是筆畫沒有額外的裝飾，且筆畫的粗細(xì)差不多。相比嚴(yán)肅的襯線體，簡單干凈的無襯線體給人一種休閑輕松的感覺。因此大多數(shù)App都是使用黑體作為默認(rèn)字體。如冬青黑體、思源黑體、Myriad等。

2. 字族 FontFamily

一個(gè)族類包含不同的字體，然而一個(gè)字體又可能有好幾種字族。如果電腦安裝了Helvetica，在Sketch字體選擇器中會(huì)發(fā)現(xiàn)超過40多個(gè)前綴是Helvetica的字族。這是為了協(xié)助人們?cè)诓煌氖褂脠鼍跋卤磉_(dá)合適的意思。

知識(shí)點(diǎn)：

基本字族包括細(xì)體、標(biāo)準(zhǔn)、粗體、斜體，值得注意的是，斜體字常用在引用文本上，代表「本段文字引用的是另一個(gè)著作」的含義。

例如：「若我們能以滿懷新鮮的眼神去觀照日常，「設(shè)計(jì)」的意義定會(huì)超越技術(shù)的層面，為我們的生活觀和人生觀注入力量。」（引自原研哉的《設(shè)計(jì)中的設(shè)計(jì)》）

3. X-height（X字高）

在西文字體中，x高度是指字母的基本高度，就是基線和主線之間的距離。它指一個(gè)字體中小寫字母的x高度，在現(xiàn)代字體設(shè)計(jì)領(lǐng)域，x高度代表了一個(gè)字體的設(shè)計(jì)因素，因此在一些場合字母x本身并不完全等于x字高。

除了字母a、c、e、m、n、o等高度一樣，還有一些小寫字母的字高都比x字高要大，并分為兩類：一是含有升部的字母，字母筆畫含有向上部分，如字母b、d、h；另一類是含有降部的字母，字母的筆畫向下超過了基線，如字母g、p、q。

4. 字號(hào) Font-size

字號(hào)就是字體大小，通常在網(wǎng)頁端使用px作為字號(hào)的單位。移動(dòng)端興起后，iOS字體單位是pt，Android是sp。

以iOS為例，正文字號(hào)不應(yīng)小于11pt，這樣才能被正常閱讀，建議在14-18pt之間。在使用較大的字體來獲得更好的易讀性的同時(shí)，我們也應(yīng)相應(yīng)地減小字體的字重，考慮Light、Thin，因?yàn)檫^重的字體會(huì)太過醒目，影響其他內(nèi)容的顯示效果。

當(dāng)字體大小為12-18pt時(shí)，建議使用Regular，18-24pt時(shí)，使用Light，24-32pt,使用Thin，當(dāng)字體大小超過32pt時(shí)，建議使用Ultralight。

字號(hào)大小決定了信息的層級(jí)和主次關(guān)系，合理有序的字號(hào)設(shè)置能讓界面信息清晰易讀、層次分明；相反，糟糕無序的字號(hào)使用會(huì)讓界面混亂不堪，影響閱讀體驗(yàn)。

設(shè)計(jì)中的最小字號(hào)

我們都知道在界面設(shè)計(jì)中最小字號(hào)不能低于20px，那是因?yàn)椋Ｇ闆r下，在手機(jī)距離眼睛30cm左右，使用視角計(jì)算公式，我們能識(shí)別到的最低的文字大小為h= 2*30·tan(0.3/2) ≈ 0.157cm ，拿我們經(jīng)常使用iPhone7的尺寸1334×750為例。iPhone7的dpi為324，也就是一英寸上顯示324個(gè)像素，1英寸為2.54cm，那么0.157cm=324*(0.157/2.54cm)= 20px。

字號(hào)的基數(shù)關(guān)系

我們?cè)谧鲈O(shè)計(jì)時(shí)，字號(hào)的單位最好使用一個(gè)基數(shù)作為倍增，如2、4、6、8、10 或者3、6、9、12。但其實(shí)我們?cè)谧鲆苿?dòng)端設(shè)計(jì)時(shí)，單位需要遵循偶數(shù)原則，因?yàn)殚_發(fā)中的單位是以一倍圖的基數(shù)來進(jìn)行計(jì)算。那么其實(shí)在制定字體規(guī)范中，使用2為單位會(huì)導(dǎo)致字號(hào)過多，且2號(hào)字體的差異化不大。所以在字號(hào)方面我們使用4作為單位是比較合適的：一是適配后在@2x跟@3x不會(huì)出現(xiàn)半像素，二是使用4為單位，能滿足字體大小的均衡。

5. 字重 FontWeight

Weight，中文翻譯為「字重」，是指字體筆畫的粗細(xì)，字體中很重要一個(gè)概念，不同字重傳遞出來視覺感受完全不一樣。一般在字體家族名后面注名Thin、Light、Regular、Blod、Black、Heavy等。不同的字體廠商劃分字重各有不同，例如「蘋方」字體就有6種不同的字重。

一般都有細(xì)體、正常、粗體三種基本字族。在應(yīng)用場景上，通?！讣?xì)體」多用于超大號(hào)字體；「正常」用于正文內(nèi)容；「粗體」表示強(qiáng)調(diào)，多用于標(biāo)題；

兩種字重屬性

輕字重：傳遞出輕盈放松的視覺感受，常配合粗的字重使用，在一些輔助信息，說明文案時(shí)候使用；

重字重：視覺感受莊重，很重要，常用在重點(diǎn)強(qiáng)調(diào)的文字，頁面大標(biāo)題，數(shù)字，引導(dǎo)行動(dòng)操作點(diǎn)上等；

例如百度網(wǎng)盤「發(fā)現(xiàn)」頁就用了Regular、Medium、Semibold三種字重以拉開信息層次對(duì)比；

知識(shí)點(diǎn)：

需要注意的是：在進(jìn)行界面設(shè)計(jì)時(shí)，不要用軟件自帶的文本加粗，它不僅破壞了字體本身的美感，還改變了文字原本的字寬，小字體下會(huì)模糊不清，合理的方式是使用字體本身的字重來控制粗細(xì)。

注意超細(xì)體的字體

字重超細(xì)的字體要謹(jǐn)慎使用。如果你設(shè)計(jì)的文本是裝飾性倒還好，如果是需要用戶能清晰閱讀的，就要特別慎重，能不用就不用，否則在部分低分辨率的手機(jī)屏幕上看起來會(huì)非常糟糕。

6. 字色 FontColor

字色即文字對(duì)應(yīng)的顏色，不做過多解釋。需要大家注意的是 遠(yuǎn)離純黑色和純灰色！

純黑色就像沒有生命力的深淵，能吞噬所有細(xì)節(jié)，使用戶陷入冷冰冰的極端情緒中。純黑色還會(huì)與白色產(chǎn)生強(qiáng)烈的對(duì)比度，看久了就會(huì)感覺疲勞，讓用戶產(chǎn)生焦慮情緒。

還有就是真實(shí)世界中是不存在純黑色的。嘗試在色彩中加入一些色相，這樣就不會(huì)讓頁面看上去死氣沉沉的。例如iOS系統(tǒng)「設(shè)置」頁面背景色就是加入了白色的低飽和度藍(lán)色，看上去柔和自然。

7. 字符樣式 FontStyle

除了以上幾個(gè)最常用的文字屬性外，還有幾個(gè)使用頻率比較低的字體設(shè)置。例如帶下劃線的、刪除線的文本?！赶聞澗€文本」一般出現(xiàn)在「文字按鈕」或帶鏈接的網(wǎng)址，而「刪除線文本」一般會(huì)出現(xiàn)在商品櫥窗的現(xiàn)價(jià)、原價(jià)

例如「CCtalk」的課程現(xiàn)價(jià)和原價(jià)的區(qū)分，原價(jià)用刪除文本，「微信讀書」文章底部「加入書架 隨時(shí)閱讀」就是帶鏈接的下劃線文本。

8. 字符選項(xiàng) Text options

Ps和Sketch都有文字（字符）選項(xiàng)一欄，主要針對(duì)西文字母大小寫格式變換的設(shè)置。最常見有默認(rèn)大小寫、全部大寫、全部小寫和小型大寫字母，Ps里面還有「上標(biāo)」和「下標(biāo)」。

• 默認(rèn)大小寫：即正常大小寫格式，軟件不做干預(yù)；
• 全部大寫：如果輸入的是小寫字母，選擇這個(gè)選項(xiàng)，軟件會(huì)強(qiáng)制把小寫改為大寫；
• 全部小寫：如果輸入的是大寫字母，或者只是首字母大寫，選擇這個(gè)選項(xiàng)，軟件會(huì)強(qiáng)制把所大寫改為小寫；
• 小型大寫字母：這個(gè)選項(xiàng)比較特殊，所謂「小型大寫」就是，在字號(hào)一樣的情況下，與小寫字母一樣高，外形與大寫字母保持一致。

注意英文大寫

純大寫的字母文本本身不太適合大篇幅閱讀，會(huì)加大閱讀障礙，用的時(shí)候注意要額外拉開字母之間的字間距，提升可讀性。

9. 全角與半角 Full-width and half-width

全角是指一個(gè)字符占用兩個(gè)標(biāo)準(zhǔn)字符的位置。中文字符、全角的英文字符、國標(biāo)GB2312-1980中的圖形符號(hào)、特殊符號(hào)都是全角字符。半角是指一個(gè)字符占用一個(gè)標(biāo)準(zhǔn)字符的位置。

通常情況下，英文字母、數(shù)字、符號(hào)等都是半角字符。半角和全角主要是針對(duì)標(biāo)點(diǎn)符號(hào)來說的，因?yàn)檎Ｇ闆r下沒有打全角英文的需求。

知識(shí)點(diǎn)：

在設(shè)計(jì)作品時(shí)也一定要記得中文搭配全角符號(hào)，英文使用半角符號(hào)。否則會(huì)出現(xiàn)諸如「你好.」或者「t h a n k s。」這樣的錯(cuò)誤。可按鍵盤「capslock」鍵切換全角和半角。這個(gè)小知識(shí)點(diǎn)雖然非?；A(chǔ)，卻也是設(shè)計(jì)中經(jīng)常出錯(cuò)的地方。

文章轉(zhuǎn)載于：
https://www.uisdc.com/typography-guidelines