設計師必看的字體(tǐ)與排版應用指南(nán)關要
文字是界面中(zhōng)最核心的元素，是産品傳達給用戶的和器主要内容，它的承載體(tǐ)即是字體(tǐ)。
前半部分(fēn)從字體(tǐ)的最基器司本屬性（字族、字号、字重、大(dà)小(xiǎo)寫匠睡等）說起，熟悉字體(tǐ)的那些特征，了解字體(物體tǐ)在界面中(zhōng)的作用，以及iOS與討短Android系統字體(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ǐ)選擇和排版，都經過了将近千年的發展和演變，有非常多的專業知(z近南hī)識。像平面設計一(yī)樣，在UI設計中(zhōng)字體(tǐ)的使弟就用也有相應的規範，設計師應懂得這些基礎知(zhī)識，才能将字體(tǐ)分如爲自己所用。
本篇就從我(wǒ)(wǒ)們常用的設計軟件（sketch、Figma、P h員放otoshop）字符面闆開(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、20pt）。
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ōn很司g)比較少見，文字閱讀類偏愛這種襯線體(tǐ)，例如「單讀」，大(dà)标器就題用的是「華康標宋體」、正文内容用的是「蘋近草方-纖細」而英文用的是「XCross Traditi為遠onal Bold」
黑體(tǐ)
黑體(tǐ)是無襯線字體(tǐ)，特點是筆畫沒有大冷額外(wài)的裝飾，且筆畫的粗細差不多。船朋相比嚴肅的襯線體(tǐ)，簡單幹淨的無襯線體(黃物tǐ)給人一(yī)種休閑輕松的感覺。因此大(dà但要)多數App都是使用黑體(tǐ)作爲默認字體(tǐ)。如冬青黑體(tǐ)、思路雨源黑體(tǐ)、Myriad等。
2. 字族 FontFamily
一(yī)個族類包含不同的字體(tǐ)，然而笑討一(yī)個字體(tǐ)又(yòu)可能有好幾種字族。如果電(diàn)錢放腦安裝了Helvetica，在Sketch字體(tǐ)選擇道銀器中(zhōng)會發現超過40多個前綴是Helvetica的字族個視。這是爲了協助人們在不同的使用場景下(x錢數ià)表達合适的意思。
知(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ōn藍低g)小(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ǐ)單位是pt，Andr校雪oid是sp。
以iOS爲例，正文字号不應小(xiǎo)于11pt，這樣才能黃訊被正常閱讀，建議在14-18pt之間。在使用哥一較大(dà)的字體(tǐ)來獲得更好的易讀性的同時，區女我(wǒ)(wǒ)們也應相應地減小(xiǎo)字體(t好在ǐ)的字重，考慮Light、Thin，因爲過重花中的字體(tǐ)會太過醒目，影響其他内容的相黑顯示效果。
當字體(tǐ)大(dà)小(xiǎo)爲12-18pt時，建議使用河但Regular，18-24pt時，使用Light，24-紙訊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à)小(xiǎ你相o)爲h= 2*30·tan(0.科房3/2) ≈ 0.157cm ，拿我(wǒ)(wǒ)們經常使用iPho湖章ne7的尺寸1334×750爲例。iPhone7的d銀低pi爲324，也就是一(yī)英寸上顯示324個像素，1英寸爲2.54cm，那看匠麽0.157cm=324*(0.157/2.5日舊4cm)= 20px。
字号的基數關系
我(wǒ)(wǒ)們在做設計時，字号的單位最好使用一(yī腦錯)個基數作爲倍增，如2、4、6、8、10訊那 或者3、6、9、12。但其實我(wǒ)(wǒ)們在做道讀移動端設計時，單位需要遵循偶數原則，因爲開(k為外āi)發中(zhōng)的單位是以一(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、Bl新歌ack、Heavy等。不同的字體(tǐ)廠商(shāng)劃分(fēn)字重各科火有不同，例如「蘋方」字體(tǐ)就有6種不同的字重。
一(yī)般都有細體(tǐ)、正常、粗體(tǐ)三種基本字族。在應用場唱湖景上，通常「細體(tǐ)」多用于超大(dà)号字體(tǐ)；「正常」用于正文内如舞容；「粗體(tǐ)」表示強調，多用于标題；
兩種字重屬性
輕字重：傳遞出輕盈放(fàng)松的視覺感受，常相好配合粗的字重使用，在一(yī)些輔助信息，說明文案時候使業訊用；
重字重：視覺感受莊重，很重要，常用在重點強調的文字，行他頁面大(dà)标題，數字，引導行動操作點上等；
例如百度網盤「發現」頁就用了Regular、Med跳可ium、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舞報-width
全角是指一(yī)個字符占用兩個标準字符的位置。中(zhōng)文字服劇符、全角的英文字符、國标GB2312-19通會80中(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 Francisco」也簡稱「SF-UI」，英腦能文還有另外(wài)一(yī)個襯線體(tǐ)「Ne樂作wYork」。除了在iOS和Mac OS劇信上，還單獨爲Watch OS單獨對字體(tǐ)進金坐行了調整，命名爲 San Francisco Co校新mpact。
字體(tǐ)設置
因爲在英文字體(tǐ)下(xià)，字體(tǐ)環境比較複雜(zá)，爲了離了讓字體(tǐ)在任何地方看起來都最佳，蘋果些離官方針對不同字号開(kāi)發了兩套「SF-UI Text」和「SF友土-UI Pro」字體(tǐ)，而每套字體(tǐ)下(xià)面又(yò樂事u)分(fēn)爲Text（文本模式）與Dis聽訊play（展示模式）兩種屬性，Text隻有6個字重，而Dis件靜play則有9個字重。
這麽多類型的字體(tǐ)我(wǒ)(wǒ)們該怎麽用呢？iO通現S的建議是，在字号小(xiǎo)于20pt時，使用SF-UI Tex說朋t，大(dà)于或等于20pt時，則使用SF玩西-UI Display。這需要我(wǒ)(wǒ)們在界面看很設計時手動切換。
對于「NewYork」，小(xiǎo)于20點的文本使用小(x兵國iǎo)号，20到35點之間的文本使用中森聽(zhōng)号，36到53點之間的文本使用大(dà)号，54點或更地但大(dà)的文本使用特大(dà)号。
蘋方字體(tǐ)提供了6個字重供設計開(kāi)發者使用。所都腦以從iOS11開(kāi)始，iOS使用Semibold中(zhōn員間g)粗體(tǐ)、大(dà)字号作爲界面的标題變的更爲流行起近懂來，較爲明顯的有 iOS 中(zhōng)的一(yī理花)些原生(shēng)APP，比如App Store、Apple Mus玩舊ic…
知(zhī)識點：
在iOS中(zhōng)，默認字體(tǐ)單位是「pt」，正文字這外号不應小(xiǎo)于11pt，建議在15-18pt之間慢司。在使用較大(dà)的字體(tǐ)來獲得更好的易讀性同時拿玩，也應該相應地減小(xiǎo)字體(tǐ)的字重，因爲月見過重的字體(tǐ)會太過醒目厚重，影響其他内容的顯示效女道果。
iOS更全面的文字設置
動态類型可以通過讓讀者選擇他們喜歡的文本大公有(dà)小(xiǎo)來提供額外(wài)年樂的靈活性，除了标準的動态類型大(dà)小(問錯xiǎ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.co志森m/fonts/
2. Android字體(tǐ)規範
可用字體(tǐ)
在Android設備中(zhōng)，A男和ndroid始祖Google爲了更好的追求視覺效果，聯合了A議件dobe設計發布了「思源黑體(tǐ)」(Noto)業是來作爲中(zhōng)文默認字體(tǐ)，「熱笑Roboto」爲英文字體(tǐ)。
字體(tǐ)類型
思源黑體(tǐ)，英文名爲「NotoSans CJK」。該字體(吃電tǐ)不僅僅在字形上更易于在屏幕閱讀，并且擁有7種字重，充分(fēn)滿足了設草習計的要求。
英文「Roboto」字體(tǐ)，隻有6個字重，視林費覺語言與思源黑體(tǐ)Noto保持一(yī)緻。該字體(t林內ǐ)具有「現代的」和「平易近人」的氣質，是「Mate相錢rial Design」設計風格下(xià)的推薦字體(tǐ)。
字體(tǐ)設置
Material Design字體(tǐ)規範，字體(tǐ)類型比例支持銀都的十三種樣式的組合。它包含可重用的文本類别，每種類别都有預期的應用劇刀程序和含義。
注：Web浏覽器根據根元素大(dà)小(xiǎo)計算REM（根em大(d快在à)小(xiǎo)）。 現代網絡浏覽器的默認值爲16px，因秒個此轉換爲SP_SIZE / 16 = rem。
△Material Design設計類型比例。（字母間距值與Sket跳大ch兼容。）
知(zhī)識點：
值得注意的是，在安卓的字體(tǐ)單位中(z用近hōng)，不再以px，pt作爲單位而是統一(yī)的使用了s媽飛p，換算方式是：
px = sp*ppi/160 ，sp =低業 px / (ppi / 160)
以iPhone7爲例，尺寸是750×1334，密度上就326ppi 來換算，那麽Android的1dp = 1 * 326/16為間0 ≈ 2px
「思源黑體(tǐ)」和「Roboto」字體(tǐ)可在GoogleFon員校ts免費(fèi)下(xià)載，并且可以商(sh音輛āng)用。
網址：http://www.googlefonts.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. 西文詞距
在西文閱讀時，視覺上的自然界限是「詞距」術區而不是「字距」。如果排版時需要進行例如「兩端對齊」的行内間距調整，中明很(zhōng)文直接可以動「字距」，把調整量均勻地放(fàn紅章g)到每個字間裏；而西文卻是動「詞距」，隻能把調整喝我量加到詞距裏，而單詞内部的字距依然是保持字體(tǐ)設計師預設的原始字距，這術歌是保證西文易讀性的關鍵所在。
4. 标點避頭尾
在古代，書(shū)籍排版可以做到字間距恒定，原因是古代不存在「銀工标點」，也就沒有「标點避頭尾」導緻的種種問題。而現代漢語存在雜業标點符号，有的标點不能放(fàng)在行首(如逗身樂号、頓号、句号等)，有的不能放(fàng)在行尾(引号、前括号北上等)。處理方式叫做「優先推出式」标點避頭尾，通過錯都将本行内的标點寬度進行擠壓後，騰出了空間給睡內本來排不到的逗号，确保了字間距的恒定（篇幅限制，本文暫不懂我談文字編排具體(tǐ)調整方法）。更詳細的介紹可移步字體(tǐ)設計書關與排印網站 Type is Beautiful 了解。
5. 文本框
在設計軟件中(zhōng)，我(wǒ)(wǒ)們在機如添加文本時，就會創建一(yī)個文本區域，例如Sketc商下h中(zhōng)文本區域有三種類型，自動寬度、自動高度、固定尺小請寸，而「固定尺寸」可配合「設置文字層垂直對齊方式」使用。
6. 對齊方式
文本的對齊方向有左、中(zhōng)、右三種對齊方式。文本對齊的關懂标準是基于文本區域的邊界決定的，隻有設置固定的文本區域對齊才有意義區車。
7. 行高
行高或行距是文字排版的基礎參數，也是排版品質的先決要素之一(yī)。行高是一工作(yī)行文本垂直方向的高度，這個高度和字高無關，文字内容水平居中(zhō商票ng)，如下(xià)圖所示：
8. 英文行高
英文的行高指的是一(yī)行英文的基線與下(xià)一(yī)行英文的門開基線之間的距離(lí)，基線（baseline）是英文字音知體(tǐ)結構中(zhōng)的概念，在css裏文字的元素都是按基線來對美但齊的。西文基本行高是字号的1.2倍左右，字體(t間做ǐ)有上伸部（ascender）和下(xià)延部（descender）作外可來創造行間空隙。
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)，包含最多120個字符的較長行将需要将行高增又現大(dà)。行長過長易讀性就會變差，讀者閱讀時容易串行，造成閱讀困難。電理合理的行長使用戶在行間跳轉時感到輕快和愉悅，反之則會海化使閱讀成爲一(yī)種負擔。
11. 行間距
行距是指臨近兩行之間的距離(lí)。合适的行距讓用戶會制閱讀舒服，閱讀效率也高，行距太緊湊會讓内容擠成一(yī)團，實現無法正朋快常閱讀；行距太寬松會讓内容松散，産生(shēng)了我(wǒ)(wǒ)們亮木通常意義上的「河流」，阻斷了行的視線，Photoshop中(z拍林hō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)清各元素的主次，就需要用到CRAP原則。這四個原則分愛門(fēn)别是對比、重複、對齊、親密性。
1. 對比 Contrast （增強效果、組織信息）
對比的基本作用是突出重點，增加可讀性。附加作用是有效增強視覺要厭效果，打破平淡，吸引讀者注意。
一(yī)些界面排版混亂，可讀性非常差，用戶的視林答線不知(zhī)道集中(zhō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都在做的DarkMode議錯暗色模式，但其實暗色背景搭配淺色文字并不适合大(dà)量閱讀。當然這也到森是爲了配合用戶使用場景，在夜晚光線較暗的環境下(那中xià)，深色模式或許更利于閱讀。「冷知(zhī)識：暗色模式其實就是很藍廠商(shāng)爲了解決電(dià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)是設計中(z錢草hō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 Ratio）身線原本是用在聲音和圖像領域的概念。在互聯網産品中(z購下hō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)車(c友睡hē)的時候操作手機是非常危險的。在40km/h的速度下(x公舊ià)，看手機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)發的實現方式，細節問題的解決方法至關重要。在A好場ndroid中(zhōng)，文字開(kāi)發工(gōng)作是生用通過一(yī)個叫TextView控件來實現的，主要承擔文本顯示的大媽任務，任何APP都不可避免的會用到它。TextView常用屬性什廠如下(xià)圖：
2. 字體(tǐ)字重對應的font-weight值喝理
在前文聊過，每種字體(tǐ)都對應有好幾種字重（Regu說公lar、Normal、Medium、Light ），在給開(k子相āi)發的 UI 設計稿中(zhōng)，我(wǒ)(wǒ)們給的字體體頻(tǐ)标注通常有 PingFangSC-Regular花畫、PingFangSC-Medium、PingFan近光gSC-Bold，并不會直接給開(kāi)發 fon電月t-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、B船可ook、Roman；和700大(dà)緻符合将會歸爲Bold。若紙體一(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à)于3森司2px。
△ 雖然标注出來的參數都是一(yī)樣大(dà)，但視覺上間距卻是不一(y有木ī)樣的
4. Leading-Trim：數字排版的未來
去(qù)年六月，Microsoft Design音他贊助了一(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ōng)實現邊界框間距。市請因此，它們會出現随機的間距值。
爲了緩解此随機性問題，開(kāi)發人討我員(yuán)可以在CSS中(zhōng)以負邊距「裁剪」文本框。但是負邊費拍距将需要手動确定，并且是特定于字體(tǐ)的睡可，因此是「随機的」。任何字體(tǐ)，浏覽器，操作系統議自或語言環境的更改都将不可避免地導緻你不小(xiǎo)心設置邊距。此外(wài)的會，該技術通常不是良好的編碼實踐，并且可能導緻意外(wài)的副作用。
Leading-Trim新規範
Leading-trim是CSS工(gōng)作組正在引入的新CSS屬性。錢我顧名思義，它就像文本框剪刀一(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)。使用Lea金器ding-Trim修剪，就可以很省心的使文本垂直居中(zhōng)。
知(zhī)識點：
原因是每種字體(tǐ)的設計也不同。它具做志有自己的默認行高，并且其中(zhōng)的文本可以具有不同的大(dà中裡)小(xiǎo)和基線位置，并不都是水平居中(zhōng)對齊的。因此身道，有時即使字體(tǐ)大(dà)小(xiǎo)，行高和文本框位置保持不變，更改知醫字體(tǐ)也會改變文本的對齊方式，如下(xià)例所示，文字很術拍明顯沒有對齊。
在第二個示例中(zhōng)，你可以看到Leading-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使用系統默認行高，Androi家厭d系統去(qù)掉文字上下(xià)padding。
這種方式雖會花費(fèi)不少時間，但也最精确，你視事可以據此設置出最美觀合理的間距，而不用擔心上線稿的還北長原度問題，也便于我(wǒ)(wǒ)們後期的頁面校對和調整。
△在Sketch中(zhōng)修改文字高度
6. 什麽是彈性适配
文字彈性适配一(yī)般涉及的是寬度适配，寬度兒暗适配普遍使用的是間距适配，即定好左右頁邊距，中(zhōng)間彈性拉區亮伸。這種方式可以做到較好的适配，也是做快速常用的适配上空方法。
7. 标注工(gōng)具
設計師将設計文件交付開(kāi)發之前，應站在程序員(yuán)的站看角度着想，做好前期溝通，提供他們開(kāi)發所需好器要的資(zī)源。設計文件的标注可以使用Sket志電ch插件或直接上傳「藍(lán)湖」，拿件門Sketch插件「Sketch Measure」爲中窗例，它是一(yī)款十分(fēn)智能的标注插件，主要功能包路我含兩大(dà)塊：标注和規範。
工(gōng)具欄彙合了Measure所有功能微作的快捷工(gōng)具，永遠置于畫布頂層，有了它就不用這著再頻(pín)繁通過菜單欄去(qù)使用功能。
做好規範後，點擊「導出規範」一(yī)鍵自動生(shēng)成Htm公上l頁面，浏覽器打開(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ī)種，是Medi鄉鐘um，還是SemiBold；
字色：标題、正文、注釋、提示等文字顔色；
字間距：檢查中(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à美讀)家有所幫助。因爲篇幅較長，幾經修改，有細節不正确的地方，歡迎留言矯正，感謝技紙閱讀。
上一(yī)篇：競價培訓技巧大(dà)全
下(xià)一(yī)篇：增強網站說服力的15個要素
相關内容
觀察行業視覺，用專業的角度，講出你們的心聲。
