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

而在查看很多設計師的稿件過后，會發現他們往往存在許多頁面問題：缺少層級、頁面發灰。

缺少層級

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

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

而缺少層級往往就像我們去尋找出口時，遇到了讓人迷惑的“標識引導系統”，在一個版式上為你平鋪密密麻麻展示所有信息。所以說設計本身，其實也是相通的

頁面發灰

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

字體 Family

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

其目的是保證字體在不同的平臺及瀏覽器內，都有著良好的適應性和可讀性。

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

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

比如常見的字體 Family：

• Mac OS 下 英文使用：San Francisco、中文使用：Ping Fang SC
• Windows 系統下 英文使用：Segoe UI、中文使用：Microsoft YaHei

顯然這些字體不是一成不變，你可以根據實際用戶的情況進行相應調整：

字體回退究竟如何確定？

1. 檢查截取競品的 font-family 代碼，通過研究競品的退回機制，確立一個基本的產品回退方案。
2. 將方案交付給前端進行調試，通過調試結果確定方案（設計軟件與前端實現 的渲染方式不同，建議實機進行判斷）

字號與行高

字號與行高是一對綁定的關系

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

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

最后我們再說說，行高在 B 端項目當中的重要性

這是一位同學問我的問題，大家可以想想究竟是藍色還是黃色？

正確答案是黃色。因為行高的出現，他代表著文字有著更為統一的高度，并且在實際間距的測量中，必須把行高算為字體內部的元素當中

字重

字體字重分別有 ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy，當然它還有一個數字名稱：100、200、300、400、500...

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

字體灰色

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

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

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

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

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

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

當我深究這個問題，發現好像在各大系統當中都會存在這樣說法，這，真的對嗎？

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

Clarity Design 確實有描述關于字體透明度的問題的一段話

“我們使用透明度來區分字體層級。當字體應用于淺色背景時，以 #000 為基礎來調整透明度；當應用于深色背景時，以 #FFF 為基礎。”

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

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

“文本顏色如果和背景顏色太接近就會難以閱讀。考慮到無障礙設計的需求，我們參考了 WCAG 的標準，將正文文本、標題和背景色之間保持在了 7:1 以上的 AAA 級對比度。”

但是仔細閱讀你會發現，它也只是通過透明度表達層級關系。我去翻看了 阿里云、語雀、Teambition 等線上產品，發現他們均沒有使用透明度的方式

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

1. 字體適應場景不多：

當字體在一個圖片或者有紋理的背景圖上，一個帶有 65%透明度的字體明顯會出現字體無法控制的問題

2. 增加渲染負擔：

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

3. 維護困難

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

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

關于規范，我一直給同學講的是維護，這里給大家放一個關于設計系統沒有維護的小彩蛋：

什么是信息密度？

前面為大家講到了 字號、行高這一概念，但是隱藏其背后，有著十分復雜的設計邏輯，通過字號和行高，我們可以清晰的了解到不同信息間的密度關系；通過信息密度可以決定信息間的易讀性。今天我就拋磚引玉，簡單聊聊，頁面信息密度背后的邏輯

信息密度，可以理解為頁面當中你所展示的信息數量？通常給人們的直觀感受就是視覺閱讀更為舒適、或者更為緊湊

比如我們在一個 固定信息量的表格當中進行繪制，可以通過字號、行高、行間距 來控制其展示的信息量，進而可以產生在視覺上完全不同的三個信息展示維度：寬敞、舒適、緊湊

寬敞：我們以字號 14px、行高 20px 為例，寬敞的定義為上下均為一個文字的整體高度，也就是 20px * 3 =60px

舒適：對舒適的定義為上下均為半個文字的整體高度，也就是 20px * 2=40px

緊湊：緊湊相對于信息密度是最高，高度基本上是，行高的 0.6 倍左右 20 * 1.6=32px

當然對于密度的定義，并沒有統一的標準，可以根據自身的產品特性進行相應調整。不過要記好三個的維度，文字后半部分會用到

而在實際工作當中，我們會去強調屏效這一概念

這個屏效與餐飲行業當中的坪效類似，目的都是用于單位面積當中能夠衡量屬性的一個具體指標。而我們便可用它來衡量整個寬敞、舒適、緊湊的具體指數，以及表格外其他因素的干擾

通過 信息面積/表格面積 * 100% 就能夠得出整個表格的“屏效”

“屏效”這一理念之后可以用在許多許多其他組件，去尋找規律。咱們后續再聊

什么是易讀性？

通俗一點來說，就是你在這個頁面當中能否一眼就看清文字，能夠讓用戶快速找到。它與我們上面說到的信息密度是一個反比的關系，也就是信息密度越高，易讀性也會隨之降低

但我們在工作當中，對接客戶需求時，客戶往往都會更去在乎信息密度，而忽視易讀性。比如：

“能不能再多一點？”

“展示得能不能再密一些？”

“這里感覺可以加更多的信息。”

面對這樣的一些問題，相信你也會時常問自己，需求是否合理？
避開場景去談需求都是在耍流氓，對于上訴的問題，我們可以這樣去思考場景：

假如現在字節不動公司的“張老板”，作為老板，你每天重要的工作就是查看公司的整體狀態。然后打開管理后臺點擊數據看板，發現數據看板都是非常大的卡片，但作為你自己而言，是不需要這么大的字體，因為這個內容只針對你看，所以你提出讓設計師去做相應調整

假如小張是一名銷售基層員工，每天的工作都是打開軟件對客戶數據進行操作，隨著小張業務不斷熟練，他就想能夠在一個頁面當中展示更多的信息用于數據操作。因此想讓設計師對信息的密度進行修改

看上去他們的訴求都有自己的道理，對于這些情況，建議大家可以采取不同方式來進行展示

我們現在去處理小張的需求，產品涉及到的用戶人群較大，針對于基層員工的工作需求，我們應該去考慮將特殊的喜好努力抽象成為通用的邏輯，適用到系統當中。比如在表格底部設定表格的不同高度：“寬敞、舒適、緊湊”這樣的維度，通過較為通用的方式，來滿足用戶的需求，而不是單獨為此用戶進行調整。

針對老板的特定需求，或許整個功能/產品就是為他設計，因此對于這樣的“老板需求”我們則可以根據他的具體使用習慣進行調整，所以設計師應該多從特定人群的實際環境出發進行思考

當然如果除了老板之外的其他角色也需要去使用這個功能，我們同樣可以根據“視圖、分類、篩選”等功能，將不同類型的角色進行定義

而在頁面信息舒適性和密度之間究竟應該如何權衡？我確實不能給到你一個萬能的公式，能幫助到你的還是只能通過需求真實的 場景/行業 出發，對于整個影響范圍進行綜合考慮

最后關于行高，會出現很多奇奇怪怪的問題，比如 在微軟雅黑 字體當中，由于本身基準線的緣故，微軟雅黑字體本身是靠下進行展示。而我們在 圖標 文字 混排時，就會出現錯亂的情況，我們在評論區探討探討，這種情況你是如何處理的？

歡迎在評論區留言。

歡迎關注作者的微信公眾號：CE青年