支付寶設計規范往期回顧：

• 《內部教程！超詳細的支付寶設計規范之圖形圖案篇》
• 《內部教程！超詳細的支付寶設計規范之配色篇》

一、字體設計的價值

文字是圖像記憶的一種衍生方式，人們為了簡明地表達事情、物品、人物等情景畫面，而演變出的簡明的記載方式。文字作為圖片的衍生，也是品牌形象的重要元素。而字體則是文字信息的外在表達方式，不同的字體不僅能影響排版，更會極大反應品牌的性格。如果說圖形和色彩是品牌的皮膚和血肉，那字體則是品牌的內在骨骼。

1. 信息呈現

文字是信息最直接最清晰的表達方式，而字體則直接決定了文字信息能否正確、準確地傳達，不清晰、難以辨認的字體會極大地削弱文字的表達。

2. 情感表達

文字本質上也是一種圖形，而字體則是這種圖形的外在形式。字體能在文字所表達的信息被理解之前，給人最直接的情感沖擊。

3. 個性塑造

不同的字體對應著不同的個性，比如圓潤的字體代表和藹可親，而潑墨的書法字體傳達了狂放不羈，正確的字體的選擇才能更好地配合其他元素來塑造品牌的性格。

二、字體的選用

字體是影響品牌形象的一種基本元素，只有使用合適的字體去搭配品牌圖形，才能讓品牌形象的整體效果最大化。

因此，在字體選擇上，最關鍵的就是根據由品牌特性推導出來的關鍵詞來找到字體的基本原則，最終我們確定了四個基本原則，即：端莊勻稱、筆畫嚴謹、清晰可讀、風格現代。

根據字體選用的原則，符合以上特點的可用字體有：微軟雅黑、思源黑體、華為黑體、蘋方、方正蘭亭黑、FF DIN 和 Helvetica Neue。這些字體都是相對常見，而且容易獲取版權的現代風格的字體。

三、中文字體的選用

1. 字體的對比

思源和冬青斜的筆畫末端會有變化，蘋方、微軟雅黑、蘭亭黑都是嚴格的橫平豎直，但在線條的寬度上有區別。微軟雅黑最粗，小字號閱讀會較為吃力。方正蘭亭黑從微軟雅黑派衍生出來，最顯著的變化是其字面字身比下調到正常的92%，縮減5%的寬度讓字形更修長，更寬大的字距讓文面更寬松易讀。這些改變讓蘭亭黑得以更好地適應其他應用場合。

2. 方正蘭亭黑的優勢

方正「蘭亭黑」是國內第一套為屏幕設計，并由此衍生出的家族系列字體。蘭亭黑的設計彌補了現有黑體的不足，它追求字體的整體形式美，強調文字設計的審美性和文化性。結構嚴謹、講究，禁得住仔細推敲琢磨，更注重字的「形象」；黑白調節均勻，重心一致，排列整齊；筆劃制作精良，線條剛柔相濟，富有彈性。閱讀舒適流暢，有鮮明的時代感。

支付寶作為互聯網金融公司，致力于打造「專業、信任，簡單」的形象。目前主流的無襯線中文字體中，方正蘭亭黑端正勻稱、設計嚴謹、易識別、文字線條粗細均衡，且為了適應激烈的競爭不斷在進化，這樣字體設計更符合這一形象。

四、英文和數字字體的選用

FF Din 和 Helvetica Neue 的對比

FF Din DIN 是德國標準協會，Deutsches Institut für Normung 的首字母縮寫。起源自德國鐵路的字體，Albert-Jan Pool 于1995年設計發行的民用字體。無襯線字體，易用耐看，字形開放，代表了德國設計。是設計師最愛的幾類字體之一。

Helvetica 是瑞士設計師馬克斯．米耶丁格設計的現代主義風格字體，中性，無襯線。字體末端嚴格保持橫平豎直，性格嚴謹、保守，沒有任何的修飾，適合不同分辨率的顯示器。而 Helvetica Neue 則是原來字體的升級版本，擁有更多的字重，更易于不同場合的應用。

