面向前端的設計規範-文字初探-Part1

在最初CSS還沒有流行起來的時候，網頁就是類似以 Word 的文字樣式呈現的。去掉各種花裡胡哨的樣式，和裝飾圖片之後，留下的文字才是網頁本來的樣子，而這才是我們真正想要對使用者說的話。文字幾乎是網頁的靈魂。

最近一直在研究面向前端的設計規範。給我印象最深的來自「 Ant Design 3.0 背後的故事 」這篇文章，老實說裡面的那些數學公式看得我還是比較心累的。但是裡面的觀點，卻是給了我很大的啟發。

在講文章之前我必須要提到的是，本文主要是在探究，面向前端的設計規範在文字方面的可行性。所以美是目的，但一定不是本文終點。我們要追求的，是在美和工程化之間找到一個利益平衡點。

一、主字號

這是來自「 Ant Design 3.0 背後的故事 」的高階公式。其實原理很簡單，就是網頁主字號的選取和我們使用者離顯示器的距離有直接關係。近大遠小，這就和你家客廳沙發和電視牆的距離影響著你買電視的大小是一個道理。最終「 Ant Design 」將主字號定在了覆蓋面更廣的 14px 。

理論是對的，但是「 Ant Design 」給出的這個結果和這個理論感覺沒有什麼關係。僅僅是因為 14px 的字號能保證大約 77% 的顯示器使用者處於比較好的閱讀體驗，那把字號選在覆蓋面更高的 16px 不是更好嗎？

而且字號大小並不是決定網頁可讀性的唯一條件，畢竟字型，顏色，間距等等之類的也同樣對閱讀有著不同程度的影響，我覺得最終主字型應該是全域性博弈之後的結果。

回到我們面向前端的設計規範來說，主字號的選擇其實是非常簡單的。因為能作為我們主字號的字型，只有12px、14px、16px，這三個字型。 再大一點字看起來就很大，很像老年機了。 12px 可讀性又太差，那麼可選的就只剩下了 14px、16px 這兩種。結合當前自己的設計風格，想要呼吸感就用 16px ，想要緊湊一點就 14px ，這個就看設計師心情了。

但是前端這邊推薦 16px。因為 16 剛好是 2 的 4 次方，被縮小 3 倍也不會出現小數，這對於設計的縮放和擴充，以及最終瀏覽器的渲染都是非常友好的。巧的是 16px 也是我們網頁預設文字的大小，不知道這個是不是冥冥之中註定的。

結論，面向前端的設計規範推薦主字號使用 16px。

二、字階

上圖是「 Ant Design 」基於 「 Robet Bringhurst 」提出的經典的字階和古典音階具備韻律上的相似性。以及 「 Spencer 」提出的一個冪函式的字型計算公式，選擇了以 14px 為起點，給到的字階推演公式。

然後採用偶數原則和簡化記憶原則進行微調。得到了他們自己準確字階線。並證實設計師用這樣的方式一共反覆嘗試了近 200 多張頁面的設計，覆蓋了後臺大部分型別的場景。能得到如下結論：

• 新的字階在落地中可以實現更為和諧的介面結果；
• 設計師在使用這一套字階的時候明顯感覺到設計決策的過程變的輕鬆很多；
• 不同的設計師產出頁面一致性都比以前有了明顯的提升；

真的非常佩服「 Ant Design 」團隊極致追求美學所作出的努力。但是，我想說的是看到這個我其實是有一點慌的。因為我並不認為字階和主字號有著必然的聯絡。你有了一個韻律，不管你從哪裡開始唱，韻律還是那個韻律，只是起點不一樣而已。所以明顯感覺以 14 為基數有一點牽強。

然後更好玩兒的地方是，我在知乎上看到關於「 Ant Design 」的評論的時候瞭解到，音階和自然常數 e「 2.71828 」是沒有關係的。而且三音階四音階五音階七音階的頻率都不是等分的（所以不是指數增長的），只有平均律（十二音階）才是等分、指數增長的。這裡對錯我們就不去深究了，也不是重點，只是想說明這個方程式從音律這個角度來說是不具有通用性的。然而巧的是我在後面的評論裡，直接發現了更符合音階理論的字階結論：

Major Second (大二度)： 1.125
Minor Third (小三度)： 1.200
Major Third (大三度)： 1.250
Perfect Fourth (純四度): 1.333
Augmented Fourth (增四度): 1.414
Perfect Fifth (純五度)： 1.500
Golden Ratio (黃金分割率): 1.618

就是文字直接按照上面的數字，遞增就能呈現與之對應的音階美感。既然都有了結論，那是不是到這裡就結束了呢？然而一切不是這麼的簡單。我們分別以推薦的主字號 14，16 為起點，進行音階換算能得到如下的字階列表。

可以看到音樂韻律之美，其實無非就是一條曲度不同的冪函式。曲度陡一點，音樂就明快，曲度換一點音樂就舒緩。照理來說根據產品風格我們選擇那一條都可以。

然而可以從上表結果可以看出，如果我們以最左邊小二度「 1.067 」作為我們字階韻律，取整之後我們能得到的序列變化非常的小基本是以步長為 1px 的節奏遞增的。顯然這麼小的韻律變化，我們人的肉眼是無法辨別的。

如果我們以最右的黃金分割率「 1.618 」作為我們字階韻律，我們能得到的可用字號太少了，這顯示是不夠用的。這樣我們一下就將可選擇項限制在了從大二度到純五度這 6 個音階之中。但是在6個音階之中，最後得到的字號當中基本都是小數和偶數。我們還得基於偶數原則去微調這些曲線。

