原文地址：Echo的設計筆記（公眾號）
作者：Echo
UI設計中，文字設置是必不可少的一環。
文字設置過程中涉及到字體類型、字號、字重、行高、行寬以及顏色等。
本文講述的文字設計規範，包含以下部分：
1、類型
2、字號
3、字重
4、行高
5、行寬
6、顏色
1、類型
iOS設備的系統默認字體，中文為蘋方，英文&數字為SF UI Text。
Android設備系統默認字體，中文為思源黑體，英文&數字為Roboto。
2、字號
不同的使用場景，文字的字號也不相同。文字的主使用場景分為：一級標題、二級標題、三級標題、正文和提示文字 。
文字最小字號一般為11。也有特殊情況，例如標籤裡面的文字，字號為10甚至可能更小。
3、字重
字重就是指字體筆畫的粗細。字重的等級是用來標明同一字體家族中不同粗細筆畫的字型。
UI設計中，常用的字重有兩個，一個是常規（Regular），另一個是中黑體（ Medium）。
正常文字使用常規體（Regular）。當需要突出層級展示，增加對比時使用中黑體（ Medium），中黑體（ Medium）常用於標題。
4、行高
字號大小等於文字高度，如下圖所示，字號為16時，行高設置為16，那麼其行高也是字體本身的高度（16pt）。
行高= 字號 + 行間距。
如下圖所示：行間距距離文字上方為3pt，行間距距離文字下方也為3pt。字體高度為16pt。
行高（22）= 字號（16） + 行間距（3+3）。
在界面過程中，需要規範字號大小和對應的行高。不然的話會存在設計布局問題。
舉個例子，設計一個標籤時，當字號為14時，行高為20，那麼為了保持視覺上字體到四周距離相同，那麼上下間距為4，左右間距為8。
因為行間距的存在，不能將上下間距和左右間距設置相同。
如果行高設置為14（文字本身大小），那麼上下間距應該也為8pt，而非4pt。
如下表格為iOS設計指南建議字號和對應的行高對照表。
下圖是Sketch默認字號和行高對照表：
可以看出iOS建議字號行高的對照表和Sketch默認的不一樣。
Sketch視覺稿到了開發實現，字號和對應行間距會出現不一致的情況，這樣會導致還原度出現問題。
解決行高無法完美開發還原的辦法有兩個：
1、將行高設置為字號大小，這樣的話，就不存在行間距的問題，可以保證完美還原。但是由於一倍行高會導致有些機型的字被切掉。
2、使用字體插件，這樣它可以自動修復Sketch文檔中的字體行高，做到Sketch中字體行高與開發中字體行高100%還原。
5、行寬
行寬=字體寬度+兩側距離字體的寬度
行寬作用於文本範圍，如下圖所示：
將行寬拉長，代表著設置了文本內容範圍，文本距離右側語音圖標為12pt，表示當文字內容距離語音圖標12pt時，文字打點或截斷展示。
6、顏色
字體顏色有兩種規則定義做法，一種是直接使用色值，如圖所示：
另一種做法是通過不透明度實現，通常以#000000為基準，設置不同的不透明度，如下圖所示：
綜合而言，使用不透明度的方法，使用場景更加廣泛一些。
可愛的你請把可愛的我設為「星標」。