編輯導(dǎo)語：在B端設(shè)計中，字體是其中重要的組成部分。在設(shè)計字體需要考慮許多問題，比如字體的布局、樣式等等。本篇文章中，作者詳細(xì)介紹B端設(shè)計中如何正確設(shè)計字體，快來學(xué)習(xí)一下吧。

一、前言

在B端設(shè)計當(dāng)中，字體往往是出現(xiàn)頻率最高的一個“原子”。因其擁有不同的渲染方式（設(shè)計軟件渲染與瀏覽器渲染）并且在Web設(shè)計當(dāng)中，會出現(xiàn)兩大桌面操作系統(tǒng)的情況（Windows 與 Mac OS）也就造成在B端設(shè)計當(dāng)中的字體，往往存在著許多“變數(shù)”。

而在查看很多設(shè)計師的稿件過后，會發(fā)現(xiàn)他們往往存在許多頁面問題：缺少層級、頁面發(fā)灰。

1. 缺少層級

缺少視覺層級，這往往是作為一個設(shè)計師的主觀感受。

在課上，我有和大家聊過：作為一名B端設(shè)計師，其實我們更像一個版式設(shè)計師。因為在移動端到桌面端，交互面積增大的同時，也會帶來信息區(qū)域的劃分，視覺動線的引導(dǎo)。

而缺少層級往往就像我們?nèi)ふ页隹跁r，遇到了讓人迷惑的“標(biāo)識引導(dǎo)系統(tǒng)”，在一個版式上為你平鋪密密麻麻展示所有信息。所以說設(shè)計本身，其實也是相通的。

2. 頁面發(fā)灰

頁面發(fā)灰一詞其實源于“美術(shù)專業(yè)”，通常用于評價一副美術(shù)作品缺乏 重色或者重色比例過低，你也可以理解為頁面當(dāng)中往往找不到重點。因此頁面發(fā)灰往往是字體重色缺失所導(dǎo)。

二、字體Family

字體Family，也叫做字體回退。是瀏覽器常見的字體CSS屬性。

其目的是保證字體在不同的平臺及瀏覽器內(nèi)，都有著良好的適應(yīng)性和可讀性。

現(xiàn)實情況是因為作為我們作為B端產(chǎn)品提供方，不知道真實用戶究竟在電腦中安裝了哪些字體，而通過字體回退，來保證頁面顯示的最佳效果。

字體Family是需要在項目之初就能有所明確，因為字體最為B端頁面當(dāng)中最基礎(chǔ)/底層 的原子，如果隨意變化，全局的設(shè)計方案都會受到波及，因此風(fēng)險較大。

1. 常見的字體Family

• Mac OS 下 英文使用：San Francisco、中文使用：Ping Fang SC。
• Windows系統(tǒng)下 英文使用：Segoe UI 、中文使用：Microsoft YaHei。

顯然這些字體不是一成不變，你可以根據(jù)實際用戶的情況進行相應(yīng)調(diào)整：

2. 字體回退究竟如何確定？

• 檢查截取競品的 font-family 代碼，通過研究競品的退回機制，確立一個基本的產(chǎn)品回退方案。
• 將方案交付給前端進行調(diào)試，通過調(diào)試結(jié)果確定方案（設(shè)計軟件與前端實現(xiàn) 的渲染方式不同，建議實機進行判斷）。

三、字號與行高

字號與行高是一對綁定的關(guān)系。

對于字號，瀏覽器一直都有一個最小限制，為了保證用戶的閱讀，字體的最小字號為12px。

在實際項目中，我們會設(shè)定有：12px、14px、16px、18px……等高度，而行高會是字體的1.5-1.6倍，因此我將常見的字體與行高做了一份表格。

最后我們再說說，行高在B端項目當(dāng)中的重要性。這是一位同學(xué)問我的問題，大家可以想想究竟是藍(lán)色還是黃色？

正確答案是黃色。因為行高的出現(xiàn)，他代表著文字有著更為統(tǒng)一的高度，并且在實際間距的測量中，必須把行高算為字體內(nèi)部的元素當(dāng)中。

四、字重

字體字重分別有ExtraLight、Light、 Normal、Regular、Medium、Bold和Heavy，當(dāng)然它還有一個數(shù)字名稱：100、200、300、400、500……

我們可以通過字重來改變頁面層級。因為字體越粗，代表閱讀視線更加注意，整個信息層級會發(fā)生較大變化。而粗字體通常表示我們的標(biāo)題，也就意味著你的標(biāo)題是概括下面的所有信息內(nèi)容。因此通過良好的字重管理，能夠幫助我們進行信息層級的區(qū)分。