天哪，光是要理解這套理論，我就已經耗費掉大量腦細胞了，又談何推廣。這讓我深深讓我懷疑，直接將音階對映到字階的可行性。但有一點我們是得承認的，就是如果我們的文字增長有音階的韻律會顯得更美。對於音階的探討我們暫時放一放。我們嘗試換一種思路？

在我認為工程化比較好的設計規範 「 Material Design 」 中對於行高有一個規則是「 4dp baseline Grid 」，就是所有文字的行高都是 4 的倍數，會大大降低排版的複雜度。

可是如果我們的文字的大小，不是 4 的倍數的話，行高其實是很難做到 4 的倍數的。所以根據這個理論，我們字號的選擇就限制在了一個極其簡單的數學公式：「 字號=4n 」 之中。可以看到最終可選的字號的陣列就是： 0、4、8、12、16、20、24、28、32、36 .... 但是可以看到這個是一個線性增長的函式，並不能體現之前提到的音階的韻律之美。

所以我們需要一條美的帶韻律的曲線，既然我們是談論視覺為啥不直接利用視覺的曲線呢？而要和相對較遠的音律扯上關係呢？

相信大家和我一樣，都知道公認的視覺美學中的「 黃金分割 」理論。而和黃金分割相關的曲線就是「 斐波那契數列 」了。

科普以下：斐波那契數列，又稱黃金分割數列指的是 1、1、2、3、5、8、13、21、34... 這個數列從第 3 項開始，每一項都等於前兩項之和。而且當 n 趨向於無窮大時，前一項與後一項的比值越來越逼近黃金分割 0.618「 或者說後一項與前一項的比值小數部分越來越逼近0.618 」。

於是我們基於「 斐波那契數列 」和 「 字號=4n 」的數學公式，分別以0、4、8、12為起點，可以獲得以下4個字階序列：

0為起點：0、4、8、16、28、48、80...

4為起點：4、8、12、20、32、52、84...

8為起點：8、12、16、24、36、56、88...

12為起點：12、16、20、28、40、60、92...

可以看到這4條線中，只有後兩條線是同時含有我們常用的 12 和 16 字號的，並且可用的字號大於 4 個的，所以我們可選的曲線就只剩下後面兩條了。可以看到這兩條曲線的區別在於，字號之間的增長律。以8為起點的字階，在0～100這個區間增長相對要慢一點，而12為起點的字階要陡峭一點。這個感覺可以根據產品風格和設計喜好選取就好。

我們花了大量的時間，去找了各種曲線，不管是從音律還是從視覺黃金分割的角度。這對於設計師字型的選擇有什麼指導意義呢？很簡單，當設計師定義了一條字階曲線之後，我們就能理性的判斷某個字型是不是符合我們的規範，更或者說換一個設計師也能通過這個曲線擴充我們的字階序列。

而最終的結論，基於我們面向前端的角度思考，我們希望這個字號能夠儘量滿足「 字號=4n 」。因為這能給前端減輕很多的佈局上的麻煩，和規避字號帶來的相容性問題。也推薦設計師嘗試用一下我用「 斐波那契數列 」推匯出的兩條，即符合美學又貼近前端，但是缺乏實踐資料支撐的字階曲線。

三、行高

「Ant design 」對於行高的推導過程，和字階一樣，又太多不相關的變數，我們這邊還是不要深究了，但是結論「 行高 = 字號 + 8 」，這個理論光從「易懂」這個角度，就非常符合我們面向前端的設計思想了。我這邊就嘗試從更多面向前端的角度去重新推導一下這個理論。

上圖左側所有的行高都是按照字號的 1.5 倍「 前端常用的行高字號比值 」設定的，而後面的行高是近似讓不同字號之間的間隙儘量保持一致設定的。可以很明顯的看到，右邊會相對舒服一點。為什麼呢？

在我看來，我們需要行高是為了讓上一行的文字和下一行的文字之間有呼吸的空間。如果這個呼吸空間一致，那麼我們會覺得更自然。你想如果你每次呼吸的節奏和平時不一樣了，那要不是你看到美女，要不就是生病了。而不同字號之間相同的字間隙也非常符合設計的四大原則中的「對齊」和 「重複」。基於這個邏輯我們可以得到這樣一個公式：「 行高 = 字號 + n 」。而這個 n 我們面向前端的設計規範希望是一個定值。

從右側我們還可以看到這樣一個規律，就是隨著字號增大，「 行高／字號」的這個比值是無限趨近於 1 的。我們索性就那這個 1 作為我們的終點，所以我們只需要找到我們的起點就能解出我們的方程。

我們知道網頁中推薦的最小字號為 12 所以我們以這個字號作為我們的起點。那怎麼去求這個 N 呢？沒辦法我們又不得不回到我們唯一知道的美學理論「 黃金分割 」。我們嘗試讓 「 12*1.618 = 19.416 」來作為我們的起點行高。不過怎麼又是小數，怎麼辦呢？

在介紹字階的時候我就提到「 Material Design 」 的「 4dp baseline Grid 」規範。這個規範裡面定義「 行高 = 4n 」。所以我們將這個「 19.416 」調整到了最接近 4n 倍數的值「 20px 」 。而在我看來「 20px - 19.416px 」這不到 1px 的誤差在網頁環境中對於美學的影響，是完全可以忽略的。畢竟很少有瀏覽器能完美渲染小於 1px 的元素。 於是結合我們之間的「 行高 = 字號 + n 」這個公式，我們就能求出這個 n=8。

到這裡我們通過完全不同理論得到了和「Ant Design」一致的結論：行高 = 字號 + 8 。