寫在前面，今天這篇文章比較偏基礎，但勝在講的很全面，自己做項目的時候也可以拿來自檢。關于字型排版的方方面面都講到了一些，尤其有一點是關于字型和字型的定義讓我學到不少新知識，之前我在翻譯的過程中沒太在意這2個詞的差別，今天因這篇文章專門去研究了一波，原來還是有不少講究的，一起來學習下吧。
排版在設計過程中扮演着非常重要的角色：好的版式可以讓閱讀變得毫不費力，而差的直接勸退使用者。
字型和字型有什麼樣的差別？
這裡我們回顧下基礎知識。有時字型（typeface）和字型（font）好像在使用上是可以互換的，這讓人産生困惑（彩雲注：實際上我也經常沒注意這個細節，是以還專門去查了相關的知識，确實是大有學問，在翻譯這篇文章時收獲很大）。字型是字型的一個子集，字型（font）是指字型（typeface）中特定的樣式和字重。
（彩雲注：typeface 是一個抽象的總體概念，而 font 是這個概念的具象物體。如果是可以互換的、現代的、數字藝術中的意義，就都翻譯成“字型”；如果原文在強調二者的差別，“typeface”了解為“字型”，而“font”可以了解“字型”。這樣來區分）
舉個例子，Helvetica是一個字型，但Helvetica Bold是 Helvetica 字型家族中的一個具體的字型。下面這張圖，你就能了解字型和字型的差別了。
選擇正确的字型風格
下面是三種比較常見的字型分類
襯線體
襯線體會在構成字母和符号的筆畫末端增加小裝飾性筆畫。
無襯線體
無襯線體在筆畫的末端和轉折處都比較幹脆，沒有裝飾。
裝飾性字型
用來突出某些内容的短文本。（彩雲注：一般不會大面積使用，用來作為裝飾樣式挺不錯的，比如放在内容的底部作為底紋之類的。）
保持字型種類盡量少
同時使用三種以上的字型會使網站看起來不美觀而且顯得非常擁擠。保持盡量少的字型種類，兩種挺好，但其實一種字型通常就足夠了。
使用一種字型的不同字重
在項目中，我習慣用一款免費字型“Inter”，看起來效果非常棒。
使用Inter字型在界面中的實際效果
使用襯線字型和無襯線字型
在下面這個網頁設計中，我會用到襯線字型“Kepler”作為标題，用無襯線字型“Futura”作為其他不同的文本内容。
2種不同字型在界面中的實際效果
使用裝飾性字型作為高亮内容
在下面這個案例中，我期望高亮文本内容“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中的樣子。
1）要建立一個文本樣式，在頁面上選擇一個文本>點選字型右邊的“4個點”的圖示>點選“+”圖示
2）輸入你要建立的字型元件名稱
如果你想對文本樣式進行結構化管理，分到不同檔案夾中，你可以在建立名稱的時候加上斜杠：檔案夾名/樣式名
注意一點，你可以在任何時候修改字型樣式，它将會自動在頁面中修改任何你之前用過這些樣式的字型。
對齊
左對齊
絕大多數人習慣從左往右閱讀，這也是為什麼設計師通常都會采用左對齊的原因。
居中對齊
當你覺得居中對齊在視覺上更美觀時，就可以嘗試使用居中對齊，此時其他内容也最好都居中對齊，保持統一。
當文本内容超過3行時，就不建議使用居中對齊，因為這會讓内容變得難以閱讀。
右對齊
我發現有2種文本需要右對齊的情況：
1）出于語言的需要，比如說希伯來語和阿拉伯語;
2）在表格和UI中，當字段名有不同的長度時，使用右對齊可以讓它更接近所引用的資料。（彩雲注：親密性原則的使用）
行高
每款字型依據它的字号都會有一個預設的行高。有時預設的行高看起來就還不錯，那麼這個行高就讓它自動而不需要做特别的改動。
但如果這個字塊看起來非常擁擠那就需要手動調整它的行高。
（彩雲注：在15px字号時，我通常會給到1.3到1.6倍的行高會比較舒服，就比如大家現在看到的文章排版樣式就是1.6倍行高。當然也要看具體的字号大小和字型）
文本塊寬度
你必須考慮到字塊的最大寬度，盡量避免字塊過長造成的閱讀困難。
我發現660-760px是一個比較好的字塊寬度範圍。當使用這個寬度時，你的眼睛不需要來回移動，閱讀起來就會非常舒服。
如何使用大寫字母
在短的标題和文本塊中适合用大寫字母，不要在一段很長的文本中都用大寫。
不要忘記字母間距
檢查顔色對比度
你在設計的時候能看清文本内容，不代表所有人都能看清楚。
（彩雲注：保持文字足夠的對比度，具體怎麼去走查，可以看看我之前寫的文章，有具體的方法和工具）
如果你有學到，記得分享到你的朋友圈哦~
原文：https://medium.com/@designer.ross/how-to-create-a-typography-system-for-your-website-367263803d19
作者：Ross Gorbachenko
譯者：彩雲Sky
出處:微信公衆号:彩雲譯設計
來源:https://mp.weixin.qq.com/s/TXyPjkySbW8gQWuBF1H9ew