超詳細！總監出品的B端設計規范指南（二）：字體

第二篇，我們就要回到 UI 整個類目里最麻煩，也是最重要的規范類型——字體。

文字的基本屬性

字體屬性包含的內容很多，我們可以根據 Sketch 或 Figma 的文字屬性欄為例，分別進行解釋。

1. 字體選擇 Font-family

字體就是文字的不同風格。

在 UI 的字體應用中，字體正常顯示的條件，是你的設備加載過對應的字體文件。比如我們在 Windows Font 文件夾中添加的字體，就是為了在設計過程可以調用它們。

同理，我們想要設計一套 B 端界面，使用的字體不僅僅是要你自己電腦裝過，還需要用戶的電腦也裝過。所以，B 端的設計中，我們對字體的使用范圍是很小的，中英文常用字體如下所示：

針對中文項目的設計，除非對部分數字想進行凸顯可以選擇其它英文字體，不然建議統一使用微軟雅黑或者思源黑展開設計即可（即使中間出現英文）。不用太擔心這兩字體用戶沒有，這樣的問題，比較標準的黑體樣式差異不會太大，網頁的基礎 CSS 樣式表調用字體都會做多手準備，比如下面這段代碼：

Font-family：PingFang SC, "SF Pro SC", "SF Pro Text", "Helvetica Neue", 
Helvetica, Roboto,'arial', 'microsoft yahei ui', "Microsoft YaHei", SimSun, sans-serif

每一個逗號前是一個字體，瀏覽器會根據這個排序依次讀取你本地相關的字體文件，來顯示網頁中的文字，如果第一個沒有，就換第二個，以此類推。如果全部指定字體沒有的話，就會根據你當前系統默認的字體來顯示。

最后，還有一點就是很多設計師關心的字體商用版權問題，在網頁可用的這幾個字體范圍內，不需要考慮任何版權問題，放心使用即可。更復雜的細節我就不在這里展開了。

2. 字號選擇 - Font-size

文字字號就是文字使用的大小號數，在網頁中，字體大小根據 px 單位來制定。通常，網頁設計中的中文字體最小字號控制在 12px，到 11px 已經會有很多文字不能正常顯示了。而純英文或數字文本最小字號則在 9px 左右。

下表是不同類型文本中使用的字號區間：

• 注釋英文、數字：9-11px
• 注釋、小段文本：12-13px
• 正文、小標題：14-16px
• 大標題和大數字：16-20px

建議新手做設計直接背下這個表，定義字號的時候根據文本的類型來設置，不要把 B 端界面設計當成平面畫冊的設計，會導致字體大小非常失衡。

3. 字重的選擇 Font-weight

字重是字體筆畫的粗細，在 UI 設計的過程中，我們對字體字重的控制，是根據字體自帶的字重進行調整的。一套成熟的字體會包含多個級別的字重。

當我們點開字重選項菜單的時候，里面顯示的字重是字體文件本身攜帶的，如果沒有包含其它字重，則字重選項就只會有一個默認的值。

所以，在設計過程中無論中英文，只使用細體（Light）、常規（Regular）、粗體（Bold）三種字重即可。

4. 字色的認識 Color

字色，自然就是文字的色彩了。我們對字色的應用會放在下一篇色彩規范里具體說明，在這邊先分享一些網頁中字色的基本常識。

在網頁中，字體的用色只能用純色，避免在 B 端使用漸變性字色。同時，網頁的色彩只使用 RGB 模式，并且用 16 進制代碼來指向具體的色彩，也就是色彩面板中常見的那一串符號。

5. 文本樣式 Font-style、Text-Description

除了這些選項外，最后再說一個，就是文本的樣式內容。在網頁設計中，除了以上的文字屬性設置外，CSS 還可以為文本添加下面的效果：

文本的排版屬性

除了對文字本身的樣式屬性做設置外，我們還需要考慮文字置入到畫布中的排版問題。為了讓文本可以更好的實現頁面的布局、瀏覽的效果，就要來了解下面這些設置。

1. 文本區域 Display

首先講文本區域，我們說過任何 B 端設計中的元素，都包含一個矩形的視圖。對于一整段文字來說，它的視圖區域即接下來要說的文本區域。

網頁文本區域設置和軟件中的設置是非常一致的（比手機客戶端直觀得多），文本區域分水平適應、定寬模式、固定尺寸三種。

在設計過中，我們要根據該段文本的類型，來決定使用哪種文本模式。

2. 對齊模式 Text-align

對齊模式，則是文字內容在文本區域中的對齊方向，最常規的左中右對齊就不多做介紹了。我們要講講在網頁設計中，是提供水平對齊選項的。如果一個文本區域大于文字的高度，那么文字就會水平方向居中。

水平居中的作用類似在表格中，有的表內文本既可能只有一行，也可能有兩行，于是使用這種對齊模式就可以適應不同的情況。而該設置在移動端設計中是很少用到的。還有，在網頁的范疇里，文本的對齊是不會使用兩端對齊的。

因為兩端強行對齊會導致文字間距被奇怪的修改，非常影響視覺效果和閱讀體驗。專業的網站對多行文本的處理都使用自然對齊，右側不統一是正常現象。

3. 行高 Line-height

行高，也是一個讓所有 UI 設計師都頭疼的問題。行高是文本區域內一行文字實際高度的數值，和字號不是同一個屬性。

使用行高的主要目的是為了讓多行文本的閱讀體驗能滿足我們的需要，因為如果行高沒有設置，在網頁中兩行文字等于沒有間距，無法正常閱讀，所以我們可以通過行高制定成寬松或緊湊的樣式。

在網頁設置中，最讓新手困惑的就是行高應該怎么定。建議新手行高控制在字號的 1.2-2 倍之間，然后根據自己需要和實際效果做決定即可，沒有萬能的行高默認數值，一定要自己做測試。

4. 段間距 P padding

最后，在文字布局中軟件有提供給我們一個屬性，段間距，即段落之間的區域，通過增加留白來提升閱讀體驗。

段間距并不是一個 CSS 默認的屬性，在實現它的時候往往要用其它屬性代替。盡量避免在 B 端設計中多段文本使用一個文本框，將每段獨立成一個文本框的設計，能最大化開發的效率。

總結

文字部分的規范就先介紹到這里，關于色彩應用這個比較麻煩的部分我們就留在下篇進行統一的講解。有什么問題可以在評論區留言。

下篇再賤～

歡迎關注作者的微信公眾號：「超人的電話亭」