文字是人類文化的重要組成部分，經歷了數千年的發(fā)展和演變，字體排版已經積累了非常多的專業(yè)性知識。
無論是平面設計師還是 UI 設計師，都應該了解和學習這些基礎設計知識，從而幫助我們創(chuàng)造更優(yōu)秀的產品體驗。
文字是界面設計中最重要的組成部分，也是最不可忽視的核心元素，文字排版的好壞，直接影響著產品的信息傳遞和視覺傳達效果，對閱讀體驗更是有著至關重要的作用。
在用戶與界面交互的過程中，字體的使用也能夠反映出品牌的性格與氣質，如果說圖形和色彩是品牌的皮膚和血肉，那字體則是品牌的內在骨骼。
1. 字體 Typeface
再解釋字體前先來了解下「typeface」和「font」的區(qū)別是什么？在很多時候，當人們在說“font”時，他們實際上指的是“typeface”
Font 和 Typeface 這兩個概念，通常會被我們混淆，或者當作近義詞。
當然這是有一定歷史原因的，在西文印刷時代，typeface 是一個抽象的總體概念（它是一款“設計”），而 font 是這個概念受到幾個參數的制約而成的具象物體（它是一組具有確定大小和風格的文字，是 typeface 的子集）
所以嚴格來說，typeface 要翻譯成字型，而 font 要翻譯成字體，前者是一種設計，后者是具體的產品。例如 Helvetica 是一款 typeface，而 Helvetica Regular 就是一個 font。
我們回到字體，這里我們稱它 Font，當然也可以稱它為 Typeface，這些概念我們只要了解就好了。
字體是同一種外觀樣式，但排版尺寸不同的字體的集合，例如「SF-UI」里有不同粗細（Regular、Blod、Light）。
在移動端產品設計中，大多數手機廠商都會使用平臺默認的字體，所以在 UI 設計中我們一般會使用系統(tǒng)默認的字體。
在一些產品設計中，為了體現產品屬性和品牌特征，往往會使用到特殊字體來作為主要文字，這種特殊字體通常需要在開發(fā)的過程中把對應字體嵌入到客戶端中。
2. 字體家族 FontFamily。
一個字體家族包含不同的字體，例如 Helvetica 就有超過 40 多個字體。這是為了在不同的場景中傳達信息而設計的人們在不同的使用場景下表達合適的意思。
3. 字號 FontSize
字號是文字的大小數值，在 web 端使用 px 來做為字號的單位，移動端 iOS 的字號單位 pt，安卓的字號單位是 sp。
字號大小決定了信息的層級和主次關系，合理的字號排版會使界面信息清晰有序，相反，糟糕無序的字號使用就會讓界面的信息變得混亂，影響閱讀體驗。
字號的大小使用是有文字所處的場景來決定的，但在界面設計中有會有一定的基礎限制。
以中文為例，在界面中最小的文字不應小于 10pt，否則就會因為太小而不能很好的識別，而英文和數字的最小字號限制則為 9pt。
那我們是如何確定 10pt 這個數值的，我們手機距離眼睛的閱讀距離（30cm）左右以及最佳閱讀角度（0.3），使用視角計算公式，我們能識別到的最低的文字大小為 h= 2*30·tan(0.3/2) ≈ 0.157cm ，
拿 iPhone X 的 ppi 458 為例，公式中的距離和高度的單位都是厘米，字體的單位是 pixel。因此我們還需要將二者之間做一輪轉換，完成轉換數值是 2.45（cm 到 inch）0.157cm=458*(0.157/2.54cm)= 20px。
4. 字階 Typographic Scale
從字號的使用中可以延伸出字階的概念，在傳統(tǒng)的平面和印刷設計中字階被用來營造版面平衡，經典印刷字階中的字體尺寸是保持一定韻律變化的，和古典的音階十分相似。
我們知道在為樂曲選擇不同的音階可以讓聽眾產生不同的感受，那么我們選擇不同的字階同樣也會影響我們的視覺感受。
定義有規(guī)律的字階是構建設計秩序感的基礎，在 UI 設計中元素單位需要遵循偶數原則，因為開發(fā)工程上是使用一倍圖進行布局，在@2x 和@3x 的適配過程中不會出現半像素。
這樣下來我們可以使用偶數來作為基數進行遞增，如 2、4、6、8、10。這種以 2pt 為字階的階梯關系也能很好的區(qū)分出字體層級。
對于最大字號就沒有過多限制，一般標題使用最大能達到 32pt，這種大字號的標題或文字設計需要根據具體場景來制定。
5. 行高 lineHeight
在字體設計中行距等同于行高，也就是文字外邊框整體的高度，字體距框的上下空隙為半行距，行高是這個高度通常會大于字本身的高度，例如 14 的文字行高為 22。
在過往的 UI 字體設計中通常是用字體乘一個固定的倍數去定義行高。但在實際設計中，這樣的方式會有一個問題，當字體越大，行高也會越來越大。
Ant Design 嘗試從「自然律」的啟發(fā)定義了字體行高，并定義出行高的計算規(guī)律，也就是行高和字體之間都相差 8。感興趣的同學可以參考：https://zhuanlan.zhihu.com/p/32746810
有兩個關鍵點大家可以參考：
Ant 這套字體在實際落地應用中更多是用于 web 端，在移動端中還有一些是段落文字的排版設計，這種場景中就需要單獨對字體進行行高的設置。一般是根據場景文字的大小的 1.5-2.0 倍，這樣段落文本的閱讀就會比較舒適。
需要注意的是，英文的行高是基線與基線之間的距離，基線（baseline）是英文字體結構中的概念，在 css 里文字的元素都是按基線來對齊的。西文基本行高是字號的 1.2 倍左右。
6. 行間距 spacing
說到行高就不得不提行間距這件事，首先中英文行間距都是一行的最底部與另一行的最頂部的距離。但在字體排版中我們需要要拋棄掉行間距的使用。
原因是在中文字體中行間距 = 行高 – 字號，我們在設計過程中需要盡量減少過多的屬性設置，僅通過行高來控制行間距，所以在文字行高的設定上我們就需要考慮多行顯示的效果。
7. 字重 FontWeight
字重是指文字筆畫的粗細，常規(guī)的字重會包含 4-6 種，例如細體、常規(guī)、粗體、斜體等幾種類型。
在開發(fā)框架中 font-weight 的屬性值還會有 100-900 的數值，這也代表了字體的粗細程度，font-weight 屬性值也與字體的字重描述詞一一對應。例如 normal 等價于 400，bold 等價于 700。
在 Figma 等設計軟件中我們一般遇到的字體都是使用一些通用的詞描述劃分其字重。
100 - Thin
200 - Extra Light (Ultra Light)
300 - Light
400 - Regular (Normal、Book、Roman)
500 - Medium
600 - Semi Bold (Demi Bold)
700 - Bold
800 - Extra Bold (Ultra Bold)
900 - Black (Heavy)
為了使文字在界面中更加穩(wěn)定，同時清晰有序。在多數情況下我們只使用 Regular、Medium 的兩種常規(guī)字重，在使用上需要和字號形成對應關系，特殊情況下可以使用更粗或更細的字重來拉開信息層級。
這里要著重說明下安卓的字重使用，通常安卓使用的第一順位默認字體字重僅 2 檔字重，如 Regular 和 Bold，所以在部分安卓機型上，字體會出現比較粗的情況。
所以在對接安卓開發(fā)的過程中，可以調整 font-family 中的字體適配順位，優(yōu)先適配字重更全的字體，保證安卓端能夠展示 Medium 的字重 ，以優(yōu)化內容可讀性。
8. x 高 x-height
在英文字體中，x 高是小寫字母 x 的高度，在 CSS 樣式中有一個單位叫 ex,就是基于 x 高的一種計量單位，1ex=小寫字母 x 的高度，也就是基線和主線之間的高度。
升部線、降部線：是英文字符的上限和下限。
基線 baseline：是西文字體設計與排版的概念，是既無升部也無降部的字符(如 x、e、z 等)坐落的一條線。
9. 字間距 Tracking
顧名思義，字間距是指字符與字符之間的水平距離。在西文排版中字間距是十分重要的參數，這是因為英文字母的寬度是不同的，往往需要動態(tài)調節(jié)字間距。
這個屬性在中文的排版中很少會用到，因為中文的字符區(qū)域是以正方形進行設計的，且在設計時就以已經考慮到了字符與字符之間的最佳距離，只有一些比較特殊的場景會用到。
10. 字偶間距 Kerning
字偶間距也叫做「字距調整」，是在字間距的基礎上，為實現不同字偶（一對字符）可以有不同字間距的調整值。我們都知道，不同的字母外形不同，所以只有同樣的字間距是不協(xié)調的。
例如，「NA」間是標準的字間距，而「WA」由于 W 和 A 的形狀可以重疊，所以需要負字偶間距才能達到協(xié)調一致的外觀。
一般我們不需要更改字間距和字偶間距，因為字體設計師已經對他們做過了最優(yōu)處理。在單獨對字體設計時就需要考慮字偶間距，以達到更協(xié)調的視覺效果。
11. 比例字體和等寬字體
比例字體：一般是西文的字體會應用到，比例字體根據字符外形設置不同字寬的字體，使得字體外形協(xié)調，可讀性更好。
等寬字體：我們中文可以理解就是等寬字體，因為中文都是等寬的方塊字，而英文的等寬字體經常被用于顯示計算機代碼示例。
12. 全角與半角
全角是指一個字符占用兩個標準字符（英文）的位置。中文字符、全角的英文字符、國標 GB2312-1980 中的圖形符號、特殊符號都是全角字符。半角是指一個字符占用一個標準字符的位置。
通常情況下，英文字母、數字、符號等都是半角字符，而漢語、日語、及朝鮮文等文字都是全角。
在排版設計中時也一定要記得中文搭配全角符號，英文使用半角符號。否則會出現諸如「謝謝.」或者「t hanks?！惯@樣的錯誤。
1. 體系化設計
在同一個產品中需要建立起體系化設計的思路，對主標題、副標題、常規(guī)文字、輔助信息等字體做統(tǒng)一的規(guī)劃，落地到具體應用場景中再進行微調。
建立體系化設計的思路有助于強化字體在落地的一致性問題，減少不必要的樣式出現。
2. 少即是多
在視覺展現上用盡量少的樣式去達到設計目的。避免使用大量字階、顏色、字重去強調視覺重點或對比關系。減少字體類型的應用，也能夠避免界面看起來零碎，使閱讀效率提高。
除字體外的其它元素設計也是同樣的道理，顏色、分割線、圖形，柵格等都需要遵循這個原則，避免樣式過多。
這樣做的好處是，在設計的過程中不同業(yè)務的設計師能夠很快的對齊，并且方便記憶，研發(fā)的效率也能夠提升。
3. 信息節(jié)奏感
在需要拉開信息層級的時候可以嘗試有節(jié)奏感的字階，參考 Ant 的字號設定就是從傳統(tǒng)音階的韻律中提取了字號的階梯，這種階梯關系能夠使字號的對比之間產生一種微妙的韻律感。
節(jié)奏感在文字布局中也常常被應用到，比如通過左對齊的方式能夠減量減少視線的移動，從而使用戶專注于文本，減少閱讀的時間。
1. iOS 系統(tǒng)字體規(guī)范
在 iOS 系統(tǒng)中，中文和英文分別是兩套字體，中文是字「蘋方」。英文字體有兩套，分別是無襯線體 San Francisco (SF) 和襯線字體「NewYork」。
在中文字體環(huán)境中，我們使用蘋方就可以，蘋方中帶有英文字符，所以中英文混排不需要特意設置英文字體，統(tǒng)一使用蘋方就可以。
iOS 系統(tǒng)還為有閱讀大字體的需求的用戶提供了動態(tài)調整的字體規(guī)范（系統(tǒng)字體顯示大小設置），蘋果官方字體可在 iOS 規(guī)范網站下載。
地址： https://developer.apple.com/fonts/
1. Android 系統(tǒng)字體規(guī)范
在 Android 系統(tǒng)中，為了更好的顯示效果，Goole 與 Adobe 聯合制作了「思源黑體」Noto 來作為中文默認字體，英文字體則為「Roboto」。
Material Design 字體規(guī)范，包含了 5 種類型的字體使用范圍，包含展示性標題、大標題、標題、正文、標簽合。
在安卓陣營中不少手機廠商還為自家的系統(tǒng)定制了字體，以請強化自身品牌
比如小米的「MiSans」：
OPPO 的「OPPO Sans」：
錘子手機的「Smartisan T 黑」：
2. 文本定義框
在 UI 設計軟件中，我們通常會使用定寬模式進行排版，也就是需要固定文本框的寬度，這樣做的目的是方便開發(fā)在查看設計稿的時候能夠清楚的理解文字的顯示區(qū)域。
文本框的高度則由支持多少行文字或者文字顯示區(qū)的高度來決定，比如我們設置一個支持兩行文字的標題，每行高 22，那么文本框的高就為 22*2 = 44。
有一種情況在輸入框中，我們在保證文字能夠被多露出半行時，需要將文字框高度增加半行，這樣在超出輸入區(qū)域時，用戶也能夠感知到可以滑動。
3. 段間距
顧名思義，段間距就是段落與段落之間的距離。相信很多人在打字的時候是有這樣的習慣的，當在輸入區(qū)域換段以后，會直接打一個回車增加段間距。
這是一種錯誤的排版方式，我們在長文本排版的時候一定要進行「段間距」 這個屬性設置，在開發(fā)還原的時候也一定要對段間距進行標注。
基于親密性原則，段間距在設置的時候盡可能的小于行高，且段間距需要隨字號大小而設定，避免出現小字應用上段間距過大而大字模式段間距又過小的問題。
4. 文字顏色的使用
首先需要避免使用純黑色來作為字體顏色，純黑色在白色背景上顯示時對比度過大，看久了就會感覺疲勞，讓用戶產生焦慮情緒。
字顏色如果和背景顏色太接近就會難以閱讀。在深色背景上對比度過大也會降低可讀性?？紤]到無障礙設計，參考 WCAG 2.0 的標準，文字與背景應該保持至少 4.5:1 ( AA 級別）的對比度，大文本的對比度應至少為 3.0:1。
對比度定義為系統(tǒng)顯示器上最亮顏色和最暗顏色之間的亮度差異。它是顯示性能最重要的指標之一。對比度越高，顏色區(qū)分越容易清晰。
參考：Web 內容可訪問性指南 2.0
對比度測試：contrast-ratio Contrast
我們還可以嘗試在色彩中加入一些品牌色彩傾向，這樣在突出品牌氛圍的同時，還可以讓頁面看上去不那么死氣沉沉的。
使用不透明度：在彩色背景上盡量不要使用灰色文字，可以通過使用降低不透明度的白色或黑色文本來創(chuàng)建信息層級和對比度。
5. 標點符號的設計
在中文排版規(guī)則中，為了保持閱讀順暢、體例一致，通常會有標點避頭尾的規(guī)則。即有的標點不能放在行首（如逗號、頓號、句號等），有的不能放在行尾（引號、前括號等）。
平面排版中處理遵守“先推入，后推出”原則，即不希望標點符號出現在行首時，應在已經標點擠壓的基礎上再次檢查是否有機會將其擠到前一行，如沒有擠壓機會再從前一行取最后一個字至下一行。
但“先推入，后推出”原則在 UI 場景中實現難度較大，意味著在判斷每個標點位置的時候，還需要進行多次邏輯判斷，技術成本太高。
因此我們以效率優(yōu)先，將“先推入，后推出”原則修改為「優(yōu)先推出式」標點避頭尾，即從上一行推出一個字排在下行的行首，避免行首、行末出現禁排的標點符號。
在標題排版中還經常會出現在最左側出現《書名號這樣的標點符號，在默認的字體標點符號通常會和字體等寬，這樣就會導致文字左側會有比較大的空隙，影響閱讀節(jié)奏感。
這種問題的處理方式一般是，將標題最左側的標點符號擠壓為半角的寬度，以保證文字有比較好的視覺呈現。
同樣如果在一行文字內連續(xù)兩個標點同時出現時，會導致文字中垂岸一大段空白，使文字過于跳躍。
這種問題的處理方式是，當連續(xù)出現兩個及以上的標點時，擠壓第二位及以后的標點為半角，縮減連續(xù)標點的占位，減少文章中出現的“空洞”。
需要注意的是標點符號字面分為“可調整”和“不可調整”兩類，其中不可調整的標點禁止擠壓。
“可調整”的標點符號可擠壓掉標點不占位部分的空間?！安豢烧{整”的是因為本身標點就是半個字寬所以就不需要擠壓。
6. 信噪比理論
「信噪比」（Signal-to-Noise Ratio）原本是用在聲音和圖像領域的概念，比如，音響設備播放聲音時，機器本身也會產生噪音，能不能原汁原味地播出聲音，同時最大限度地掩蓋噪音，是衡量設備好壞的重要指標。
同樣在界面設計中，用戶所看的內容可以分為“有用的信息”和“造成干擾的信息”。我們在設計時應該減弱或剔除無用的“噪音”，使有用的“信號”突顯出來。
信噪比也跟人的視覺識別系統(tǒng)息息相關，當大量的信息同時呈現在我們面前的時候，有時候我們會覺得很容易，一下子就可以找到有用的信息。有時候我們又會覺得很困難，要花一些時間才能找到，比如在一堆類似圖標中，就很難找到自己想用的。
在關于視覺識別中有這樣一個實驗，讓受試者從許多個「Ⅹ」里面挑出一個「○」，然后再讓他們從「┸」里面挑出一個「┼」，挑選O的速度比挑選┼的速度就慢很多。
這是因為在一堆Ⅹ中，○的形狀與X的差異較大，所以能夠被更快的識別，在界面設計中，對于不同類型的功能，我們可以采取使用不同的色彩來區(qū)分不同的功能，或者將某一個類型的功能聚合，這種方式可以幫助用戶更快的找到目標功。
回到字體排版，我們結合“信噪比”的理論，文字排版中需要盡可能的突出主要信息，減弱次要信息的展示使信息清晰干凈。
7. 字體與 icon 搭配
字體與圖標在很多場景中會搭配使用，我們在設計時可以定義字號與圖標大小的變量搭配規(guī)律，使文字與圖形保持更好的協(xié)調關系。
在標準文本框中，字體的高度與實際文字的上方和下方都有多余的空間，這個空間在實際開發(fā)還原中經常會遇到很多問題。
為了解決這方面的煩惱，CSS Inline Layout Module Level 3 新增了一個 leading-trim 和 text-edge 屬性。
可以讓我們刪除每一種字體中的額外間距，以便我們可以更好的計算相鄰塊元素之間的間距。請注意，采用修剪僅會影響文本框，它不會切斷其中的文本。
在中文排版中，我們也會遇到字體上下間距不一致的問題，包括當遇到不同的字體時，字體的行高也會不一致，當我們去掉上下去掉文字上下 padding 時就可以很省心的使文本垂直居中。
需要注意的是這個新 CSS 的規(guī)范還在編寫中，還未世界范圍的推進，不過有「微軟」團隊的扶持相信國際化也不會太遠了。
在這之前，我們想要盡可能的解決字符多出的間距問題，就需要手動把文字行高與客戶端系統(tǒng)默認行高保持一致?；蛘呤窃诳蛻舳酥行薷淖煮w的行高，使顯示的字體能夠和我們設計的字體行高保持一致。
Tokens 的意思是令牌，指令等，是一種計算機術語。在設計系統(tǒng)中，Design Token 則代表著設計變量，可以理解為封裝的視覺樣式參數。
Design Token 通過重新梳理歸納視覺樣式參數，并通過一套符合設計師、工程師理解的統(tǒng)一的語義化命名規(guī)則，代替前端代碼中的復雜代碼。
這樣可以方便設計師進行統(tǒng)一的管理和擴展，保證產品的一致性，也大大提升開發(fā)效率。
Design Token 分為名稱和值兩部分。名稱一旦定下來，便不可改變，值則可以根據需要進行調整和配置。
譬如我們規(guī)定在設計系統(tǒng)中字體大小的層級有四種: caption, body, headline, large, 在用代碼來實現的組件庫中，字體的大小只能取這四個類型，每個類型對應于一個或多個特定的值。值的可配置化是設計系統(tǒng)客制化的重要組成部分。
簡單來說就是，比如正文的字號在普通顯示模式下是 14、在大字顯示模式下是 16，引用語義化文字，命名為 Font Body，開發(fā)在實現的時候不需要具體寫出文字的代碼，只需要使用 Font Body，那么在普通和大字兩種模式下匹配不同的字號，這樣一套代碼就可以適配兩種模式了。
字體排版涉及的知識點真的非常多，很多點也只是簡要的在這里說了下，大家有想要探討的可以在評論區(qū)留言。
UI 字體與排版設計就分享到這里，希望對大家有所幫助，感謝閱讀。
歡迎關注作者微信公眾號：「UX實驗室」
聯系客服
