選擇合适的字體是排版開始的第一步。當然排版中除了改變字體大小，其實還有很多内容可以調節。

這裡分享UI設計中字體排版需要掌握的技巧和标準原則～

01

行高/行間距

▼

首先介紹兩個容易混淆的概念——行高和行間距，兩者在中英文的用法也有差異。

中文行高：上一行文字的最底部與下一行文字的最底部之間的距離。

中文行間距：上一行文字的最底部與下一行文字的最頂部之間的距離(行與行之間的距離)。

基線是英文字體結構中的概念，英文的行高由基線決定。

英文行高:上一行的基線到下一行基線之間的距離(藍線标注)；

英文行間距:兩行字體之間的距離，即上一行的下限線與下一行的上限線之間的距離(橙線标注)。

02

字重/襯線

▼

字重(weight)是指字體的粗細程度。字重的粗細變化為我們在不同場景使用提供了更多選擇。

襯線體(serif)是指字形筆畫在首尾的裝飾和筆畫的粗細不同；無襯線體(sans-serif)沒有筆畫首尾的裝飾，筆畫粗細相同。

在同等字号下，無襯線字體看上去要比襯線更大，結構也更清晰，所以無襯線字體更适合在屏幕上使用。

03

層級結構

▼

絕大多數UI界面是由一些标準元素組成——文本、矩形/框、按鈕和圖标。

字體大小對比明顯的層級結構讓用戶更容易地找到重要信息，提升界面的可讀性。

04

最佳行長

▼

合适的行長能确保文本在不同的設備上都能易于閱讀。這裡有行長的基本用法：

• 中文一個字占兩字符，英文一個字占一字符，行長在頁面中的最大長度不能超過110個字符；
• 當字體變小時，增大行高可以獲得更好的可讀性和易讀性。

05

限制字體數量

▼

混合太多不同的字體會讓界面設計變得混亂。

選擇字體時盡量使用帶有多種字重的同一款字體，通過靈活調節字重達到界面統一的效果。

06

定義字體比例

▼

頁面中不同的位置(标題、正文、備注)要使用不同比例的字體，從而産生連貫的排版體驗。

07

使用可識别的提示

▼

通過上面的原則可以提升界面的可讀性和美觀性。但是如何提高界面中信息的可理解性呢？隻有真正把設計與信息結合在一起，才能使傳達的效率最優化：

• 避免使用專業術語。除非是為特定人群設計産品，否則應避免使用行業術語。
• 保持提示簡潔明了。例如在訪問網站時，将“隻有會員才可以訪問此功能”修改成“加入會員即可訪問”，這樣的提示更能切中要點。

08

強調重要信息

▼

使用顔色和視覺權重來強調重要信息，用較淺的文本來展示次要信息。這樣能将更多的注意力集中到更具活力的文本上，幫助用戶快速做出選擇。

09

考慮語言支持

▼

同一個詞語的拼寫長度會随着語言的不同而變化，所以要有足夠的空間來容納字符。

10

系統字體

▼

如果在字體選擇上出現困難，可以考慮使用iOS和Android原生的系統字體。它們支持豐富的字重、尺寸和樣式，利用這些字體也能打造舒适的閱讀體驗。

最後分享兩個實用的字體網站：

Google Fonts：在線調試、預覽各種字體

Type Wolf：最新的字體流行趨勢

答謝客官閱讀完此文後的支持

準備新人平面設計學習大禮包贈送領取

獲取方式：私信“領取”2字即可~

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!