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