DIN 的字形比較瘦長，會很適合顯示比較長的數字，但是小字號的情況下識別度較低。Helvetica Neue 的字形則相對偏胖，筆畫更清晰，而且小字號的情況下可讀性也很高。 考慮到支付寶作為一款全民使用的、偏金融和支付屬性的 APP，我們選擇中性的、可讀性高的 Helvetica Neue 作為英文和數字的品牌字體。

綜上所述，我們確定以方正蘭亭黑作為整個支付寶品牌的中文字體，適用于所有線下文字信息的表達和部分線上內容的展示。同時確定以Helvetica Neue作為支付寶品牌的英文和數字字體，適用于所有線上線下英文和數字的展示。

五、線上字體規范

1. 線上字體的選用

雖然根據支付寶的品牌特性我們確認下來以方正蘭亭黑作為品牌字體，但是在線上環境（移動端如 iOS 和安卓系統）中，字體的使用會強烈受到系統的限制。

因此規定，在 iOS 系統中，中文字體使用蘋方，英文字體使用 San Francisco；在安卓系統中，中文字體使用思源黑體，英文使用 Roboto；與此同時，數字采用 Helvetica Neue 這一跨平臺的字體。

2. 字號規范

字號的原理

在界面設計中，文字字號的大小決定了信息的層次和權重。整齊而又層次分明的不同字號大小的排列會讓整體的設計變得更加清晰有序。

不同的操作系統有自己特有的 UI 規格，但是在整體上，不管是 iOS 還是安卓系統都采用了以2的倍數的柵格系統。在移動端，不管是 UI 的尺寸還是間距，都應該為4的倍數。因此，我們規定在移動端，字號也是以2為基本進制單位，將字號大小從最小的20pt以4的倍數延續到40px。

同時針對一些特殊的大金額數字的展示，特別以16作為進制單位規定了從64px到112px的規范字號。

字號的使用

根據定下的字號，我們將支付寶 app 內部的信息分為7個層級，其中最高的為重要金額、數字的顯示，其字號區間為64~112px（在2x圖設計模式下），最低為輔助說明信息，其字號為20px。具體的建議使用方式如圖：

△ *? 星號部分的字號僅限于特定場合的使用

參考案例：

六、行高規范

1. 行高的原理

參考 w3c，眼睛到屏幕的距離25cm，目前通用的做法是，西文的基本行高通常是字號的1.2倍左右，而中文因為字符密實且高度一致，沒有西文的上伸部（ascender）和下延部（descender）來創造行間空隙，所以一般行高需要更大，根據閱讀人群劃分（兒童、年輕人、老年人），可達到 1.5 至 2 倍甚至更大。

2. 行高的規范

結合前面推導的字號和行高原理，對目前規范的每一個字體配上相應的行高，不管是在設計時還是進行開發實現，都必須遵從這一規范。

七、字重規范

1. 字重的規則

字重是指字體筆畫的粗細，一般在字體家族名后面注明的「Thin」「Light」「Regular」「Book」「Bold」「Black」「Heavy」等都是字重名稱。由于在一種字體可能用在標題、段落甚至海報，單一的字重可能并不會很好的適應這些場景，于是衍生出了同一個字體的不同字重。

在移動端頁面設計中，為了簡化字重的選擇，統一整體的效果，因此指定在不同的系統或字體中，限制設計中的字重使用。即：在蘋方中選擇「纖細」作為輕的字重，「中粗」為重的字重；思源黑體中選擇「細體」為輕的字重，「黑體」作為重的字重；Helvetica Neue選擇「Thin」為輕的字重，「Bold」為重的字重。

2. 字重的使用

同一個字體的不同字重能傳達不同的信息權重和情緒。細的字體給人以細膩、輕快的感覺，而粗體則給人著重和嚴肅的認知。因此適合的場景使用合適的字重非常重要。

「UI設計師如何選擇合適的字體」

• 《方正設計師：UI界面中的字體應用》
• 《除了 Helvetica ，UI 設計師還應該知道哪些經典字體？》
• 《超全面總結！「完美」的字體系統搭建與維護指南》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com