設計師必看的(of)字體與排版應用(use)指南
文字是(yes)界面中最核心的(of)元素，是(yes)産品傳達給用(use)戶的(of)主要(want)内容，它的(of)承載體即是(yes)字體。
前半部分從字體的(of)最基本屬性（字族、字号、字重、大(big)小寫等）說起，熟悉字體的(of)那些特征，了(Got it)解字體在(exist)界面中的(of)作(do)用(use)，以(by)及iOS與Android系統字體的(of)使用(use)規範。
字體基礎知識
字體是(yes)界面設計的(of)基石
字體是(yes)排版中最重要(want)的(of)元素，對用(use)戶的(of)閱讀體驗有着至關重要(want)的(of)作(do)用(use)。一(one)般來(Come)說，設計師需要(want)了(Got it)解的(of)字體通常有中文字體和(and)西文字體兩種。西文字體由來(Come)已久，從最早的(of)羅馬字體到(arrive)現在(exist)蘋果手機中的(of)SF-UI字體，經曆了(Got it)許多設計上(superior)的(of)變革。而中文字體的(of)發展并沒有西文字體那麽順利，數量上(superior)也遠遠落後于(At)其他(he)字體。但中國(country)設計正在(exist)崛起，我(I)們(them)也看到(arrive)越來(Come)越多的(of)設計團隊和(and)設計師加入字體設計的(of)隊伍，數量上(superior)正在(exist)呈指數級别增加。
設計是(yes)一(one)門非常嚴謹的(of)學科，裏面蘊含了(Got it)很多道理，就連最基礎的(of)字體選擇和(and)排版，都經過了(Got it)将近千年的(of)發展和(and)演變，有非常多的(of)專業知識。像平面設計一(one)樣，在(exist)UI設計中字體的(of)使用(use)也有相應的(of)規範，設計師應懂得這(this)些基礎知識，才能将字體爲(for)自己所用(use)。
本篇就從我(I)們(them)常用(use)的(of)設計軟件（sketch、Figma、P hotoshop）字符面闆開始，來(Come)聊聊有關字體與排版應用(use)方面的(of)知識。
字體的(of)那些屬性
Font 中文翻譯爲(for)「字型」，是(yes)指字的(of)粗細、寬度和(and)樣式，是(yes)一(one)套具有同樣風格和(and)尺寸的(of)字形。例如「Regular_16pt_SF-UI」。
Typeface 中文翻譯爲(for)「字體」，是(yes)指一(one)整套的(of)字形，一(one)個(indivual)或多個(indivual)字型的(of)多尺寸的(of)集合，例如「SF-UI」裏有不(No)同粗細（Regular、Blod、Light）和(and)不(No)同寬度（12pt、14pt、20pt）。
Glyph 中文翻譯爲(for)「字形」，是(yes)指單個(indivual)字的(of)形體或是(yes)字體的(of)骨骼。 同一(one)字可以(by)有不(No)同的(of)字形，而不(No)影響其表達的(of)意思，例如漢字中的(of)「令」字，第三筆可以(by)是(yes)一(one)點或一(one)撇， 最末兩筆可以(by)作(do)「ㄗ」或「マ」。
Font和(and)Typeface常常被混淆使用(use)，其實可以(by)這(this)樣理解，前者指一(one)種設計，後者指具體的(of)産品。
1. 族類 GenericFamily
族類就是(yes)不(No)同字體類型，例如阿裏巴巴普惠體、方正新書宋、站酷酷黑體等。
而這(this)些衆多字體又可分爲(for)「襯線體」和(and)「無襯線體」。
襯線體
宋體就是(yes)襯線體，特點就是(yes)筆畫開始和(and)末端的(of)地(land)方都有額外的(of)裝飾，且筆畫的(of)粗細有所不(No)同。在(exist)傳統的(of)正文印刷中，普遍認爲(for)襯線字體能帶來(Come)更加的(of)可讀性。常見的(of)襯線體有宋體、Times New Roman、Georgia等。
襯線體一(one)般在(exist)APP中比較少見，文字閱讀類偏愛這(this)種襯線體，例如「單讀」，大(big)标題用(use)的(of)是(yes)「華康標宋體」、正文内容用(use)的(of)是(yes)「蘋方-纖細」而英文用(use)的(of)是(yes)「XCross Traditional Bold」
黑體
黑體是(yes)無襯線字體，特點是(yes)筆畫沒有額外的(of)裝飾，且筆畫的(of)粗細差不(No)多。相比嚴肅的(of)襯線體，簡單幹淨的(of)無襯線體給人(people)一(one)種休閑輕松的(of)感覺。因此大(big)多數App都是(yes)使用(use)黑體作(do)爲(for)默認字體。如冬青黑體、思源黑體、Myriad等。
2. 字族 FontFamily
一(one)個(indivual)族類包含不(No)同的(of)字體，然而一(one)個(indivual)字體又可能有好幾種字族。如果電腦安裝了(Got it)Helvetica，在(exist)Sketch字體選擇器中會發現超過40多個(indivual)前綴是(yes)Helvetica的(of)字族。這(this)是(yes)爲(for)了(Got it)協助人(people)們(them)在(exist)不(No)同的(of)使用(use)場景下表達合适的(of)意思。
知識點：
基本字族包括細體、标準、粗體、斜體，值得注意的(of)是(yes)，斜體字常用(use)在(exist)引用(use)文本上(superior)，代表「本段文字引用(use)的(of)是(yes)另一(one)個(indivual)著作(do)」的(of)含義。
例如：「若我(I)們(them)能以(by)滿懷新鮮的(of)眼神去觀照日常，「設計」的(of)意義定會超越技術的(of)層面，爲(for)我(I)們(them)的(of)生(born)活觀和(and)人(people)生(born)觀注入力量。」（引自原研哉的(of)《設計中的(of)設計》）
3. X-height（X字高）
在(exist)西文字體中，x高度是(yes)指字母的(of)基本高度，就是(yes)基線和(and)主線之間的(of)距離。它指一(one)個(indivual)字體中小寫字母的(of)x高度，在(exist)現代字體設計領域，x高度代表了(Got it)一(one)個(indivual)字體的(of)設計因素，因此在(exist)一(one)些場合字母x本身并不(No)完全等于(At)x字高。
除了(Got it)字母a、c、e、m、n、o等高度一(one)樣，還有一(one)些小寫字母的(of)字高都比x字高要(want)大(big)，并分爲(for)兩類：一(one)是(yes)含有升部的(of)字母，字母筆畫含有向上(superior)部分，如字母b、d、h；另一(one)類是(yes)含有降部的(of)字母，字母的(of)筆畫向下超過了(Got it)基線，如字母g、p、q。
4. 字号 Font-size
字号就是(yes)字體大(big)小，通常在(exist)網頁端使用(use)px作(do)爲(for)字号的(of)單位。移動端興起後，iOS字體單位是(yes)pt，Android是(yes)sp。
以(by)iOS爲(for)例，正文字号不(No)應小于(At)11pt，這(this)樣才能被正常閱讀，建議在(exist)14-18pt之間。在(exist)使用(use)較大(big)的(of)字體來(Come)獲得更好的(of)易讀性的(of)同時(hour)，我(I)們(them)也應相應地(land)減小字體的(of)字重，考慮Light、Thin，因爲(for)過重的(of)字體會太過醒目，影響其他(he)内容的(of)顯示效果。
當字體大(big)小爲(for)12-18pt時(hour)，建議使用(use)Regular，18-24pt時(hour)，使用(use)Light，24-32pt,使用(use)Thin，當字體大(big)小超過32pt時(hour)，建議使用(use)Ultralight。
字号大(big)小決定了(Got it)信息的(of)層級和(and)主次關系，合理有序的(of)字号設置能讓界面信息清晰易讀、層次分明；相反，糟糕無序的(of)字号使用(use)會讓界面混亂不(No)堪，影響閱讀體驗。
設計中的(of)最小字号
我(I)們(them)都知道在(exist)界面設計中最小字号不(No)能低于(At)20px，那是(yes)因爲(for)，正常情況下，在(exist)手機距離眼睛30cm左右，使用(use)視角計算公式，我(I)們(them)能識别到(arrive)的(of)最低的(of)文字大(big)小爲(for)h= 2*30·tan(0.3/2) ≈ 0.157cm ，拿我(I)們(them)經常使用(use)iPhone7的(of)尺寸1334×750爲(for)例。iPhone7的(of)dpi爲(for)324，也就是(yes)一(one)英寸上(superior)顯示324個(indivual)像素，1英寸爲(for)2.54cm，那麽0.157cm=324*(0.157/2.54cm)= 20px。
字号的(of)基數關系
我(I)們(them)在(exist)做設計時(hour)，字号的(of)單位最好使用(use)一(one)個(indivual)基數作(do)爲(for)倍增，如2、4、6、8、10 或者3、6、9、12。但其實我(I)們(them)在(exist)做移動端設計時(hour)，單位需要(want)遵循偶數原則，因爲(for)開發中的(of)單位是(yes)以(by)一(one)倍圖的(of)基數來(Come)進行計算。那麽其實在(exist)制定字體規範中，使用(use)2爲(for)單位會導緻字号過多，且2号字體的(of)差異化不(No)大(big)。所以(by)在(exist)字号方面我(I)們(them)使用(use)4作(do)爲(for)單位是(yes)比較合适的(of)：一(one)是(yes)适配後在(exist)@2x跟@3x不(No)會出(out)現半像素，二是(yes)使用(use)4爲(for)單位，能滿足字體大(big)小的(of)均衡。
5. 字重 FontWeight
Weight，中文翻譯爲(for)「字重」，是(yes)指字體筆畫的(of)粗細，字體中很重要(want)一(one)個(indivual)概念，不(No)同字重傳遞出(out)來(Come)視覺感受完全不(No)一(one)樣。一(one)般在(exist)字體家族名後面注名Thin、Light、Regular、Blod、Black、Heavy等。不(No)同的(of)字體廠商劃分字重各有不(No)同，例如「蘋方」字體就有6種不(No)同的(of)字重。
一(one)般都有細體、正常、粗體三種基本字族。在(exist)應用(use)場景上(superior)，通常「細體」多用(use)于(At)超大(big)号字體；「正常」用(use)于(At)正文内容；「粗體」表示強調，多用(use)于(At)标題；
兩種字重屬性
輕字重：傳遞出(out)輕盈放松的(of)視覺感受，常配合粗的(of)字重使用(use)，在(exist)一(one)些輔助信息，說明文案時(hour)候使用(use)；
重字重：視覺感受莊重，很重要(want)，常用(use)在(exist)重點強調的(of)文字，頁面大(big)标題，數字，引導行動操作(do)點上(superior)等；
例如百度網盤「發現」頁就用(use)了(Got it)Regular、Medium、Semibold三種字重以(by)拉開信息層次對比；
知識點：
需要(want)注意的(of)是(yes)：在(exist)進行界面設計時(hour)，不(No)要(want)用(use)軟件自帶的(of)文本加粗，它不(No)僅破壞了(Got it)字體本身的(of)美感，還改變了(Got it)文字原本的(of)字寬，小字體下會模糊不(No)清，合理的(of)方式是(yes)使用(use)字體本身的(of)字重來(Come)控制粗細。
注意超細體的(of)字體
字重超細的(of)字體要(want)謹慎使用(use)。如果你設計的(of)文本是(yes)裝飾性倒還好，如果是(yes)需要(want)用(use)戶能清晰閱讀的(of)，就要(want)特别慎重，能不(No)用(use)就不(No)用(use)，否則在(exist)部分低分辨率的(of)手機屏幕上(superior)看起來(Come)會非常糟糕。
6. 字色 FontColor
字色即文字對應的(of)顔色，不(No)做過多解釋。需要(want)大(big)家注意的(of)是(yes) 遠離純黑色和(and)純灰色！
純黑色就像沒有生(born)命力的(of)深淵，能吞噬所有細節，使用(use)戶陷入冷冰冰的(of)極端情緒中。純黑色還會與白色産生(born)強烈的(of)對比度，看久了(Got it)就會感覺疲勞，讓用(use)戶産生(born)焦慮情緒。
還有就是(yes)真實世界中是(yes)不(No)存在(exist)純黑色的(of)。嘗試在(exist)色彩中加入一(one)些色相，這(this)樣就不(No)會讓頁面看上(superior)去死氣沉沉的(of)。例如iOS系統「設置」頁面背景色就是(yes)加入了(Got it)白色的(of)低飽和(and)度藍色，看上(superior)去柔和(and)自然。
7. 字符樣式 FontStyle
除了(Got it)以(by)上(superior)幾個(indivual)最常用(use)的(of)文字屬性外，還有幾個(indivual)使用(use)頻率比較低的(of)字體設置。例如帶下劃線的(of)、删除線的(of)文本。「下劃線文本」一(one)般出(out)現在(exist)「文字按鈕」或帶鏈接的(of)網址，而「删除線文本」一(one)般會出(out)現在(exist)商品櫥窗的(of)現價、原價
例如「CCtalk」的(of)課程現價和(and)原價的(of)區分，原價用(use)删除文本，「微信讀書」文章底部「加入書架 随時(hour)閱讀」就是(yes)帶鏈接的(of)下劃線文本。
8. 字符選項 Text options
Ps和(and)Sketch都有文字（字符）選項一(one)欄，主要(want)針對西文字母大(big)小寫格式變換的(of)設置。最常見有默認大(big)小寫、全部大(big)寫、全部小寫和(and)小型大(big)寫字母，Ps裏面還有「上(superior)标」和(and)「下标」。
默認大(big)小寫：即正常大(big)小寫格式，軟件不(No)做幹預；
全部大(big)寫：如果輸入的(of)是(yes)小寫字母，選擇這(this)個(indivual)選項，軟件會強制把小寫改爲(for)大(big)寫；
全部小寫：如果輸入的(of)是(yes)大(big)寫字母，或者隻是(yes)首字母大(big)寫，選擇這(this)個(indivual)選項，軟件會強制把所大(big)寫改爲(for)小寫；
小型大(big)寫字母：這(this)個(indivual)選項比較特殊，所謂「小型大(big)寫」就是(yes)，在(exist)字号一(one)樣的(of)情況下，與小寫字母一(one)樣高，外形與大(big)寫字母保持一(one)緻。
注意英文大(big)寫
純大(big)寫的(of)字母文本本身不(No)太适合大(big)篇幅閱讀，會加大(big)閱讀障礙，用(use)的(of)時(hour)候注意要(want)額外拉開字母之間的(of)字間距，提升可讀性。
9. 全角與半角 Full-width and half-width
全角是(yes)指一(one)個(indivual)字符占用(use)兩個(indivual)标準字符的(of)位置。中文字符、全角的(of)英文字符、國(country)标GB2312-1980中的(of)圖形符号、特殊符号都是(yes)全角字符。半角是(yes)指一(one)個(indivual)字符占用(use)一(one)個(indivual)标準字符的(of)位置。
通常情況下，英文字母、數字、符号等都是(yes)半角字符。半角和(and)全角主要(want)是(yes)針對标點符号來(Come)說的(of)，因爲(for)正常情況下沒有打全角英文的(of)需求。
知識點：
在(exist)設計作(do)品時(hour)也一(one)定要(want)記得中文搭配全角符号，英文使用(use)半角符号。否則會出(out)現諸如「你好.」或者「t h a n k s。」這(this)樣的(of)錯誤。可按鍵盤「capslock」鍵切換全角和(and)半角。這(this)個(indivual)小知識點雖然非常基礎，卻也是(yes)設計中經常出(out)錯的(of)地(land)方。
iOS與Android
衆所周知，iOS和(and)Android兩大(big)陣營都有各自的(of)設計系統，要(want)作(do)出(out)符合平台規範的(of)設計，設計師應熟讀各平台的(of)設計規則。因爲(for)本篇以(by)講字體爲(for)主，我(I)們(them)就來(Come)看看iOS和(and)Android各自字體的(of)規範是(yes)什麽樣的(of)。
1. iOS字體規範
可用(use)字體
在(exist)iOS系統規範中，中文字體是(yes)「蘋方」字體。英文字體是(yes)「San Francisco」也簡稱「SF-UI」，英文還有另外一(one)個(indivual)襯線體「NewYork」。除了(Got it)在(exist)iOS和(and)Mac OS上(superior)，還單獨爲(for)Watch OS單獨對字體進行了(Got it)調整，命名爲(for) San Francisco Compact。
字體設置
因爲(for)在(exist)英文字體下，字體環境比較複雜，爲(for)了(Got it)讓字體在(exist)任何地(land)方看起來(Come)都最佳，蘋果官方針對不(No)同字号開發了(Got it)兩套「SF-UI Text」和(and)「SF-UI Pro」字體，而每套字體下面又分爲(for)Text（文本模式）與Display（展示模式）兩種屬性，Text隻有6個(indivual)字重，而Display則有9個(indivual)字重。
這(this)麽多類型的(of)字體我(I)們(them)該怎麽用(use)呢？iOS的(of)建議是(yes)，在(exist)字号小于(At)20pt時(hour)，使用(use)SF-UI Text，大(big)于(At)或等于(At)20pt時(hour)，則使用(use)SF-UI Display。這(this)需要(want)我(I)們(them)在(exist)界面設計時(hour)手動切換。
對于(At)「NewYork」，小于(At)20點的(of)文本使用(use)小号，20到(arrive)35點之間的(of)文本使用(use)中号，36到(arrive)53點之間的(of)文本使用(use)大(big)号，54點或更大(big)的(of)文本使用(use)特大(big)号。
蘋方字體提供了(Got it)6個(indivual)字重供設計開發者使用(use)。所以(by)從iOS11開始，iOS使用(use)Semibold中粗體、大(big)字号作(do)爲(for)界面的(of)标題變的(of)更爲(for)流行起來(Come)，較爲(for)明顯的(of)有 iOS 中的(of)一(one)些原生(born)APP，比如App Store、Apple Music…
知識點：
在(exist)iOS中，默認字體單位是(yes)「pt」，正文字号不(No)應小于(At)11pt，建議在(exist)15-18pt之間。在(exist)使用(use)較大(big)的(of)字體來(Come)獲得更好的(of)易讀性同時(hour)，也應該相應地(land)減小字體的(of)字重，因爲(for)過重的(of)字體會太過醒目厚重，影響其他(he)内容的(of)顯示效果。
iOS更全面的(of)文字設置
動态類型可以(by)通過讓讀者選擇他(he)們(them)喜歡的(of)文本大(big)小來(Come)提供額外的(of)靈活性，除了(Got it)标準的(of)動态類型大(big)小之外，iOS系統還爲(for)有閱讀大(big)字體的(of)需求的(of)用(use)戶提供了(Got it)許多字号上(superior)的(of)調整（可在(exist)系統字體顯示大(big)小設置）
iOS「顯示與亮度」下設置「文字大(big)小」模式
「蘋方」和(and)「SF-UI」字體可在(exist)iOS規範網站免費下載
網址：https://developer.apple.com/fonts/
2. Android字體規範
可用(use)字體
在(exist)Android設備中，Android始祖Google爲(for)了(Got it)更好的(of)追求視覺效果，聯合了(Got it)Adobe設計發布了(Got it)「思源黑體」(Noto)來(Come)作(do)爲(for)中文默認字體，「Roboto」爲(for)英文字體。
字體類型
思源黑體，英文名爲(for)「NotoSans CJK」。該字體不(No)僅僅在(exist)字形上(superior)更易于(At)在(exist)屏幕閱讀，并且擁有7種字重，充分滿足了(Got it)設計的(of)要(want)求。
英文「Roboto」字體，隻有6個(indivual)字重，視覺語言與思源黑體Noto保持一(one)緻。該字體具有「現代的(of)」和(and)「平易近人(people)」的(of)氣質，是(yes)「Material Design」設計風格下的(of)推薦字體。
字體設置
Material Design字體規範，字體類型比例支持的(of)十三種樣式的(of)組合。它包含可重用(use)的(of)文本類别，每種類别都有預期的(of)應用(use)程序和(and)含義。
注：Web浏覽器根據根元素大(big)小計算REM（根em大(big)小）。 現代網絡浏覽器的(of)默認值爲(for)16px，因此轉換爲(for)SP_SIZE / 16 = rem。
△Material Design設計類型比例。（字母間距值與Sketch兼容。）
知識點：
值得注意的(of)是(yes)，在(exist)安卓的(of)字體單位中，不(No)再以(by)px，pt作(do)爲(for)單位而是(yes)統一(one)的(of)使用(use)了(Got it)sp，換算方式是(yes)：
px = sp*ppi/160 ，sp = px / (ppi / 160)
以(by)iPhone7爲(for)例，尺寸是(yes)750×1334，密度326ppi 來(Come)換算，那麽Android的(of)1dp = 1 * 326/160 ≈ 2px
「思源黑體」和(and)「Roboto」字體可在(exist)GoogleFonts免費下載，并且可以(by)商用(use)。
網址：http://www.googlefonts.cn/
3. 話題擴展
值得一(one)提的(of)是(yes)，越來(Come)越多的(of)手機廠商，爲(for)了(Got it)能夠強化自身的(of)品牌形象，推出(out)了(Got it)定制款的(of)字體。
比如小米的(of)「小米蘭亭」：
OPPO的(of)「OPPO Sans」：
三星的(of)「SamsungOne」：
字體基礎知識小結
正如開頭所說，文字是(yes)界面中最核心的(of)元素，字體作(do)爲(for)基本語言，是(yes)設計中體現品牌很重要(want)一(one)點，字體選擇非常重要(want)，字體也是(yes)設計中占比（約 80%）最大(big)的(of)内容，所以(by)我(I)們(them)一(one)定要(want)熟練掌握，接下來(Come)将從文字行高、字間距、行間距等說起，圍繞字體排版繼續聊。
人(people)們(them)是(yes)如何閱讀的(of)
設計中，好的(of)排版能讓用(use)戶愉快地(land)閱讀，而不(No)好的(of)排版則會給用(use)戶帶來(Come)糟糕的(of)閱讀體驗。因此排版的(of)潛在(exist)重要(want)性不(No)容忽視。
無論是(yes)在(exist)西方國(country)家還是(yes)亞洲國(country)家，大(big)部分人(people)們(them)的(of)閱讀習慣都是(yes)從左到(arrive)右。這(this)種閱讀模式已經延續了(Got it)幾百年，因此如無特殊需求，你應該使你的(of)文本左對齊，這(this)樣符合人(people)們(them)一(one)貫的(of)閱讀習慣（阿拉伯地(land)區除外）。人(people)缺乏耐性，在(exist)閱讀過程中更似是(yes)一(one)種遠近不(No)定的(of)跳躍「掃視」。枯燥的(of)文字如果沒有經過任何排版處理，會讓讀者瞬間失去閱讀的(of)興趣，除非非讀不(No)可。所以(by)通過改進文字内容的(of)結構和(and)排版來(Come)提高閱讀性乃至「誘讀性」，是(yes)一(one)件十分必要(want)的(of)事情。
文字排版中的(of)常見元素
1. 字間距與字偶間距
字間距，英文名爲(for)「spacing」，即字符間的(of)距離，事實上(superior)他(he)是(yes)字符圖形外邊界框的(of)尺寸和(and)字符在(exist)方框中的(of)位置的(of)距離。
字偶間距，英文名爲(for)「Kerning」，也叫做「字距調整」，是(yes)在(exist)字間距的(of)基礎上(superior)，爲(for)實現不(No)同字偶（一(one)對字符）可以(by)有不(No)同字間距的(of)調整值。我(I)們(them)都知道，不(No)同的(of)字母外形不(No)同，所以(by)隻有同樣的(of)字間距是(yes)不(No)協調的(of)。例如，「NA」間是(yes)标準的(of)字間距，而「WA」由于(At)W和(and)A的(of)形狀可以(by)重疊，所以(by)需要(want)負字偶間距才能達到(arrive)協調一(one)緻的(of)外觀。
在(exist)大(big)段落文字排版時(hour)，我(I)們(them)一(one)般不(No)需要(want)更改字間距和(and)字偶間距，因爲(for)字體設計師已經對他(he)們(them)做過了(Got it)最優處理。在(exist)對一(one)組字符單獨設計時(hour)，就需要(want)考慮字偶間距，以(by)達到(arrive)更協調的(of)視覺效果。總的(of)來(Come)說，字号越小，字距應當相對越大(big)，行高也應該相對越大(big)。反之亦然。
西文字間距還分爲(for)：比例字體和(and)等寬字體
比例字體：根據字符外形特點設置不(No)同字寬的(of)字體，使得字體外形協調，可讀性更好；
等寬字體：每個(indivual)字符設置相同字寬的(of)字體，字符間距較大(big)，它們(them)經常被用(use)于(At)顯示計算機代碼示例；
2. 字間距的(of)三種形式
标準間距：即默認的(of)字間距，字與字之間的(of)距離不(No)大(big)也不(No)小，在(exist)設計中要(want)根據不(No)同的(of)字号設置不(No)同的(of)字間距來(Come)排版，往往需要(want)我(I)們(them)根據字号、字重的(of)不(No)同動态調節間距參數，避免千篇一(one)律使用(use)軟件默認間距。
緊湊間距：字與字之間的(of)距離向裏縮進，在(exist)字符工具裏的(of)「字間距」數值爲(for)負數，一(one)般在(exist)-5%~-30%不(No)等，通常用(use)在(exist)标題中。
寬松間距：與緊湊型間距相反，字與字之間間距向外擴大(big)，在(exist)字符工具裏的(of)「字間距」數值爲(for)正數，一(one)般在(exist)5%~30%不(No)等，通常用(use)在(exist)正文中。
知識點：
提示：字間距雖然有以(by)上(superior)三種形式，但是(yes)在(exist)實際工作(do)中也要(want)具體問題具體分析，例如有些中文字體本身「外邊框」的(of)距離就比較大(big)，如果再加大(big)字間距，就會顯得過于(At)分散。
3. 西文詞距
在(exist)西文閱讀時(hour)，視覺上(superior)的(of)自然界限是(yes)「詞距」而不(No)是(yes)「字距」。如果排版時(hour)需要(want)進行例如「兩端對齊」的(of)行内間距調整，中文直接可以(by)動「字距」，把調整量均勻地(land)放到(arrive)每個(indivual)字間裏；而西文卻是(yes)動「詞距」，隻能把調整量加到(arrive)詞距裏，而單詞内部的(of)字距依然是(yes)保持字體設計師預設的(of)原始字距，這(this)是(yes)保證西文易讀性的(of)關鍵所在(exist)。
4. 标點避頭尾
在(exist)古代，書籍排版可以(by)做到(arrive)字間距恒定，原因是(yes)古代不(No)存在(exist)「标點」，也就沒有「标點避頭尾」導緻的(of)種種問題。而現代漢語存在(exist)标點符号，有的(of)标點不(No)能放在(exist)行首(如逗号、頓号、句号等)，有的(of)不(No)能放在(exist)行尾(引号、前括号等)。處理方式叫做「優先推出(out)式」标點避頭尾，通過将本行内的(of)标點寬度進行擠壓後，騰出(out)了(Got it)空間給本來(Come)排不(No)到(arrive)的(of)逗号，确保了(Got it)字間距的(of)恒定（篇幅限制，本文暫不(No)談文字編排具體調整方法）。更詳細的(of)介紹可移步字體設計與排印網站 Type is Beautiful 了(Got it)解。
5. 文本框
在(exist)設計軟件中，我(I)們(them)在(exist)添加文本時(hour)，就會創建一(one)個(indivual)文本區域，例如Sketch中文本區域有三種類型，自動寬度、自動高度、固定尺寸，而「固定尺寸」可配合「設置文字層垂直對齊方式」使用(use)。
6. 對齊方式
文本的(of)對齊方向有左、中、右三種對齊方式。文本對齊的(of)标準是(yes)基于(At)文本區域的(of)邊界決定的(of)，隻有設置固定的(of)文本區域對齊才有意義。
7. 行高
行高或行距是(yes)文字排版的(of)基礎參數，也是(yes)排版品質的(of)先決要(want)素之一(one)。行高是(yes)一(one)行文本垂直方向的(of)高度，這(this)個(indivual)高度和(and)字高無關，文字内容水平居中，如下圖所示：
8. 英文行高
英文的(of)行高指的(of)是(yes)一(one)行英文的(of)基線與下一(one)行英文的(of)基線之間的(of)距離，基線（baseline）是(yes)英文字體結構中的(of)概念，在(exist)css裏文字的(of)元素都是(yes)按基線來(Come)對齊的(of)。西文基本行高是(yes)字号的(of)1.2倍左右，字體有上(superior)伸部（ascender）和(and)下延部（descender）可來(Come)創造行間空隙。
9. 中文行高
中文的(of)結構屬于(At)方塊字沒有基線，所以(by)中文的(of)行高指的(of)是(yes)一(one)行中文的(of)最底部與下一(one)行中文最底部之間的(of)距離。中文因爲(for)字符密實且高度一(one)緻，所以(by)一(one)般行高需要(want)更大(big)，根據不(No)同用(use)戶人(people)群（兒童、年輕人(people)、老年人(people)）以(by)及使用(use)環境，可達到(arrive)1.5~2倍甚至更大(big)。
知識點：
提示：不(No)管是(yes)标題、正文還是(yes)注釋文字，行高都不(No)易過大(big)或過小，會導緻閱讀困難。總的(of)來(Come)說，字号越大(big)行高應該越小，字号越小行高應該越大(big)。
10. 行長
在(exist)《中文排版需求》裏，明确寫明了(Got it)這(this)項基本要(want)求：
2.3.5 版心設計的(of)注意事項：「 一(one)行的(of)行長應爲(for)文字尺寸的(of)整數倍，各行的(of)位置盡可能頭尾對齊。」
「一(one)行的(of)行長應爲(for)文字尺寸的(of)整數倍」，這(this)一(one)基本的(of)、理所應當的(of)需求看似簡單，但是(yes)在(exist)實際操作(do)中，卻往往由于(At)單位換算等各個(indivual)原因沒有得到(arrive)實現。對于(At)後半句提到(arrive)的(of)「頭尾對齊」，将另文讨論，但顯然也和(and)本文相關。正因爲(for)設計師想實現「頭尾對齊」才會盲目地(land)用(use)軟件的(of)「兩端對齊」功能，大(big)家可以(by)看看身邊的(of)印刷品，注意看一(one)下每段的(of)最後一(one)行間距是(yes)不(No)是(yes)統一(one)，就可以(by)知道設計師有沒有按照這(this)個(indivual)原則排版。
中文的(of)一(one)個(indivual)字占兩個(indivual)字符，英文一(one)個(indivual)字占一(one)個(indivual)字符。正文的(of)行長通常在(exist)40到(arrive)60個(indivual)字符之間。在(exist)行長較寬的(of)區域（例如桌面）中，包含最多120個(indivual)字符的(of)較長行将需要(want)将行高增大(big)。行長過長易讀性就會變差，讀者閱讀時(hour)容易串行，造成閱讀困難。合理的(of)行長使用(use)戶在(exist)行間跳轉時(hour)感到(arrive)輕快和(and)愉悅，反之則會使閱讀成爲(for)一(one)種負擔。
11. 行間距
行距是(yes)指臨近兩行之間的(of)距離。合适的(of)行距讓用(use)戶閱讀舒服，閱讀效率也高，行距太緊湊會讓内容擠成一(one)團，實現無法正常閱讀；行距太寬松會讓内容松散，産生(born)了(Got it)我(I)們(them)通常意義上(superior)的(of)「河流」，阻斷了(Got it)行的(of)視線，Photoshop中默認行距是(yes)1.2倍的(of)字号，例如字号是(yes)30px，那麽将行距設爲(for)36px和(and)默認「自動」的(of)效果一(one)緻。1.2倍的(of)行距對中文排版來(Come)說通常過小，合适的(of)行間距通常爲(for)1.5～2倍之間。文本字體越小，兩行之間的(of)行間距應該越大(big)，确保字與行呼吸的(of)空間。
12. 英文行間距
英文的(of)行間距指的(of)是(yes)一(one)行英文的(of)底部線與下一(one)行英文的(of)頂部線之間的(of)距離。可以(by)簡單的(of)理解爲(for)「行與行之間的(of)距離」。另外英文文字底部和(and)頂部都有對應的(of)專有名詞，英文頂部的(of)那條叫「升部線」，底部那條叫「降部線」。
13. 中文行間距
中文的(of)行間距就比較好理解了(Got it)，是(yes)指一(one)行文字的(of)最底部與下一(one)行文字的(of)最頂部之間的(of)距離。即行與行之間的(of)距離。
14. 段間距
段間距：段落與段落之間的(of)距離，可保持頁面節奏，與字體、行高相互關聯。
爲(for)保證文章易讀性，正文段間距，可以(by)簡單地(land)取一(one)個(indivual)空行（也就是(yes)一(one)個(indivual)行高），這(this)是(yes)比較常規也比較合适的(of)做法。舉個(indivual)例子：字号12，行高設定20，段間距 = 行高 + 行間距。行間距越大(big)，段間距就越大(big)；行間距越小，段間距就越小，行距與段間距成正比。段落之間首尾的(of)行之間間距應該大(big)于(At)段内的(of)間距，這(this)時(hour)候就應該增加段間距，使得文本的(of)閱讀體驗得到(arrive)進一(one)步的(of)提升。
排版的(of)CRAP原則
在(exist)任何一(one)個(indivual)設計中都需要(want)把各個(indivual)元素進行分級，分清主次，這(this)樣才能更好地(land)抓住重點。爲(for)了(Got it)能分清各元素的(of)主次，就需要(want)用(use)到(arrive)CRAP原則。這(this)四個(indivual)原則分别是(yes)對比、重複、對齊、親密性。
1. 對比 Contrast （增強效果、組織信息）
對比的(of)基本作(do)用(use)是(yes)突出(out)重點，增加可讀性。附加作(do)用(use)是(yes)有效增強視覺效果，打破平淡，吸引讀者注意。
一(one)些界面排版混亂，可讀性非常差，用(use)戶的(of)視線不(No)知道集中在(exist)哪，導緻這(this)種情況的(of)發生(born)都是(yes)因爲(for)界面内容對比不(No)明顯造成。在(exist)同一(one)個(indivual)視覺區域内的(of)邏輯不(No)同的(of)元素應該有所區别，以(by)避免視覺上(superior)的(of)相似，這(this)樣就可以(by)有效的(of)分清主次，爲(for)了(Got it)使主要(want)元素更突出(out)，次要(want)元素更弱化，可以(by)盡量使它們(them)的(of)顔色，字體、大(big)小，留白不(No)同。如果兩個(indivual)元素不(No)盡相同，那就讓他(he)們(them)截然不(No)同。比如，使用(use)「14 号字」和(and)「15 号字」進行對比，差異就很不(No)明顯，而使用(use)「14号字」和(and)「24 号字」，差異就明顯得多，一(one)眼就能看到(arrive)大(big)号的(of)字體。
在(exist)這(this)點上(superior)，「微信讀書」的(of)列表頁就做得非常好，它通過标題與描述的(of)字體粗細、大(big)小、顔色進行對比，把最有用(use)的(of)信息直觀地(land)呈現在(exist)用(use)戶面前标題是(yes)吸引用(use)戶關注的(of)關鍵，作(do)者和(and)評分隻是(yes)給用(use)戶一(one)種參考，不(No)起決定性作(do)用(use)。因此，如果沒有對比原則，标題和(and)描述的(of)字體同樣粗細、大(big)小，你就會發現視線總是(yes)會情不(No)自禁的(of)被評分所幹擾。
大(big)小對比
爲(for)了(Got it)區分文字、圖片、圖标等元素的(of)重要(want)性，通常采用(use)尺寸的(of)大(big)小來(Come)做對比。例如文章的(of)正副标題，副标題一(one)般用(use)來(Come)解釋主标題的(of)内容，因此副标題的(of)文字應該通過大(big)小和(and)顔色調整變成次級，讓用(use)戶閱讀時(hour)分清主次。
顔色對比
在(exist)排版中，首先要(want)産生(born)對比效果的(of)就是(yes)背景和(and)文字。文字與背景如果在(exist)顔色上(superior)很接近，那麽就不(No)容易區分開來(Come)吸引用(use)戶注意力，一(one)般來(Come)說，人(people)們(them)習慣白紙黑字（也是(yes)因爲(for)人(people)類有書寫需求以(by)來(Come)形成的(of)），即白色背景和(and)黑色文字。也有黑紙白字，例如現在(exist)APP都在(exist)做的(of)DarkMode暗色模式，但其實暗色背景搭配淺色文字并不(No)适合大(big)量閱讀。當然這(this)也是(yes)爲(for)了(Got it)配合用(use)戶使用(use)場景，在(exist)夜晚光線較暗的(of)環境下，深色模式或許更利于(At)閱讀。「冷知識：暗色模式其實就是(yes)廠商爲(for)了(Got it)解決電池耗電量而出(out)的(of)計策，隻是(yes)換了(Got it)個(indivual)噱頭而已」總之，不(No)管設計中使用(use)黑白、紅綠、藍黃哪一(one)種配色，一(one)定要(want)注意文字和(and)背景的(of)對比是(yes)否清晰便于(At)閱讀。
2. 重複 Repeated （統一(one)有秩序）
重複是(yes)保持整齊的(of)重要(want)準則。既包括字體、字号的(of)重複，也包括顔色、風格的(of)重複。對于(At)新人(people)來(Come)說，要(want)時(hour)刻牢記，盡量統一(one)字體、字号、顔色等一(one)系列元素，在(exist)統一(one)的(of)基礎上(superior)，找出(out)需要(want)強調的(of)部分，進行更改，通過對比原則進行強化。
如果相同内容（如标題）屬于(At)同一(one)種邏輯關系，則應該使他(he)們(them)的(of)字體、顔色、留白盡量保持一(one)緻。這(this)樣可以(by)增加内容的(of)條理性，并加強設計的(of)統一(one)性。在(exist)重複原則下，用(use)戶會因爲(for)視覺慣性繼續選招設計線索，根據重複性設計線索順場地(land)浏覽下去。
知識點：
重複不(No)是(yes)單一(one)的(of)機械式的(of)元素重複，我(I)們(them)可以(by)理解爲(for)用(use)統一(one)的(of)重複元素塑造一(one)個(indivual)新的(of)元素。當然這(this)是(yes)在(exist)保留基本的(of)元素時(hour)所塑造出(out)來(Come)的(of)高度統一(one)性的(of)畫面，從而增強我(I)們(them)所想要(want)的(of)設計效果。
3. 對齊 Alignment （統一(one)而有條理）
在(exist)頁面設計上(superior)每一(one)元素都應該與頁面上(superior)的(of)另一(one)個(indivual)元素存在(exist)某種視覺聯系，這(this)樣才能建立清晰的(of)結構。任何元素内容在(exist)在(exist)版面上(superior)都應該盡量上(superior)下左右對齊，對于(At)設計新人(people)來(Come)說，最好嚴格遵循一(one)種對齊方式，不(No)然就會導緻混亂，實在(exist)不(No)行，至少保證在(exist)同一(one)内容版塊中遵循一(one)種對齊方式。方法也很簡單，就是(yes)找到(arrive)一(one)條明确的(of)對齊線，并用(use)它來(Come)對齊。
對齊包括左對齊、居中對齊、右對齊 3 種方式。
左對齊：頁面中的(of)元素以(by)左基線對齊。左對齊是(yes)最常見的(of)對齊方式，簡潔大(big)方，利于(At)閱讀；
居中對齊：頁面中的(of)元素以(by)中基線對齊。居中對齊給人(people)一(one)種嚴肅與正式感，不(No)過也會有呆闆的(of)感覺；
右對齊：頁面中的(of)元素以(by)右基線對齊。相對少見的(of)對齊方式，給人(people)一(one)種人(people)爲(for)幹預的(of)感覺，加強了(Got it)形式感，降低了(Got it)閱讀效率；
4. 親密性 Proximity （實現組織性）
親密性是(yes)實現視覺邏輯化的(of)第一(one)步，它是(yes)指關系越近的(of)内容，在(exist)視覺上(superior)應該靠得越近，反之，關系越疏遠的(of)内容，在(exist)視覺上(superior)應該越遠。簡單的(of)來(Come)講就是(yes)要(want)把畫面中的(of)元素分類，把每一(one)個(indivual)分類做成一(one)個(indivual)視覺單位，而不(No)是(yes)衆多的(of)孤立的(of)元素。這(this)有助于(At)組織信息，減少混亂，爲(for)讀者提供清晰的(of)結構。
那做好親密性有哪些方法呢，私以(by)爲(for)有以(by)下幾點：
留白：留白是(yes)設計中通用(use)的(of)萬金油原則，通過留白建立距離關系進行内容區分；
左圖歌曲封面和(and)歌曲名信息間隔比每首歌曲上(superior)下間距還大(big)，導緻用(use)戶的(of)視線流呈垂直方向。
分割：簡單來(Come)說就是(yes)分組，建立組合關系。常見的(of)形式有線條分割，卡片分割等；
色相：通過顔色的(of)對比，不(No)同顔色的(of)信息會暗示這(this)是(yes)同一(one)類。常見的(of)日曆行程就是(yes)通過不(No)同顔色來(Come)區分時(hour)間和(and)具體事項。
方向：不(No)同的(of)排版方式也可以(by)很好的(of)區分信息；
什麽是(yes)信噪比及在(exist)設計中的(of)作(do)用(use)
「信噪比」（Signal-to-Noise Ratio）原本是(yes)用(use)在(exist)聲音和(and)圖像領域的(of)概念。在(exist)互聯網産品中把 「信噪比」概念借用(use)到(arrive)了(Got it)用(use)戶體驗。合理的(of)信噪比可改善與用(use)戶的(of)交流。加大(big)信号可以(by)将有用(use)的(of)信息快速準确的(of)傳達給用(use)戶，減少噪音并使信号脫穎而出(out)。
從人(people)機交互角度，我(I)們(them)應該删除與任務不(No)相關的(of)内容或設計元素。你甚至可以(by)将高信噪比的(of)目标與極簡主義聯系起來(Come)。但是(yes)「信号」和(and)「噪音」的(of)确切含義會有所不(No)同，一(one)個(indivual)人(people)的(of)信号可能是(yes)對另一(one)個(indivual)人(people)的(of)幹擾，因此，用(use)戶界面的(of)信噪比有低有高，取決于(At)具體的(of)用(use)戶和(and)具體的(of)任務。在(exist)用(use)戶界面中，信噪比所涉及的(of)「信息」可以(by)是(yes)任何内容，包括文本内容，視覺元素或動畫等。爲(for)了(Got it)提高設計傳達信息的(of)效率并幫助用(use)戶完成任務，需要(want)提高信噪比。
知識點：
用(use)戶始終喜歡清晰、簡單、自然、好用(use)的(of)設計和(and)産品。但需要(want)注意的(of)是(yes)，除了(Got it)交流必要(want)信息之外，我(I)們(them)還希望界面在(exist)視覺上(superior)具備吸引力，以(by)喚起用(use)戶的(of)某些情感。有了(Got it)額外的(of)目标（比如品牌宣傳、業務目标等），應該以(by)合理的(of)信噪比爲(for)目标，而不(No)是(yes)以(by)絕對的(of)方式排除所有「無關」的(of)信息。
例如iOS6到(arrive)iOS7圖标拟物到(arrive)扁平到(arrive)改變，讓用(use)戶可以(by)更快速準确的(of)獲取到(arrive)有效信息。而這(this)一(one)過程，就是(yes)典型的(of)放大(big)「信号」。
還有蝦米音樂的(of)駕駛模式
我(I)都知道，在(exist)開車的(of)時(hour)候操作(do)手機是(yes)非常危險的(of)。在(exist)40km/h的(of)速度下，看手機3秒，相當于(At)盲駛了(Got it)35米。但有些情況下又不(No)得不(No)操作(do)手機，比如緊急來(Come)電或者導航出(out)錯……這(this)時(hour)，駕駛模式的(of)界面就顯得尤爲(for)重要(want)了(Got it)，讓用(use)戶能夠快速準确的(of)識别信息并進行操作(do)，可以(by)大(big)大(big)提高行車的(of)安全性。
在(exist)界面中無論是(yes)何種分割方式(分割線、卡片陰影、分割色塊)，過于(At)濃重的(of)表現都會影響有效信息的(of)獲取，成爲(for)界面中的(of)「噪音」，因此我(I)們(them)應該讓它們(them)細一(one)點、淡一(one)點來(Come)降低表現，或者幹脆不(No)要(want)(留白分割)。
圖版率的(of)高低對設計的(of)影響
圖版率就是(yes)頁面中圖片面積的(of)所占比。在(exist)頁面設計中，除了(Got it)文字之外，通常都會加入圖片或是(yes)插圖等視覺直觀性的(of)内容。這(this)種文字和(and)圖片所占的(of)比率，對于(At)頁面的(of)整體效果和(and)其内容的(of)易讀性會産生(born)巨大(big)的(of)影響。當然，除圖片本身外，我(I)們(them)也可以(by)通過填充底色，圖形疊底等方式來(Come)提高界面中的(of)圖版率。
圖版率高低的(of)區别：同樣的(of)設計風格下，圖版率高的(of)頁面會給人(people)以(by)熱鬧而活躍的(of)感覺，反之圖版率低的(of)頁面則會傳達出(out)沉穩、安靜的(of)效果。提高圖版率可以(by)活躍版面，優化版面的(of)視覺度。但完全沒有文字的(of)版面也會顯得空洞，反而會削弱版面的(of)視覺度。
在(exist)沒有圖像素材的(of)情況下想要(want)呈現出(out)高圖版率，可以(by)通過以(by)下幾種方式來(Come)實現：
通過填充頁面底色，取得與提高圖版率相似的(of)效果，從而改變頁面所呈現出(out)來(Come)的(of)視覺效果；
如果素材圖像尺寸小，可以(by)通過色塊的(of)延伸或是(yes)圖像的(of)重複來(Come)組織頁面結構，同樣可以(by)提高圖版率；
利用(use)排版的(of)節奏感以(by)及跳躍率（文字和(and)圖片的(of)跳躍率，是(yes)指版面中最大(big)标題和(and)最大(big)的(of)圖與最小正文字體和(and)圖片大(big)小之間的(of)比率）讓無趣的(of)版面充滿活力，富有節奏的(of)設計也能間接優化頁面的(of)圖版率；
增加頁面中的(of)圖形也可以(by)改善圖版率低的(of)問題。無論是(yes)數字、序号、圖标，甚至是(yes)視覺處理後的(of)标題文字，都能提高頁面的(of)視覺度，并給用(use)戶留下活躍生(born)動的(of)印象；
如果頁面中沒有圖片和(and)插圖，那麽通過對文字及其顔色的(of)處理，也可以(by)起到(arrive)提高圖版率的(of)作(do)用(use)；
上(superior)面的(of)例子中，對于(At)标題文字都進行了(Got it)視覺加工，起到(arrive)了(Got it)整體頁面的(of)裝飾效果。借助對這(this)種文字大(big)小、顔色、形狀的(of)靈活運用(use)，來(Come)突出(out)頁面的(of)重點，避免視覺上(superior)的(of)單調感。
文字在(exist)代碼中的(of)實現及标注
1. 文字在(exist)代碼中的(of)實現
在(exist)開發落地(land)的(of)過程中，文字排版的(of)開發實現是(yes)很重要(want)的(of)一(one)個(indivual)環節，也是(yes)經常讓設計師和(and)開發小哥哥頭疼不(No)已的(of)地(land)方。字體和(and)排版在(exist)實現上(superior)經常會出(out)現偏差，主要(want)原因在(exist)于(At)開發的(of)标注方式和(and)設計軟件不(No)一(one)緻。因此理解文字開發的(of)實現方式，細節問題的(of)解決方法至關重要(want)。在(exist)Android中，文字開發工作(do)是(yes)通過一(one)個(indivual)叫TextView控件來(Come)實現的(of)，主要(want)承擔文本顯示的(of)任務，任何APP都不(No)可避免的(of)會用(use)到(arrive)它。TextView常用(use)屬性如下圖：
2. 字體字重對應的(of)font-weight值
在(exist)前文聊過，每種字體都對應有好幾種字重（Regular、Normal、Medium、Light ），在(exist)給開發的(of) UI 設計稿中，我(I)們(them)給的(of)字體标注通常有 PingFangSC-Regular、PingFangSC-Medium、PingFangSC-Bold，并不(No)會直接給開發 font-weight 的(of)值。雖然這(this)需要(want)開發去熟記，但作(do)爲(for)設計師了(Got it)解它們(them)的(of)對應關系，可以(by)更順暢的(of)和(and)開發溝通。
在(exist)W3C Fonts節章的(of)規範标準中有給具體數值（100至900）：
這(this)些有序排列中的(of)每個(indivual)值，對應字體的(of)字重。其大(big)緻符合下列通用(use)重量名稱：
當然，并不(No)是(yes)每一(one)種字體都有這(this)麽多字重，那遇到(arrive)有些字體隻有2、3種字重，該怎麽對應font-weight 值呢？W3C Fonts也給出(out)了(Got it)解決方案，例如字重和(and)400大(big)緻符合将會歸爲(for)Regular、Book、Roman；和(and)700大(big)緻符合将會歸爲(for)Bold。若一(one)個(indivual)重量所指定的(of)字形不(No)存在(exist)，則應當使用(use)相近重量的(of)字形。通常，較重的(of)重量會映射到(arrive)更重的(of)字形、較輕的(of)重量會映射到(arrive)更輕的(of)字形。下圖所示：灰色表示該重量的(of)字形不(No)存在(exist)、使用(use)的(of)是(yes)相近重量的(of)字形。
△ 隻包含400、700和(and)900重量字形的(of)字體家族的(of)對應字重
△ 隻包含300和(and)600重量字形的(of)字體家族的(of)對應字重
3. 文本框行高的(of)問題
我(I)們(them)都知道在(exist)設計的(of)時(hour)候，可能字體使用(use)的(of)24pt，但其實字體本身占用(use)的(of)距離是(yes)包含了(Got it)升部及降部區域的(of)，這(this)樣就導緻其占用(use)空間大(big)于(At)24pt，而變成了(Got it)33pt。每個(indivual)字體都有相應設定的(of)「字高」比例，可以(by)通過sketch選中字體後的(of)height值來(Come)進行查看。線高越大(big)，問題就越大(big)。下面的(of)示例顯示文本框之間的(of)距離設置爲(for)32px。如你所見，即使你将所有垂直間距都設置爲(for)相同的(of)值，它們(them)在(exist)視覺上(superior)也遠大(big)于(At)32px。
△ 雖然标注出(out)來(Come)的(of)參數都是(yes)一(one)樣大(big)，但視覺上(superior)間距卻是(yes)不(No)一(one)樣的(of)
4. Leading-Trim：數字排版的(of)未來(Come)
去年六月，Microsoft Design贊助了(Got it)一(one)個(indivual)新的(of)css規範，稱爲(for)「Leading-Trim」。這(this)個(indivual)css方案能很好的(of)解決上(superior)面這(this)個(indivual)問題。
我(I)們(them)常用(use)的(of)UI設計工具，例如Figma和(and)Sketch，似乎已經采用(use)了(Got it)「half-leading」模式并以(by)此方式渲染文本。因此，我(I)們(them)在(exist)設計工具和(and)浏覽器中都遇到(arrive)了(Got it)這(this)個(indivual)問題。
設計方面的(of)解決方法相對容易：你可以(by)忽略邊界框，而直接根據文本的(of)大(big)寫高度和(and)基線來(Come)測量空間。這(this)是(yes)一(one)個(indivual)手動過程，因爲(for)大(big)多數設計工具沒有上(superior)限高度和(and)基線的(of)參照目标，盡管設計師将盡一(one)切努力使我(I)們(them)的(of)設計看起來(Come)更好！但是(yes)，如果采用(use)這(this)種方法，開發人(people)員仍将僅在(exist)CSS中實現邊界框間距。因此，它們(them)會出(out)現随機的(of)間距值。
爲(for)了(Got it)緩解此随機性問題，開發人(people)員可以(by)在(exist)CSS中以(by)負邊距「裁剪」文本框。但是(yes)負邊距将需要(want)手動确定，并且是(yes)特定于(At)字體的(of)，因此是(yes)「随機的(of)」。任何字體，浏覽器，操作(do)系統或語言環境的(of)更改都将不(No)可避免地(land)導緻你不(No)小心設置邊距。此外，該技術通常不(No)是(yes)良好的(of)編碼實踐，并且可能導緻意外的(of)副作(do)用(use)。
Leading-Trim新規範
Leading-trim是(yes)CSS工作(do)組正在(exist)引入的(of)新CSS屬性。顧名思義，它就像文本框剪刀一(one)樣工作(do)。你隻需使用(use)兩行CSS，就可以(by)從你選擇的(of)參考點中修剪掉所有多餘的(of)空間。
代碼示例：
上(superior)面的(of)示例首先使用(use)text-edge（也是(yes)新屬性）來(Come)告訴浏覽器，所需的(of)文本邊緣是(yes)大(big)寫高度和(and)字母基線。然後，從兩側修剪多餘部分。請注意，采用(use)修剪僅會影響文本框。它不(No)會切斷其中的(of)文本。這(this)兩行簡單的(of)CSS創建了(Got it)一(one)個(indivual)幹淨的(of)文本框。這(this)可以(by)幫助你獲得更準确的(of)間距并創建更好的(of)視覺層次。
使用(use)後再來(Come)對比一(one)下：
△使用(use)新規範對比發現，右圖文字上(superior)下間距舒服多了(Got it)，也更合理。
Leading-Trim修複對齊問題
借助Leading-Trim，可以(by)解決在(exist)APP上(superior)看到(arrive)的(of)所有奇怪的(of)對齊問題。例如，即使文字位于(At)文本框内，你的(of)文本也不(No)總是(yes)在(exist)容器中垂直居中。
默認行高中保留的(of)多餘空間會導緻文本不(No)總是(yes)在(exist)文本框中居中。使用(use)Leading-Trim修剪，就可以(by)很省心的(of)使文本垂直居中。
知識點：
原因是(yes)每種字體的(of)設計也不(No)同。它具有自己的(of)默認行高，并且其中的(of)文本可以(by)具有不(No)同的(of)大(big)小和(and)基線位置，并不(No)都是(yes)水平居中對齊的(of)。因此，有時(hour)即使字體大(big)小，行高和(and)文本框位置保持不(No)變，更改字體也會改變文本的(of)對齊方式，如下例所示，文字很明顯沒有對齊。
在(exist)第二個(indivual)示例中，你可以(by)看到(arrive)Leading-Trim如何防止這(this)種情況并使文本完美對齊。
一(one)緻性和(and)工作(do)流程的(of)改進
Leading-trim修整超出(out)了(Got it)使間距和(and)對齊更準确的(of)範圍。它在(exist)建立精确的(of)間距系統，爲(for)設計準确性和(and)一(one)緻性以(by)及高效的(of)設計到(arrive)開發交接鋪平道路方面發揮着關鍵作(do)用(use)。
擁有間距系統有很多好處。設計師可以(by)更快地(land)确定間距，開發人(people)員可以(by)設置相應的(of)間距變量以(by)消除代碼中的(of)随機間距值。但是(yes)目前，即使我(I)們(them)設置了(Got it)間距系統，由于(At)文本框中的(of)額外空間，對于(At)文本元素來(Come)說也不(No)是(yes)很準确。如果我(I)們(them)嘗試忽略設計中的(of)邊界框并在(exist)代碼中「裁剪」文本框，則會遇到(arrive)那些棘手的(of)解決方法問題。
△應用(use)于(At)文本元素且沒有Leading-trim修剪的(of)間距系統
借助領先的(of)文字間隔系統，從設計到(arrive)開發的(of)交接過程也将更加順暢，因爲(for)開發人(people)員将能夠建立完全相同的(of)系統，并且避免在(exist)布局錯誤上(superior)花費大(big)量時(hour)間。最重要(want)的(of)是(yes)，領先的(of)微調間距系統将幫助我(I)們(them)提供用(use)戶信賴和(and)喜歡的(of)外觀更美觀的(of)産品。
5. 設計中修改文字行高的(of)方法
上(superior)面我(I)們(them)介紹了(Got it)利用(use)Leading-trim修剪字高的(of)先進方法，但是(yes)這(this)個(indivual)新CSS的(of)規範還在(exist)編寫中，還未世界範圍的(of)推進，不(No)過有「微軟」團隊的(of)扶持相信國(country)際化也不(No)會太遠了(Got it)。
在(exist)這(this)之前，我(I)們(them)想要(want)盡可能的(of)解決字符多出(out)的(of)間距問題，就需要(want)在(exist)設計軟件裏手動修改了(Got it)，手動把文字行高與客戶端系統默認行高保持一(one)緻，從而給出(out)準确的(of)文字間距。開發在(exist)實現的(of)時(hour)候iOS使用(use)系統默認行高，Android系統去掉文字上(superior)下padding。
這(this)種方式雖會花費不(No)少時(hour)間，但也最精确，你可以(by)據此設置出(out)最美觀合理的(of)間距，而不(No)用(use)擔心上(superior)線稿的(of)還原度問題，也便于(At)我(I)們(them)後期的(of)頁面校對和(and)調整。
△在(exist)Sketch中修改文字高度
6. 什麽是(yes)彈性适配
文字彈性适配一(one)般涉及的(of)是(yes)寬度适配，寬度适配普遍使用(use)的(of)是(yes)間距适配，即定好左右頁邊距，中間彈性拉伸。這(this)種方式可以(by)做到(arrive)較好的(of)适配，也是(yes)做快速常用(use)的(of)适配方法。
7. 标注工具
設計師将設計文件交付開發之前，應站在(exist)程序員的(of)角度着想，做好前期溝通，提供他(he)們(them)開發所需要(want)的(of)資源。設計文件的(of)标注可以(by)使用(use)Sketch插件或直接上(superior)傳「藍湖」，拿Sketch插件「Sketch Measure」爲(for)例，它是(yes)一(one)款十分智能的(of)标注插件，主要(want)功能包含兩大(big)塊：标注和(and)規範。
工具欄彙合了(Got it)Measure所有功能的(of)快捷工具，永遠置于(At)畫布頂層，有了(Got it)它就不(No)用(use)再頻繁通過菜單欄去使用(use)功能。
做好規範後，點擊「導出(out)規範」一(one)鍵自動生(born)成Html頁面，浏覽器打開頁面點擊其中任何元素都可以(by)查看其屬性和(and)間距，還包括代碼樣式，交給開發開發工程師後，不(No)用(use)溝通都能看明白。
△Sketch Measure導出(out)标注的(of)網頁界面
設計驗收環節
産品功能開發完成後，對産品對功能，視覺和(and)交互操作(do)進行測試和(and)驗收，确保産品的(of)可用(use)性。一(one)般在(exist)功能模塊驗收完成後，就可以(by)開始具體的(of)視覺設計驗收，這(this)也是(yes)由主要(want)設計師負責的(of)模塊，主要(want)驗收顔色、字體、圖形、間距、控件和(and)空狀态等。
因本文主講字體與排版，就拿這(this)部分來(Come)說，需要(want)檢視的(of)就有：
字體：是(yes)否用(use)的(of)平台默認字體，如果是(yes)内置字體檢查字體顯示有沒問題；
字号：導航欄、欄目名稱、分類頁簽、tab等字号大(big)小是(yes)否符合規範；
字重：标題和(and)正文字重是(yes)否正确，粗體用(use)的(of)是(yes)哪一(one)種，是(yes)Medium，還是(yes)SemiBold；
字色：标題、正文、注釋、提示等文字顔色；
字間距：檢查中文間距和(and)英文間距，段落文字标點有無避頭尾；
行間距：段落文字行間距，有沒有出(out)現多餘的(of)行高 ；
……
在(exist)檢視過程中如發現問題，截圖标示問題所在(exist)，并出(out)具檢視報告。
△ 視覺檢視表示例
視覺設計的(of)驗收要(want)追求細節上(superior)的(of)完美，因爲(for)設計上(superior)的(of)細節是(yes)很容易被挑錯的(of)，同時(hour)需要(want)耐性和(and)細心，要(want)有像素級的(of)視角，隻有這(this)樣才能完美的(of)還原設計稿。
寫在(exist)最後
原本隻是(yes)想結合工作(do)積累，寫一(one)篇字體應用(use)知識總結，沒成想給自己挖了(Got it)一(one)坑，涉及的(of)知識點真是(yes)超級多，很多地(land)方都可以(by)單獨拿出(out)來(Come)再另寫一(one)篇。另外其實在(exist)工作(do)中，也建議大(big)家對自己的(of)經驗進行總結，對關鍵信息進行提煉加以(by)沉澱，一(one)方面能讓自己的(of)知識更加牢固，另一(one)方面也可以(by)幫助後來(Come)者學習成長。字體與排版基礎就分享到(arrive)這(this)裏，希望對大(big)家有所幫助。因爲(for)篇幅較長，幾經修改，有細節不(No)正确的(of)地(land)方，歡迎留言矯正，感謝閱讀。
相關内容
觀察行業視覺，用(use)專業的(of)角度，講出(out)你們(them)的(of)心聲。
