今天這篇文章比較偏基礎，但勝在講的很全面，自己做項目的時候也可以拿來自檢。關于字體排版的方方面面都講到了一些，尤其有一點是關于字體和字型的定義讓我學到不少新知識，之前我在翻譯的過程中沒太在意這 2 個詞的區別，今天因這篇文章專門去研究了一波，原來還是有不少講究的，一起來學習下吧。

排版在設計過程中扮演著非常重要的角色：好的版式可以讓閱讀變得毫不費力，而差的直接勸退用戶。

一、字體和字型有什么樣的區別？

這里我們回顧下基礎知識。有時字體（typeface）和字型（font）好像在使用上是可以互換的，這讓人產生困惑（彩云注：實際上我也經常沒注意這個細節，所以還專門去查了相關的知識，確實是大有學問，在翻譯這篇文章時收獲很大）。字型是字體的一個子集，字型（font）是指字體（typeface）中特定的樣式和字重。

（彩云注：typeface 是一個抽象的總體概念，而 font 是這個概念的具象物體。如果是可以互換的、現代的、數字藝術中的意義，就都翻譯成“字體”；如果原文在強調二者的區別，“typeface”理解為“字體”，而“font”可以理解“字型”。這樣來區分）

舉個例子，Helvetica 是一個字體，但 Helvetica Bold 是 Helvetica 字體家族中的一個具體的字型。下面這張圖，你就能理解字體和字型的區別了。

二、選擇正確的字體風格

下面是三種比較常見的字體分類

1. 襯線體

襯線體會在構成字母和符號的筆畫末端增加小裝飾性筆畫。

2. 無襯線體

無襯線體在筆畫的末端和轉折處都比較干脆，沒有裝飾。

3. 裝飾性字體

用來突出某些內容的短文本。（彩云注：一般不會大面積使用，用來作為裝飾樣式挺不錯的，比如放在內容的底部作為底紋之類的。）

4. 保持字體種類盡量少

同時使用三種以上的字體會使網站看起來不美觀而且顯得非常擁擠。保持盡量少的字體種類，兩種挺好，但其實一種字體通常就足夠了。

5. 使用一種字體的不同字重

在項目中，我習慣用一款免費字體“Inter”，看起來效果非常棒。

使用 Inter 字體在界面中的實際效果

6. 使用襯線字體和無襯線字體

在下面這個網頁設計中，我會用到襯線字體“Kepler”作為標題，用無襯線字體“Futura”作為其他不同的文本內容。

2 種不同字體在界面中的實際效果

7. 使用裝飾性字體作為高亮內容

在下面這個案例中，我期望高亮文本內容“skincare routine”。我在這里就用到一個裝飾性字體“Northwell”，看起來效果挺不錯的。

免費就意味著不好嗎？

讓我們看看下面兩個相同的字體。左邊是免費的字型“Inter”，右邊是一個要花錢的字型“S?hne”（60 美元授權）。

你覺得怎樣？

就我個人而言，我并沒有覺得左邊的看起來比右邊的更糟糕，我覺得 2 個都非常好看。

因此，如果預算有限，可以到 Google 字體庫中選擇一款你喜歡的免費字體。

注意，如果你在網上發現一個字體，能下載和使用并不代表這就是免費的。你必須仔細閱讀這個字體的許可然后再決定在哪里使用它。多數情況下，當你看到一個好看的字體但卻發現它并非免費的。

此外，如果你決定使用一種字體（例如 Helvetica）并且會用到它的三種字重（粗體、中體、細體），你需要同時付費 3 次 $180 (3x$60)。

在這個網站 https://www.myfonts.com 你可以查到某個字體具體要花多少錢。

更多優質英文字體推薦：

三、使用默認的樣式

當你設計一個網頁時，你只能使用 6 種類型的標題。

你可以看到下一個標題的字號會比前一個更小。它能幫助在頁面上更好的組織信息和提高信息的可讀性。

在標題中通常會有這種限制，在正文中卻沒有，但根據我的經驗，4 種類型足夠了：

不僅僅在 PC 端需要考慮標題和正文的文本風格，在移動端同樣需要。

四、選擇合適的字體大小

我知道對于每個項目來說都會有其獨立的風格體系，字號也取決于所使用的字體，但讓我們嘗試去找到一些相對平均的字號和樣式盡可能的滿足更多的項目。

標題字號對照表（左邊是 PC，右邊是移動端）

正文字號對照表（左邊是 PC，右邊是移動端）

五、在 Figma 設置字體樣式

當你已經在 Figma 中建立了文本樣式時，創建文本塊會更容易。下面就是在 Figma 中的樣子。

① 要創建一個文本樣式，在頁面上選擇一個文本>點擊字體右邊的“4 個點”的圖標>點擊“+”圖標

② 輸入你要創建的字體組件名稱

如果你想對文本樣式進行結構化管理，分到不同文件夾中，你可以在創建名稱的時候加上斜杠：文件夾名/樣式名

注意一點，你可以在任何時候修改字體樣式，它將會自動在頁面中修改任何你之前用過這些樣式的字體。

1. 對齊

左對齊

絕大多數人習慣從左往右閱讀，這也是為什么設計師通常都會采用左對齊的原因。

居中對齊

當你覺得居中對齊在視覺上更美觀時，就可以嘗試使用居中對齊，此時其他內容也最好都居中對齊，保持統一。

當文本內容超過 3 行時，就不建議使用居中對齊，因為這會讓內容變得難以閱讀。

右對齊

我發現有 2 種文本需要右對齊的情況：

1. 出于語言的需要，比如說希伯來語和阿拉伯語;
2. 在表格和 UI 中，當字段名有不同的長度時，使用右對齊可以讓它更接近所引用的數據。（彩云注：親密性原則的使用）

2. 行高

每款字體依據它的字號都會有一個默認的行高。有時默認的行高看起來就還不錯，那么這個行高就讓它自動而不需要做特別的改動。

但如果這個字塊看起來非常擁擠那就需要手動調整它的行高。

（彩云注：在 15px 字號時，我通常會給到 1.3 到 1.6 倍的行高會比較舒服，當然也要看具體的字號大小和字體）

3. 文本塊寬度

你必須考慮到字塊的最大寬度，盡量避免字塊過長造成的閱讀困難。

我發現 660-760px 是一個比較好的字塊寬度范圍。當使用這個寬度時，你的眼睛不需要來回移動，閱讀起來就會非常舒服。

六、如何使用大寫字母

在短的標題和文本塊中適合用大寫字母，不要在一段很長的文本中都用大寫。

不要忘記字母間距

七、檢查顏色對比度

你在設計的時候能看清文本內容，不代表所有人都能看清楚。

彩云注：保持文字足夠的對比度，具體怎么去走查：

歡迎關注作者的微信公眾號：「彩云譯設計」