超全面的字體與排版應(yīng)用指南@衡水平面設(shè)計(jì)培訓(xùn)
文字是界面中最核心的元素，是產(chǎn)品傳達(dá)給用戶的主要內(nèi)容，它的承載體即是字體。
前半部分從字體的最基本屬性（字族、字號(hào)、字重、大小寫等）說起，熟悉字體的那些特征，了解字體在界面中的作用，以及iOS與Android系統(tǒng)字體的使用規(guī)范。
字體是界面設(shè)計(jì)的基石
字體是排版中最重要的元素，對(duì)用戶的閱讀體驗(yàn)有著至關(guān)重要的作用。一般來說，設(shè)計(jì)師需要了解的字體通常有中文字體和西文字體兩種。西文字體由來已久，從最早的羅馬字體到現(xiàn)在蘋果手機(jī)中的SF-UI字體，經(jīng)歷了許多設(shè)計(jì)上的變革。而中文字體的發(fā)展并沒有西文字體那么順利，數(shù)量上也遠(yuǎn)遠(yuǎn)落后于其他字體。但中國設(shè)計(jì)正在崛起，我們也看到越來越多的設(shè)計(jì)團(tuán)隊(duì)和設(shè)計(jì)師加入字體設(shè)計(jì)的隊(duì)伍，數(shù)量上正在呈指數(shù)級(jí)別增加。
設(shè)計(jì)是一門非常嚴(yán)謹(jǐn)?shù)膶W(xué)科，里面蘊(yùn)含了很多道理，就連最基礎(chǔ)的字體選擇和排版，都經(jīng)過了將近千年的發(fā)展和演變，有非常多的專業(yè)知識(shí)。像平面設(shè)計(jì)一樣，在UI設(shè)計(jì)中字體的使用也有相應(yīng)的規(guī)范，設(shè)計(jì)師應(yīng)懂得這些基礎(chǔ)知識(shí)，才能將字體為自己所用。
本篇就從我們常用的設(shè)計(jì)軟件（sketch、Figma、P hotoshop）字符面板開始，來聊聊有關(guān)字體與排版應(yīng)用方面的知識(shí)。
- Font 中文翻譯為「字型」，是指字的粗細(xì)、寬度和樣式，是一套具有同樣風(fēng)格和尺寸的字形。例如「Regular_16pt_SF-UI」。
- Typeface 中文翻譯為「字體」，是指一整套的字形，一個(gè)或多個(gè)字型的多尺寸的集合，例如「SF-UI」里有不同粗細(xì)（Regular、Blod、Light）和不同寬度（12pt、14pt、20pt）。
- Glyph 中文翻譯為「字形」，是指單個(gè)字的形體或是字體的骨骼。 同一字可以有不同的字形，而不影響其表達(dá)的意思，例如漢字中的「令」字，第三筆可以是一點(diǎn)或一撇， 最末兩筆可以作「ㄗ」或「マ」。
Font和Typeface常常被混淆使用，其實(shí)可以這樣理解，前者指一種設(shè)計(jì)，后者指具體的產(chǎn)品。
1. 族類 GenericFamily
族類就是不同字體類型，例如阿里巴巴普惠體、方正新書宋、站酷酷黑體等。
而這些眾多字體又可分為「襯線體」和「無襯線體」。
襯線體
宋體就是襯線體，特點(diǎn)就是筆畫開始和末端的地方都有額外的裝飾，且筆畫的粗細(xì)有所不同。在傳統(tǒng)的正文印刷中，普遍認(rèn)為襯線字體能帶來更加的可讀性。常見的襯線體有宋體、Times New Roman、Georgia等。
襯線體一般在APP中比較少見，文字閱讀類偏愛這種襯線體，例如「單讀」，大標(biāo)題用的是「華康標(biāo)宋體」、正文內(nèi)容用的是「蘋方-纖細(xì)」而英文用的是「XCross Traditional Bold」
黑體
黑體是無襯線字體，特點(diǎn)是筆畫沒有額外的裝飾，且筆畫的粗細(xì)差不多。相比嚴(yán)肅的襯線體，簡單干凈的無襯線體給人一種休閑輕松的感覺。因此大多數(shù)App都是使用黑體作為默認(rèn)字體。如冬青黑體、思源黑體、Myriad等。
2. 字族 FontFamily
一個(gè)族類包含不同的字體，然而一個(gè)字體又可能有好幾種字族。如果電腦安裝了Helvetica，在Sketch字體選擇器中會(huì)發(fā)現(xiàn)超過40多個(gè)前綴是Helvetica的字族。這是為了協(xié)助人們在不同的使用場景下表達(dá)合適的意思。
知識(shí)點(diǎn)：
基本字族包括細(xì)體、標(biāo)準(zhǔn)、粗體、斜體，值得注意的是，斜體字常用在引用文本上，代表「本段文字引用的是另一個(gè)著作」的含義。
例如：「若我們能以滿懷新鮮的眼神去觀照日常，「設(shè)計(jì)」的意義定會(huì)超越技術(shù)的層面，為我們的生活觀和人生觀注入力量。」（引自原研哉的《設(shè)計(jì)中的設(shè)計(jì)》）
3. X-height（X字高）
在西文字體中，x高度是指字母的基本高度，就是基線和主線之間的距離。它指一個(gè)字體中小寫字母的x高度，在現(xiàn)代字體設(shè)計(jì)領(lǐng)域，x高度代表了一個(gè)字體的設(shè)計(jì)因素，因此在一些場合字母x本身并不完全等于x字高。
除了字母a、c、e、m、n、o等高度一樣，還有一些小寫字母的字高都比x字高要大，并分為兩類：一是含有升部的字母，字母筆畫含有向上部分，如字母b、d、h；另一類是含有降部的字母，字母的筆畫向下超過了基線，如字母g、p、q。
4. 字號(hào) Font-size
字號(hào)就是字體大小，通常在網(wǎng)頁端使用px作為字號(hào)的單位。移動(dòng)端興起后，iOS字體單位是pt，Android是sp。
以iOS為例，正文字號(hào)不應(yīng)小于11pt，這樣才能被正常閱讀，建議在14-18pt之間。在使用較大的字體來獲得更好的易讀性的同時(shí)，我們也應(yīng)相應(yīng)地減小字體的字重，考慮Light、Thin，因?yàn)檫^重的字體會(huì)太過醒目，影響其他內(nèi)容的顯示效果。
當(dāng)字體大小為12-18pt時(shí)，建議使用Regular，18-24pt時(shí)，使用Light，24-32pt,使用Thin，當(dāng)字體大小超過32pt時(shí)，建議使用Ultralight。
字號(hào)大小決定了信息的層級(jí)和主次關(guān)系，合理有序的字號(hào)設(shè)置能讓界面信息清晰易讀、層次分明；相反，糟糕無序的字號(hào)使用會(huì)讓界面混亂不堪，影響閱讀體驗(yàn)。
設(shè)計(jì)中的最小字號(hào)
我們都知道在界面設(shè)計(jì)中最小字號(hào)不能低于20px，那是因?yàn)?，正常情況下，在手機(jī)距離眼睛30cm左右，使用視角計(jì)算公式，我們能識(shí)別到的最低的文字大小為h= 2*30·tan(0.3/2) ≈ 0.157cm ，拿我們經(jīng)常使用iPhone7的尺寸1334×750為例。iPhone7的dpi為324，也就是一英寸上顯示324個(gè)像素，1英寸為2.54cm，那么0.157cm=324*(0.157/2.54cm)= 20px。
字號(hào)的基數(shù)關(guān)系
我們在做設(shè)計(jì)時(shí)，字號(hào)的單位最好使用一個(gè)基數(shù)作為倍增，如2、4、6、8、10 或者3、6、9、12。但其實(shí)我們在做移動(dòng)端設(shè)計(jì)時(shí)，單位需要遵循偶數(shù)原則，因?yàn)殚_發(fā)中的單位是以一倍圖的基數(shù)來進(jìn)行計(jì)算。那么其實(shí)在制定字體規(guī)范中，使用2為單位會(huì)導(dǎo)致字號(hào)過多，且2號(hào)字體的差異化不大。所以在字號(hào)方面我們使用4作為單位是比較合適的：一是適配后在@2x跟@3x不會(huì)出現(xiàn)半像素，二是使用4為單位，能滿足字體大小的均衡。
5. 字重 FontWeight
Weight，中文翻譯為「字重」，是指字體筆畫的粗細(xì)，字體中很重要一個(gè)概念，不同字重傳遞出來視覺感受完全不一樣。一般在字體家族名后面注名Thin、Light、Regular、Blod、Black、Heavy等。不同的字體廠商劃分字重各有不同，例如「蘋方」字體就有6種不同的字重。
一般都有細(xì)體、正常、粗體三種基本字族。在應(yīng)用場景上，通常「細(xì)體」多用于超大號(hào)字體；「正常」用于正文內(nèi)容；「粗體」表示強(qiáng)調(diào)，多用于標(biāo)題；
兩種字重屬性
輕字重：傳遞出輕盈放松的視覺感受，常配合粗的字重使用，在一些輔助信息，說明文案時(shí)候使用；
重字重：視覺感受莊重，很重要，常用在重點(diǎn)強(qiáng)調(diào)的文字，頁面大標(biāo)題，數(shù)字，引導(dǎo)行動(dòng)操作點(diǎn)上等；
例如百度網(wǎng)盤「發(fā)現(xiàn)」頁就用了Regular、Medium、Semibold三種字重以拉開信息層次對(duì)比；
知識(shí)點(diǎn)：
需要注意的是：在進(jìn)行界面設(shè)計(jì)時(shí)，不要用軟件自帶的文本加粗，它不僅破壞了字體本身的美感，還改變了文字原本的字寬，小字體下會(huì)模糊不清，合理的方式是使用字體本身的字重來控制粗細(xì)。
注意超細(xì)體的字體
字重超細(xì)的字體要謹(jǐn)慎使用。如果你設(shè)計(jì)的文本是裝飾性倒還好，如果是需要用戶能清晰閱讀的，就要特別慎重，能不用就不用，否則在部分低分辨率的手機(jī)屏幕上看起來會(huì)非常糟糕。
6. 字色 FontColor
字色即文字對(duì)應(yīng)的顏色，不做過多解釋。需要大家注意的是 遠(yuǎn)離純黑色和純灰色！
純黑色就像沒有生命力的深淵，能吞噬所有細(xì)節(jié)，使用戶陷入冷冰冰的極端情緒中。純黑色還會(huì)與白色產(chǎn)生強(qiáng)烈的對(duì)比度，看久了就會(huì)感覺疲勞，讓用戶產(chǎn)生焦慮情緒。
還有就是真實(shí)世界中是不存在純黑色的。嘗試在色彩中加入一些色相，這樣就不會(huì)讓頁面看上去死氣沉沉的。例如iOS系統(tǒng)「設(shè)置」頁面背景色就是加入了白色的低飽和度藍(lán)色，看上去柔和自然。
7. 字符樣式 FontStyle
除了以上幾個(gè)最常用的文字屬性外，還有幾個(gè)使用頻率比較低的字體設(shè)置。例如帶下劃線的、刪除線的文本?！赶聞澗€文本」一般出現(xiàn)在「文字按鈕」或帶鏈接的網(wǎng)址，而「刪除線文本」一般會(huì)出現(xiàn)在商品櫥窗的現(xiàn)價(jià)、原價(jià)
例如「CCtalk」的課程現(xiàn)價(jià)和原價(jià)的區(qū)分，原價(jià)用刪除文本，「微信讀書」文章底部「加入書架 隨時(shí)閱讀」就是帶鏈接的下劃線文本。
8. 字符選項(xiàng) Text options
Ps和Sketch都有文字（字符）選項(xiàng)一欄，主要針對(duì)西文字母大小寫格式變換的設(shè)置。最常見有默認(rèn)大小寫、全部大寫、全部小寫和小型大寫字母，Ps里面還有「上標(biāo)」和「下標(biāo)」。
- 默認(rèn)大小寫：即正常大小寫格式，軟件不做干預(yù)；
- 全部大寫：如果輸入的是小寫字母，選擇這個(gè)選項(xiàng)，軟件會(huì)強(qiáng)制把小寫改為大寫；
- 全部小寫：如果輸入的是大寫字母，或者只是首字母大寫，選擇這個(gè)選項(xiàng)，軟件會(huì)強(qiáng)制把所大寫改為小寫；
- 小型大寫字母：這個(gè)選項(xiàng)比較特殊，所謂「小型大寫」就是，在字號(hào)一樣的情況下，與小寫字母一樣高，外形與大寫字母保持一致。
注意英文大寫
純大寫的字母文本本身不太適合大篇幅閱讀，會(huì)加大閱讀障礙，用的時(shí)候注意要額外拉開字母之間的字間距，提升可讀性。
9. 全角與半角 Full-width and half-width
全角是指一個(gè)字符占用兩個(gè)標(biāo)準(zhǔn)字符的位置。中文字符、全角的英文字符、國標(biāo)GB2312-1980中的圖形符號(hào)、特殊符號(hào)都是全角字符。半角是指一個(gè)字符占用一個(gè)標(biāo)準(zhǔn)字符的位置。
通常情況下，英文字母、數(shù)字、符號(hào)等都是半角字符。半角和全角主要是針對(duì)標(biāo)點(diǎn)符號(hào)來說的，因?yàn)檎Ｇ闆r下沒有打全角英文的需求。
知識(shí)點(diǎn)：
在設(shè)計(jì)作品時(shí)也一定要記得中文搭配全角符號(hào)，英文使用半角符號(hào)。否則會(huì)出現(xiàn)諸如「你好.」或者「t h a n k s?！惯@樣的錯(cuò)誤。可按鍵盤「capslock」鍵切換全角和半角。這個(gè)小知識(shí)點(diǎn)雖然非常基礎(chǔ)，卻也是設(shè)計(jì)中經(jīng)常出錯(cuò)的地方。
眾所周知，iOS和Android兩大陣營都有各自的設(shè)計(jì)系統(tǒng)，要作出符合平臺(tái)規(guī)范的設(shè)計(jì)，設(shè)計(jì)師應(yīng)熟讀各平臺(tái)的設(shè)計(jì)規(guī)則。因?yàn)楸酒灾v字體為主，我們就來看看iOS和Android各自字體的規(guī)范是什么樣的。
1. iOS字體規(guī)范
可用字體
在iOS系統(tǒng)規(guī)范中，中文字體是「蘋方」字體。英文字體是「San Francisco」也簡稱「SF-UI」，英文還有另外一個(gè)襯線體「NewYork」。除了在iOS和Mac OS上，還單獨(dú)為Watch OS單獨(dú)對(duì)字體進(jìn)行了調(diào)整，命名為 San Francisco Compact。
字體設(shè)置
因?yàn)樵谟⑽淖煮w下，字體環(huán)境比較復(fù)雜，為了讓字體在任何地方看起來都最佳，蘋果官方針對(duì)不同字號(hào)開發(fā)了兩套「SF-UI Text」和「SF-UI Pro」字體，而每套字體下面又分為Text（文本模式）與Display（展示模式）兩種屬性，Text只有6個(gè)字重，而Display則有9個(gè)字重。
這么多類型的字體我們該怎么用呢？iOS的建議是，在字號(hào)小于20pt時(shí)，使用SF-UI Text，大于或等于20pt時(shí)，則使用SF-UI Display。這需要我們在界面設(shè)計(jì)時(shí)手動(dòng)切換。
對(duì)于「NewYork」，小于20點(diǎn)的文本使用小號(hào)，20到35點(diǎn)之間的文本使用中號(hào)，36到53點(diǎn)之間的文本使用大號(hào)，54點(diǎn)或更大的文本使用特大號(hào)。
蘋方字體提供了6個(gè)字重供設(shè)計(jì)開發(fā)者使用。所以從iOS11開始，iOS使用Semibold中粗體、大字號(hào)作為界面的標(biāo)題變的更為流行起來，較為明顯的有 iOS 中的一些原生APP，比如App Store、Apple Music…
知識(shí)點(diǎn)（衡水平面設(shè)計(jì)培訓(xùn)）：
在iOS中，默認(rèn)字體單位是「pt」，正文字號(hào)不應(yīng)小于11pt，建議在15-18pt之間。在使用較大的字體來獲得更好的易讀性同時(shí)，也應(yīng)該相應(yīng)地減小字體的字重，因?yàn)檫^重的字體會(huì)太過醒目厚重，影響其他內(nèi)容的顯示效果。
iOS更全面的文字設(shè)置
動(dòng)態(tài)類型可以通過讓讀者選擇他們喜歡的文本大小來提供額外的靈活性，除了標(biāo)準(zhǔn)的動(dòng)態(tài)類型大小之外，iOS系統(tǒng)還為有閱讀大字體的需求的用戶提供了許多字號(hào)上的調(diào)整（可在系統(tǒng)字體顯示大小設(shè)置）
iOS「顯示與亮度」下設(shè)置「文字大小」模式
「蘋方」和「SF-UI」字體可在iOS規(guī)范網(wǎng)站免費(fèi)下載
網(wǎng)址：https://developer.apple.com/fonts/
2. Android字體規(guī)范
可用字體
在Android設(shè)備中，Android始祖Google為了更好的追求視覺效果，聯(lián)合了Adobe設(shè)計(jì)發(fā)布了「思源黑體」(Noto)來作為中文默認(rèn)字體，「Roboto」為英文字體。
字體類型
思源黑體，英文名為「NotoSans CJK」。該字體不僅僅在字形上更易于在屏幕閱讀，并且擁有7種字重，充分滿足了設(shè)計(jì)的要求。
英文「Roboto」字體，只有6個(gè)字重，視覺語言與思源黑體Noto保持一致。該字體具有「現(xiàn)代的」和「平易近人」的氣質(zhì)，是「Material Design」設(shè)計(jì)風(fēng)格下的推薦字體。
字體設(shè)置
Material Design字體規(guī)范，字體類型比例支持的十三種樣式的組合。它包含可重用的文本類別，每種類別都有預(yù)期的應(yīng)用程序和含義。
注：Web瀏覽器根據(jù)根元素大小計(jì)算REM（根em大?。?現(xiàn)代網(wǎng)絡(luò)瀏覽器的默認(rèn)值為16px，因此轉(zhuǎn)換為SP_SIZE / 16 = rem。
△Material Design設(shè)計(jì)類型比例。（字母間距值與Sketch兼容。）
知識(shí)點(diǎn)：
值得注意的是，在安卓的字體單位中，不再以px，pt作為單位而是統(tǒng)一的使用了sp，換算方式是：
px = sp*ppi/160 ，sp = px / (ppi / 160)
以iPhone7為例，尺寸是750×1334，密度326ppi 來換算，那么Android的1dp = 1 * 326/160 ≈ 2px
「思源黑體」和「Roboto」字體可在GoogleFonts免費(fèi)下載，并且可以商用。
網(wǎng)址：http://www.googlefonts.cn/
3. 話題擴(kuò)展
值得一提的是，越來越多的手機(jī)廠商，為了能夠強(qiáng)化自身的品牌形象，推出了定制款的字體。
比如小米的「小米蘭亭」：
OPPO的「OPPO Sans」：
三星的「SamsungOne」：
字體基礎(chǔ)知識(shí)小結(jié)
正如開頭所說，文字是界面中最核心的元素，字體作為基本語言，是設(shè)計(jì)中體現(xiàn)品牌很重要一點(diǎn)，字體選擇非常重要，字體也是設(shè)計(jì)中占比（約 80%）最大的內(nèi)容，所以我們一定要熟練掌握，接下來將從文字行高、字間距、行間距等說起，圍繞字體排版繼續(xù)聊。
（衡水平面設(shè)計(jì)培訓(xùn)）設(shè)計(jì)中，好的排版能讓用戶愉快地閱讀，而不好的排版則會(huì)給用戶帶來糟糕的閱讀體驗(yàn)。因此排版的潛在重要性不容忽視。
無論是在西方國家還是亞洲國家，大部分人們的閱讀習(xí)慣都是從左到右。這種閱讀模式已經(jīng)延續(xù)了幾百年，因此如無特殊需求，你應(yīng)該使你的文本左對(duì)齊，這樣符合人們一貫的閱讀習(xí)慣（阿拉伯地區(qū)除外）。人缺乏耐性，在閱讀過程中更似是一種遠(yuǎn)近不定的跳躍「掃視」。枯燥的文字如果沒有經(jīng)過任何排版處理，會(huì)讓讀者瞬間失去閱讀的興趣，除非非讀不可。所以通過改進(jìn)文字內(nèi)容的結(jié)構(gòu)和排版來提高閱讀性乃至「誘讀性」，是一件十分必要的事情。
1. 字間距與字偶間距
字間距，英文名為「spacing」，即字符間的距離，事實(shí)上他是字符圖形外邊界框的尺寸和字符在方框中的位置的距離。
字偶間距，英文名為「Kerning」，也叫做「字距調(diào)整」，是在字間距的基礎(chǔ)上，為實(shí)現(xiàn)不同字偶（一對(duì)字符）可以有不同字間距的調(diào)整值。我們都知道，不同的字母外形不同，所以只有同樣的字間距是不協(xié)調(diào)的。例如，「NA」間是標(biāo)準(zhǔn)的字間距，而「WA」由于W和A的形狀可以重疊，所以需要負(fù)字偶間距才能達(dá)到協(xié)調(diào)一致的外觀。
在大段落文字排版時(shí)，我們一般不需要更改字間距和字偶間距，因?yàn)樽煮w設(shè)計(jì)師已經(jīng)對(duì)他們做過了最優(yōu)處理。在對(duì)一組字符單獨(dú)設(shè)計(jì)時(shí)，就需要考慮字偶間距，以達(dá)到更協(xié)調(diào)的視覺效果?？偟膩碚f，字號(hào)越小，字距應(yīng)當(dāng)相對(duì)越大，行高也應(yīng)該相對(duì)越大。反之亦然。
西文字間距還分為：比例字體和等寬字體
比例字體：根據(jù)字符外形特點(diǎn)設(shè)置不同字寬的字體，使得字體外形協(xié)調(diào)，可讀性更好；
等寬字體：每個(gè)字符設(shè)置相同字寬的字體，字符間距較大，它們經(jīng)常被用于顯示計(jì)算機(jī)代碼示例；
2. 字間距的三種形式
標(biāo)準(zhǔn)間距：即默認(rèn)的字間距，字與字之間的距離不大也不小，在設(shè)計(jì)中要根據(jù)不同的字號(hào)設(shè)置不同的字間距來排版，往往需要我們根據(jù)字號(hào)、字重的不同動(dòng)態(tài)調(diào)節(jié)間距參數(shù)，避免千篇一律使用軟件默認(rèn)間距。
緊湊間距：字與字之間的距離向里縮進(jìn)，在字符工具里的「字間距」數(shù)值為負(fù)數(shù)，一般在-5%~-30%不等，通常用在標(biāo)題中。
寬松間距：與緊湊型間距相反，字與字之間間距向外擴(kuò)大，在字符工具里的「字間距」數(shù)值為正數(shù)，一般在5%~30%不等，通常用在正文中。
知識(shí)點(diǎn)：
提示：字間距雖然有以上三種形式，但是在實(shí)際工作中也要具體問題具體分析，例如有些中文字體本身「外邊框」的距離就比較大，如果再加大字間距，就會(huì)顯得過于分散。
3. 西文詞距
在西文閱讀時(shí)，視覺上的自然界限是「詞距」而不是「字距」。如果排版時(shí)需要進(jìn)行例如「兩端對(duì)齊」的行內(nèi)間距調(diào)整，中文直接可以動(dòng)「字距」，把調(diào)整量均勻地放到每個(gè)字間里；而西文卻是動(dòng)「詞距」，只能把調(diào)整量加到詞距里，而單詞內(nèi)部的字距依然是保持字體設(shè)計(jì)師預(yù)設(shè)的原始字距，這是保證西文易讀性的關(guān)鍵所在。
4. 標(biāo)點(diǎn)避頭尾
在古代，書籍排版可以做到字間距恒定，原因是古代不存在「標(biāo)點(diǎn)」，也就沒有「標(biāo)點(diǎn)避頭尾」導(dǎo)致的種種問題。而現(xiàn)代漢語存在標(biāo)點(diǎn)符號(hào)，有的標(biāo)點(diǎn)不能放在行首(如逗號(hào)、頓號(hào)、句號(hào)等)，有的不能放在行尾(引號(hào)、前括號(hào)等)。處理方式叫做「優(yōu)先推出式」標(biāo)點(diǎn)避頭尾，通過將本行內(nèi)的標(biāo)點(diǎn)寬度進(jìn)行擠壓后，騰出了空間給本來排不到的逗號(hào)，確保了字間距的恒定（篇幅限制，本文暫不談文字編排具體調(diào)整方法）。更詳細(xì)的介紹可移步字體設(shè)計(jì)與排印網(wǎng)站 Type is Beautiful 了解。
5. 文本框
在設(shè)計(jì)軟件中，我們（衡水平面設(shè)計(jì)培訓(xùn)）在添加文本時(shí)，就會(huì)創(chuàng)建一個(gè)文本區(qū)域，例如Sketch中文本區(qū)域有三種類型，自動(dòng)寬度、自動(dòng)高度、固定尺寸，而「固定尺寸」可配合「設(shè)置文字層垂直對(duì)齊方式」使用。
6. 對(duì)齊方式
文本的對(duì)齊方向有左、中、右三種對(duì)齊方式。文本對(duì)齊的標(biāo)準(zhǔn)是基于文本區(qū)域的邊界決定的，只有設(shè)置固定的文本區(qū)域?qū)R才有意義。
7. 行高
行高或行距是文字排版的基礎(chǔ)參數(shù)，也是排版品質(zhì)的先決要素之一。行高是一行文本垂直方向的高度，這個(gè)高度和字高無關(guān)，文字內(nèi)容水平居中，如下圖所示：
8. 英文行高
英文的行高指的是一行英文的基線與下一行英文的基線之間的距離，基線（baseline）是英文字體結(jié)構(gòu)中的概念，在css里文字的元素都是按基線來對(duì)齊的。西文基本行高是字號(hào)的1.2倍左右，字體有上伸部（ascender）和下延部（descender）可來創(chuàng)造行間空隙。
9. 中文行高
中文的結(jié)構(gòu)屬于方塊字沒有基線，所以中文的行高指的是一行中文的最底部與下一行中文最底部之間的距離。中文因?yàn)樽址軐?shí)且高度一致，所以一般行高需要更大，根據(jù)不同用戶人群（兒童、年輕人、老年人）以及使用環(huán)境，可達(dá)到1.5~2倍甚至更大。
知識(shí)點(diǎn)：
提示：不管是標(biāo)題、正文還是注釋文字，行高都不易過大或過小，會(huì)導(dǎo)致閱讀困難?？偟膩碚f，字號(hào)越大行高應(yīng)該越小，字號(hào)越小行高應(yīng)該越大。
10. 行長
在《中文排版需求》里，明確寫明了這項(xiàng)基本要求：
2.3.5 版心設(shè)計(jì)的注意事項(xiàng)：「一行的行長應(yīng)為文字尺寸的整數(shù)倍，各行的位置盡可能頭尾對(duì)齊?！?
「一行的行長應(yīng)為文字尺寸的整數(shù)倍」，這一基本的、理所應(yīng)當(dāng)?shù)男枨罂此坪唵危窃趯?shí)際操作中，卻往往由于單位換算等各個(gè)原因沒有得到實(shí)現(xiàn)。對(duì)于后半句提到的「頭尾對(duì)齊」，將另文討論，但顯然也和本文相關(guān)。正因?yàn)樵O(shè)計(jì)師想實(shí)現(xiàn)「頭尾對(duì)齊」才會(huì)盲目地用軟件的「兩端對(duì)齊」功能，大家可以看看身邊的印刷品，注意看一下每段的最后一行間距是不是統(tǒng)一，就可以知道設(shè)計(jì)師有沒有按照這個(gè)原則排版。（衡水平面設(shè)計(jì)培訓(xùn)）
中文的一個(gè)字占兩個(gè)字符，英文一個(gè)字占一個(gè)字符。正文的行長通常在40到60個(gè)字符之間。在行長較寬的區(qū)域（例如桌面）中，包含最多120個(gè)字符的較長行將需要將行高增大。行長過長易讀性就會(huì)變差，讀者閱讀時(shí)容易串行，造成閱讀困難。合理的行長使用戶在行間跳轉(zhuǎn)時(shí)感到輕快和愉悅，反之則會(huì)使閱讀成為一種負(fù)擔(dān)。
11. 行間距
行距是指臨近兩行之間的距離。合適的行距讓用戶閱讀舒服，閱讀效率也高，行距太緊湊會(huì)讓內(nèi)容擠成一團(tuán)，實(shí)現(xiàn)無法正常閱讀；行距太寬松會(huì)讓內(nèi)容松散，產(chǎn)生了我們通常意義上的「河流」，阻斷了行的視線，Photoshop中默認(rèn)行距是1.2倍的字號(hào)，例如字號(hào)是30px，那么將行距設(shè)為36px和默認(rèn)「自動(dòng)」的效果一致。1.2倍的行距對(duì)中文排版來說通常過小，合適的行間距通常為1.5～2倍之間。文本字體越小，兩行之間的行間距應(yīng)該越大，確保字與行呼吸的空間。
12. 英文行間距
英文的行間距指的是一行英文的底部線與下一行英文的頂部線之間的距離?？梢院唵蔚睦斫鉃椤感信c行之間的距離」。另外英文文字底部和頂部都有對(duì)應(yīng)的專有名詞，英文頂部的那條叫「升部線」，底部那條叫「降部線」。
13. 中文行間距
中文的行間距就比較好理解了，是指一行文字的最底部與下一行文字的最頂部之間的距離。即行與行之間的距離。
14. 段間距
段間距：段落與段落之間的距離，可保持頁面節(jié)奏，與字體、行高相互關(guān)聯(lián)。
為保證文章易讀性，正文段間距，可以簡單地取一個(gè)空行（也就是一個(gè)行高），這是比較常規(guī)也比較合適的做法。舉個(gè)例子：字號(hào)12，行高設(shè)定20，段間距 = 行高 + 行間距。行間距越大，段間距就越大；行間距越小，段間距就越小，行距與段間距成正比。段落之間首尾的行之間間距應(yīng)該大于段內(nèi)的間距，這時(shí)候就應(yīng)該增加段間距，使得文本的閱讀體驗(yàn)得到進(jìn)一步的提升。（衡水平面設(shè)計(jì)培訓(xùn)）
在任何一個(gè)設(shè)計(jì)中都需要把各個(gè)元素進(jìn)行分級(jí)，分清主次，這樣才能更好地抓住重點(diǎn)。為了能分清各元素的主次，就需要用到CRAP原則。這四個(gè)原則分別是對(duì)比、重復(fù)、對(duì)齊、親密性。
1. 對(duì)比 Contrast （增強(qiáng)效果、組織信息）
對(duì)比的基本作用是突出重點(diǎn)，增加可讀性。附加作用是有效增強(qiáng)視覺效果，打破平淡，吸引讀者注意。
一些界面排版混亂，可讀性非常差，用戶的視線不知道集