五、字體灰色

字體灰色的色階會直接影響頁面是否發(fā)灰，我們先來看看頁面發(fā)灰的頁面所存在的問題。

雖然“發(fā)灰”是一種我們設(shè)計師的主觀感受，但是想要深究其中的邏輯，我們可以通過WCAG規(guī)范當(dāng)中找到更為合適的解答。

這里我們將常見的中性色進行平鋪，可以根據(jù)HSB色值當(dāng)中的明度得出一個折線圖，因為字體使用往往都在后三個色階，顏色的色值走向也相對更陡。

色階相對更陡的邏輯其實都是源于中性色的使用場景。淺灰色部分主要是以「背景區(qū)分、分割線、輸入框描邊」為主，通過淺灰色來實現(xiàn)對于頁面布局的關(guān)系。

深灰色則主要用于「文字、標(biāo)題、正文排版」它需要拉開明度的變化來引導(dǎo)視覺關(guān)系，進而營造界面的整體層次感。

而對于淺灰色與深灰色，行業(yè)當(dāng)中往往存在著一種說法，即「字體灰色可以通過透明度進行控制變化，比如使用 #000 然后將透明度進行隨意降低增加」。

當(dāng)我深究這個問題，發(fā)現(xiàn)好像在各大系統(tǒng)當(dāng)中都會存在這樣說法，這真的對嗎？

通過查看 SAP、Lightning、Ant Design、Element、Clarity Design 等設(shè)計規(guī)范，對比發(fā)現(xiàn)這種說法主要源自 國內(nèi) Clarity Design 與 Ant Design 兩家，不清楚規(guī)范的小伙伴可以查閱 B端設(shè)計指北 (youthce.com)。

Clarity Design 確實有描述關(guān)于字體透明度的問題的一段話：

“我們使用透明度來區(qū)分字體層級。當(dāng)字體應(yīng)用于淺色背景時，以 #000 為基礎(chǔ)來調(diào)整透明度；當(dāng)應(yīng)用于深色背景時，以 #FFF 為基礎(chǔ)?！?/p>

仔細(xì)閱讀可以理解到其核心在于表達(dá)字體層級關(guān)系，讓大家能夠快速理解層級的概念而并非教唆大家使用透明度進行字體的使用。

我們再看 Ant Design ，如果只看配圖，好像表達(dá)的含義確實是通過透明度控制文本顏色和背景顏色 之間的關(guān)系，但是看一下旁邊的描述文字：

“文本顏色如果和背景顏色太接近就會難以閱讀。考慮到無障礙設(shè)計的需求，我們參考了 WCAG 的標(biāo)準(zhǔn)，將正文文本、標(biāo)題和背景色之間保持在了 7:1 以上的 AAA 級對比度?！?/p>

但是仔細(xì)閱讀你會發(fā)現(xiàn)，它也只是通過透明度表達(dá)層級關(guān)系。我去翻看了 阿里云、語雀、Teambition 等線上產(chǎn)品，發(fā)現(xiàn)他們均沒有使用透明度的方式。

那透明度究竟適用嗎？使用透明度的字體會有以下三點問題：

1. 字體適應(yīng)場景不多

當(dāng)字體在一個圖片或者有紋理的背景圖上，一個帶有65%透明度的字體明顯會出現(xiàn)字體無法控制的問題。

2. 增加渲染負(fù)擔(dān)

使用透明度進行渲染，會增加瀏覽器的負(fù)擔(dān)，而作為一個全局使用的內(nèi)容，在可以不使用的情況下，便盡可能不要使用，以免增加不必要的負(fù)擔(dān)。

3. 維護困難

因為字體顏色采取透明度，本身就跳脫顏色規(guī)范的范疇當(dāng)中，因此需要單獨維護一套字體 Color 的組件庫。

如果你之前有原子設(shè)計、Design Token 相關(guān)經(jīng)驗，你一定會知道，顏色與字體本身就屬于兩類不同原子，因此字體顏色一般適用中性色當(dāng)中的色值即可。

關(guān)于規(guī)范，我一直給同學(xué)講的是維護，這里給大家放一個關(guān)于設(shè)計系統(tǒng)沒有維護的小彩蛋：

其實關(guān)于字體，本身是一個特別簡單內(nèi)容，但是其作為設(shè)計規(guī)范當(dāng)中的基礎(chǔ)“原子”，在設(shè)計上還是會存在許許多多的小問題，你也可以說說，在B端設(shè)計當(dāng)中遇到了什么“字體相關(guān)的坑”。

作者：CE青年，2B行業(yè)的2B設(shè)計師；公眾號：CeDesign

本文由 @CE青年 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議。