文(wén)字是界面中(zhōng)最核心的元素，是产(chǎn)品传达给用(yòng)户的主要内容，它的承载體(tǐ)即是字體(tǐ)。
前半部分(fēn)从字體(tǐ)的最基本属性（字族、字号、字重、大小(xiǎo)写等）说起，熟悉字體(tǐ)的那些特征，了解字體(tǐ)在界面中(zhōng)的作(zuò)用(yòng)，以及iOS与Android系统字體(tǐ)的使用(yòng)规范。
字體(tǐ)基础知识
字體(tǐ)是界面设计的基石
字體(tǐ)是排版中(zhōng)最重要的元素，对用(yòng)户的阅读體(tǐ)验有(yǒu)着至关重要的作(zuò)用(yòng)。一般来说，设计师需要了解的字體(tǐ)通常有(yǒu)中(zhōng)文(wén)字體(tǐ)和西文(wén)字體(tǐ)两种。西文(wén)字體(tǐ)由来已久，从最早的罗马字體(tǐ)到现在苹果手机中(zhōng)的SF-UI字體(tǐ)，经历了许多(duō)设计上的变革。而中(zhōng)文(wén)字體(tǐ)的发展并没有(yǒu)西文(wén)字體(tǐ)那么顺利，数量上也遠(yuǎn)遠(yuǎn)落后于其他(tā)字體(tǐ)。但中(zhōng)國(guó)设计正在崛起，我们也看到越来越多(duō)的设计团队和设计师加入字體(tǐ)设计的队伍，数量上正在呈指数级别增加。
设计是一门非常严谨的學(xué)科(kē)，里面蕴含了很(hěn)多(duō)道理(lǐ)，就连最基础的字體(tǐ)选择和排版，都经过了将近千年的发展和演变，有(yǒu)非常多(duō)的专业知识。像平面设计一样，在UI设计中(zhōng)字體(tǐ)的使用(yòng)也有(yǒu)相应的规范，设计师应懂得这些基础知识，才能(néng)将字體(tǐ)為(wèi)自己所用(yòng)。
本篇就从我们常用(yòng)的设计软件（sketch、Figma、P hotoshop）字符面板开始，来聊聊有(yǒu)关字體(tǐ)与排版应用(yòng)方面的知识。
字體(tǐ)的那些属性
Font 中(zhōng)文(wén)翻译為(wèi)「字型」，是指字的粗细、宽度和样式，是一套具(jù)有(yǒu)同样风格和尺寸的字形。例如「Regular_16pt_SF-UI」。
Typeface 中(zhōng)文(wén)翻译為(wèi)「字體(tǐ)」，是指一整套的字形，一个或多(duō)个字型的多(duō)尺寸的集合，例如「SF-UI」里有(yǒu)不同粗细（Regular、Blod、Light）和不同宽度（12pt、14pt、20pt）。
Glyph 中(zhōng)文(wén)翻译為(wèi)「字形」，是指单个字的形體(tǐ)或是字體(tǐ)的骨骼。 同一字可(kě)以有(yǒu)不同的字形，而不影响其表达的意思，例如汉字中(zhōng)的「令」字，第三筆(bǐ)可(kě)以是一点或一撇， 最末两筆(bǐ)可(kě)以作(zuò)「ㄗ」或「マ」。
Font和Typeface常常被混淆使用(yòng)，其实可(kě)以这样理(lǐ)解，前者指一种设计，后者指具(jù)體(tǐ)的产(chǎn)品。
1. 族类 GenericFamily
族类就是不同字體(tǐ)类型，例如阿里巴巴普惠體(tǐ)、方正新(xīn)书宋、站酷酷黑體(tǐ)等。
而这些众多(duō)字體(tǐ)又(yòu)可(kě)分(fēn)為(wèi)「衬線(xiàn)體(tǐ)」和「无衬線(xiàn)體(tǐ)」。
衬線(xiàn)體(tǐ)
宋體(tǐ)就是衬線(xiàn)體(tǐ)，特点就是筆(bǐ)画开始和末端的地方都有(yǒu)额外的装(zhuāng)饰，且筆(bǐ)画的粗细有(yǒu)所不同。在传统的正文(wén)印刷中(zhōng)，普遍认為(wèi)衬線(xiàn)字體(tǐ)能(néng)带来更加的可(kě)读性。常见的衬線(xiàn)體(tǐ)有(yǒu)宋體(tǐ)、Times New Roman、Georgia等。
衬線(xiàn)體(tǐ)一般在APP中(zhōng)比较少见，文(wén)字阅读类偏爱这种衬線(xiàn)體(tǐ)，例如「单读」，大标题用(yòng)的是「華康標宋體」、正文(wén)内容用(yòng)的是「苹方-纤细」而英文(wén)用(yòng)的是「XCross Traditional Bold」
黑體(tǐ)
黑體(tǐ)是无衬線(xiàn)字體(tǐ)，特点是筆(bǐ)画没有(yǒu)额外的装(zhuāng)饰，且筆(bǐ)画的粗细差不多(duō)。相比严肃的衬線(xiàn)體(tǐ)，简单干净的无衬線(xiàn)體(tǐ)给人一种休闲轻松的感觉。因此大多(duō)数App都是使用(yòng)黑體(tǐ)作(zuò)為(wèi)默认字體(tǐ)。如冬青黑體(tǐ)、思源黑體(tǐ)、Myriad等。
2. 字族 FontFamily
一个族类包含不同的字體(tǐ)，然而一个字體(tǐ)又(yòu)可(kě)能(néng)有(yǒu)好几种字族。如果電(diàn)脑安(ān)装(zhuāng)了Helvetica，在Sketch字體(tǐ)选择器中(zhōng)会发现超过40多(duō)个前缀是Helvetica的字族。这是為(wèi)了协助人们在不同的使用(yòng)场景下表达合适的意思。
知识点：
基本字族包括细體(tǐ)、标准、粗體(tǐ)、斜體(tǐ)，值得注意的是，斜體(tǐ)字常用(yòng)在引用(yòng)文(wén)本上，代表「本段文(wén)字引用(yòng)的是另一个著作(zuò)」的含义。
例如：「若我们能(néng)以满怀新(xīn)鲜的眼神去观照日常，「设计」的意义定会超越技(jì )术的层面，為(wèi)我们的生活观和人生观注入力量。」（引自原研哉的《设计中(zhōng)的设计》）
3. X-height（X字高）
在西文(wén)字體(tǐ)中(zhōng)，x高度是指字母的基本高度，就是基線(xiàn)和主線(xiàn)之间的距离。它指一个字體(tǐ)中(zhōng)小(xiǎo)写字母的x高度，在现代字體(tǐ)设计领域，x高度代表了一个字體(tǐ)的设计因素，因此在一些场合字母x本身并不完全等于x字高。
除了字母a、c、e、m、n、o等高度一样，还有(yǒu)一些小(xiǎo)写字母的字高都比x字高要大，并分(fēn)為(wèi)两类：一是含有(yǒu)升部的字母，字母筆(bǐ)画含有(yǒu)向上部分(fēn)，如字母b、d、h；另一类是含有(yǒu)降部的字母，字母的筆(bǐ)画向下超过了基線(xiàn)，如字母g、p、q。
4. 字号 Font-size
字号就是字體(tǐ)大小(xiǎo)，通常在网页(yè)端使用(yòng)px作(zuò)為(wèi)字号的单位。移动端兴起后，iOS字體(tǐ)单位是pt，Android是sp。
以iOS為(wèi)例，正文(wén)字号不应小(xiǎo)于11pt，这样才能(néng)被正常阅读，建议在14-18pt之间。在使用(yòng)较大的字體(tǐ)来获得更好的易读性的同时，我们也应相应地减小(xiǎo)字體(tǐ)的字重，考虑Light、Thin，因為(wèi)过重的字體(tǐ)会太过醒目，影响其他(tā)内容的显示效果。
当字體(tǐ)大小(xiǎo)為(wèi)12-18pt时，建议使用(yòng)Regular，18-24pt时，使用(yòng)Light，24-32pt,使用(yòng)Thin，当字體(tǐ)大小(xiǎo)超过32pt时，建议使用(yòng)Ultralight。
字号大小(xiǎo)决定了信息的层级和主次关系，合理(lǐ)有(yǒu)序的字号设置能(néng)让界面信息清晰易读、层次分(fēn)明；相反，糟糕无序的字号使用(yòng)会让界面混乱不堪，影响阅读體(tǐ)验。
设计中(zhōng)的最小(xiǎo)字号
我们都知道在界面设计中(zhōng)最小(xiǎo)字号不能(néng)低于20px，那是因為(wèi)，正常情况下，在手机距离眼睛30cm左右，使用(yòng)视角计算公(gōng)式，我们能(néng)识别到的最低的文(wén)字大小(xiǎo)為(wèi)h= 2*30·tan(0.3/2) ≈ 0.157cm ，拿(ná)我们经常使用(yòng)iPhone7的尺寸1334×750為(wèi)例。iPhone7的dpi為(wèi)324，也就是一英寸上显示324个像素，1英寸為(wèi)2.54cm，那么0.157cm=324*(0.157/2.54cm)= 20px。
字号的基数关系
我们在做设计时，字号的单位最好使用(yòng)一个基数作(zuò)為(wèi)倍增，如2、4、6、8、10 或者3、6、9、12。但其实我们在做移动端设计时，单位需要遵循偶数原则，因為(wèi)开发中(zhōng)的单位是以一倍图的基数来进行计算。那么其实在制定字體(tǐ)规范中(zhōng)，使用(yòng)2為(wèi)单位会导致字号过多(duō)，且2号字體(tǐ)的差异化不大。所以在字号方面我们使用(yòng)4作(zuò)為(wèi)单位是比较合适的：一是适配后在@2x跟@3x不会出现半像素，二是使用(yòng)4為(wèi)单位，能(néng)满足字體(tǐ)大小(xiǎo)的均衡。
5. 字重 FontWeight
Weight，中(zhōng)文(wén)翻译為(wèi)「字重」，是指字體(tǐ)筆(bǐ)画的粗细，字體(tǐ)中(zhōng)很(hěn)重要一个概念，不同字重传递出来视觉感受完全不一样。一般在字體(tǐ)家族名(míng)后面注名(míng)Thin、Light、Regular、Blod、Black、Heavy等。不同的字體(tǐ)厂商(shāng)划分(fēn)字重各有(yǒu)不同，例如「苹方」字體(tǐ)就有(yǒu)6种不同的字重。
一般都有(yǒu)细體(tǐ)、正常、粗體(tǐ)三种基本字族。在应用(yòng)场景上，通常「细體(tǐ)」多(duō)用(yòng)于超大号字體(tǐ)；「正常」用(yòng)于正文(wén)内容；「粗體(tǐ)」表示强调，多(duō)用(yòng)于标题；
两种字重属性
轻字重：传递出轻盈放松的视觉感受，常配合粗的字重使用(yòng)，在一些辅助信息，说明文(wén)案时候使用(yòng)；
重字重：视觉感受庄重，很(hěn)重要，常用(yòng)在重点强调的文(wén)字，页(yè)面大标题，数字，引导行动操作(zuò)点上等；
例如百度网盘「发现」页(yè)就用(yòng)了Regular、Medium、Semibold三种字重以拉开信息层次对比；
知识点：
需要注意的是：在进行界面设计时，不要用(yòng)软件自带的文(wén)本加粗，它不仅破坏了字體(tǐ)本身的美感，还改变了文(wén)字原本的字宽，小(xiǎo)字體(tǐ)下会模糊不清，合理(lǐ)的方式是使用(yòng)字體(tǐ)本身的字重来控制粗细。
注意超细體(tǐ)的字體(tǐ)
字重超细的字體(tǐ)要谨慎使用(yòng)。如果你设计的文(wén)本是装(zhuāng)饰性倒还好，如果是需要用(yòng)户能(néng)清晰阅读的，就要特别慎重，能(néng)不用(yòng)就不用(yòng)，否则在部分(fēn)低分(fēn)辨率的手机屏幕上看起来会非常糟糕。
6. 字色 FontColor
字色即文(wén)字对应的颜色，不做过多(duō)解释。需要大家注意的是 遠(yuǎn)离纯黑色和纯灰色！
纯黑色就像没有(yǒu)生命力的深渊，能(néng)吞噬所有(yǒu)细节，使用(yòng)户陷入冷冰冰的极端情绪中(zhōng)。纯黑色还会与白色产(chǎn)生强烈的对比度，看久了就会感觉疲劳，让用(yòng)户产(chǎn)生焦虑情绪。
还有(yǒu)就是真实世界中(zhōng)是不存在纯黑色的。尝试在色彩中(zhōng)加入一些色相，这样就不会让页(yè)面看上去死气沉沉的。例如iOS系统「设置」页(yè)面背景色就是加入了白色的低饱和度蓝色，看上去柔和自然。
7. 字符样式 FontStyle
除了以上几个最常用(yòng)的文(wén)字属性外，还有(yǒu)几个使用(yòng)频率比较低的字體(tǐ)设置。例如带下划線(xiàn)的、删除線(xiàn)的文(wén)本。「下划線(xiàn)文(wén)本」一般出现在「文(wén)字按钮」或带链接的网址，而「删除線(xiàn)文(wén)本」一般会出现在商(shāng)品橱窗的现价、原价
例如「CCtalk」的课程现价和原价的區(qū)分(fēn)，原价用(yòng)删除文(wén)本，「微信读书」文(wén)章底部「加入书架 随时阅读」就是带链接的下划線(xiàn)文(wén)本。
8. 字符选项 Text options
Ps和Sketch都有(yǒu)文(wén)字（字符）选项一栏，主要针对西文(wén)字母大小(xiǎo)写格式变换的设置。最常见有(yǒu)默认大小(xiǎo)写、全部大写、全部小(xiǎo)写和小(xiǎo)型大写字母，Ps里面还有(yǒu)「上标」和「下标」。
默认大小(xiǎo)写：即正常大小(xiǎo)写格式，软件不做干预；
全部大写：如果输入的是小(xiǎo)写字母，选择这个选项，软件会强制把小(xiǎo)写改為(wèi)大写；
全部小(xiǎo)写：如果输入的是大写字母，或者只是首字母大写，选择这个选项，软件会强制把所大写改為(wèi)小(xiǎo)写；
小(xiǎo)型大写字母：这个选项比较特殊，所谓「小(xiǎo)型大写」就是，在字号一样的情况下，与小(xiǎo)写字母一样高，外形与大写字母保持一致。
注意英文(wén)大写
纯大写的字母文(wén)本本身不太适合大篇幅阅读，会加大阅读障碍，用(yòng)的时候注意要额外拉开字母之间的字间距，提升可(kě)读性。
9. 全角与半角 Full-width and half-width
全角是指一个字符占用(yòng)两个标准字符的位置。中(zhōng)文(wén)字符、全角的英文(wén)字符、國(guó)标GB2312-1980中(zhōng)的图形符号、特殊符号都是全角字符。半角是指一个字符占用(yòng)一个标准字符的位置。
通常情况下，英文(wén)字母、数字、符号等都是半角字符。半角和全角主要是针对标点符号来说的，因為(wèi)正常情况下没有(yǒu)打全角英文(wén)的需求。
知识点：
在设计作(zuò)品时也一定要记得中(zhōng)文(wén)搭配全角符号，英文(wén)使用(yòng)半角符号。否则会出现诸如「你好.」或者「t h a n k s。」这样的错误。可(kě)按键盘「capslock」键切换全角和半角。这个小(xiǎo)知识点虽然非常基础，却也是设计中(zhōng)经常出错的地方。
iOS与Android
众所周知，iOS和Android两大阵营都有(yǒu)各自的设计系统，要作(zuò)出符合平台规范的设计，设计师应熟读各平台的设计规则。因為(wèi)本篇以讲字體(tǐ)為(wèi)主，我们就来看看iOS和Android各自字體(tǐ)的规范是什么样的。
1. iOS字體(tǐ)规范
可(kě)用(yòng)字體(tǐ)
在iOS系统规范中(zhōng)，中(zhōng)文(wén)字體(tǐ)是「苹方」字體(tǐ)。英文(wén)字體(tǐ)是「San Francisco」也简称「SF-UI」，英文(wén)还有(yǒu)另外一个衬線(xiàn)體(tǐ)「NewYork」。除了在iOS和Mac OS上，还单独為(wèi)Watch OS单独对字體(tǐ)进行了调整，命名(míng)為(wèi) San Francisco Compact。
字體(tǐ)设置
因為(wèi)在英文(wén)字體(tǐ)下，字體(tǐ)环境比较复杂，為(wèi)了让字體(tǐ)在任何地方看起来都最佳，苹果官方针对不同字号开发了两套「SF-UI Text」和「SF-UI Pro」字體(tǐ)，而每套字體(tǐ)下面又(yòu)分(fēn)為(wèi)Text（文(wén)本模式）与Display（展示模式）两种属性，Text只有(yǒu)6个字重，而Display则有(yǒu)9个字重。
这么多(duō)类型的字體(tǐ)我们该怎么用(yòng)呢(ne)？iOS的建议是，在字号小(xiǎo)于20pt时，使用(yòng)SF-UI Text，大于或等于20pt时，则使用(yòng)SF-UI Display。这需要我们在界面设计时手动切换。
对于「NewYork」，小(xiǎo)于20点的文(wén)本使用(yòng)小(xiǎo)号，20到35点之间的文(wén)本使用(yòng)中(zhōng)号，36到53点之间的文(wén)本使用(yòng)大号，54点或更大的文(wén)本使用(yòng)特大号。
苹方字體(tǐ)提供了6个字重供设计开发者使用(yòng)。所以从iOS11开始，iOS使用(yòng)Semibold中(zhōng)粗體(tǐ)、大字号作(zuò)為(wèi)界面的标题变的更為(wèi)流行起来，较為(wèi)明显的有(yǒu) iOS 中(zhōng)的一些原生APP，比如App Store、Apple Music…
知识点：
在iOS中(zhōng)，默认字體(tǐ)单位是「pt」，正文(wén)字号不应小(xiǎo)于11pt，建议在15-18pt之间。在使用(yòng)较大的字體(tǐ)来获得更好的易读性同时，也应该相应地减小(xiǎo)字體(tǐ)的字重，因為(wèi)过重的字體(tǐ)会太过醒目厚重，影响其他(tā)内容的显示效果。
iOS更全面的文(wén)字设置
动态类型可(kě)以通过让读者选择他(tā)们喜欢的文(wén)本大小(xiǎo)来提供额外的灵活性，除了标准的动态类型大小(xiǎo)之外，iOS系统还為(wèi)有(yǒu)阅读大字體(tǐ)的需求的用(yòng)户提供了许多(duō)字号上的调整（可(kě)在系统字體(tǐ)显示大小(xiǎo)设置）
iOS「显示与亮度」下设置「文(wén)字大小(xiǎo)」模式
「苹方」和「SF-UI」字體(tǐ)可(kě)在iOS规范网站免费下载
2. Android字體(tǐ)规范
可(kě)用(yòng)字體(tǐ)
在Android设备中(zhōng)，Android始祖Google為(wèi)了更好的追求视觉效果，联合了Adobe设计发布了「思源黑體(tǐ)」(Noto)来作(zuò)為(wèi)中(zhōng)文(wén)默认字體(tǐ)，「Roboto」為(wèi)英文(wén)字體(tǐ)。
字體(tǐ)类型
思源黑體(tǐ)，英文(wén)名(míng)為(wèi)「NotoSans CJK」。该字體(tǐ)不仅仅在字形上更易于在屏幕阅读，并且拥有(yǒu)7种字重，充分(fēn)满足了设计的要求。
英文(wén)「Roboto」字體(tǐ)，只有(yǒu)6个字重，视觉语言与思源黑體(tǐ)Noto保持一致。该字體(tǐ)具(jù)有(yǒu)「现代的」和「平易近人」的气质(zhì)，是「Material Design」设计风格下的推荐字體(tǐ)。
字體(tǐ)设置
Material Design字體(tǐ)规范，字體(tǐ)类型比例支持的十三种样式的组合。它包含可(kě)重用(yòng)的文(wén)本类别，每种类别都有(yǒu)预期的应用(yòng)程序和含义。
注：Web浏览器根据根元素大小(xiǎo)计算REM（根em大小(xiǎo)）。 现代网络浏览器的默认值為(wèi)16px，因此转换為(wèi)SP_SIZE / 16 = rem。
△Material Design设计类型比例。（字母间距值与Sketch兼容。）
知识点：
值得注意的是，在安(ān)卓的字體(tǐ)单位中(zhōng)，不再以px，pt作(zuò)為(wèi)单位而是统一的使用(yòng)了sp，换算方式是：
px = sp*ppi/160 ，sp = px / (ppi / 160)
以iPhone7為(wèi)例，尺寸是750×1334，密度326ppi 来换算，那么Android的1dp = 1 * 326/160 ≈ 2px
「思源黑體(tǐ)」和「Roboto」字體(tǐ)可(kě)在GoogleFonts免费下载，并且可(kě)以商(shāng)用(yòng)。
3. 话题扩展
值得一提的是，越来越多(duō)的手机厂商(shāng)，為(wèi)了能(néng)够强化自身的品牌形象，推出了定制款的字體(tǐ)。
比如小(xiǎo)米的「小(xiǎo)米兰亭」：
OPPO的「OPPO Sans」：
三星的「SamsungOne」：
字體(tǐ)基础知识小(xiǎo)结
正如开头所说，文(wén)字是界面中(zhōng)最核心的元素，字體(tǐ)作(zuò)為(wèi)基本语言，是设计中(zhōng)體(tǐ)现品牌很(hěn)重要一点，字體(tǐ)选择非常重要，字體(tǐ)也是设计中(zhōng)占比（约 80%）最大的内容，所以我们一定要熟练掌握，接下来将从文(wén)字行高、字间距、行间距等说起，围绕字體(tǐ)排版继续聊。
人们是如何阅读的
设计中(zhōng)，好的排版能(néng)让用(yòng)户愉快地阅读，而不好的排版则会给用(yòng)户带来糟糕的阅读體(tǐ)验。因此排版的潜在重要性不容忽视。
无论是在西方國(guó)家还是亚洲國(guó)家，大部分(fēn)人们的阅读习惯都是从左到右。这种阅读模式已经延续了几百年，因此如无特殊需求，你应该使你的文(wén)本左对齐，这样符合人们一贯的阅读习惯（阿拉伯地區(qū)除外）。人缺乏耐性，在阅读过程中(zhōng)更似是一种遠(yuǎn)近不定的跳跃「扫视」。枯燥的文(wén)字如果没有(yǒu)经过任何排版处理(lǐ)，会让读者瞬间失去阅读的兴趣，除非非读不可(kě)。所以通过改进文(wén)字内容的结构和排版来提高阅读性乃至「诱读性」，是一件十分(fēn)必要的事情。
文(wén)字排版中(zhōng)的常见元素
1. 字间距与字偶间距
字间距，英文(wén)名(míng)為(wèi)「spacing」，即字符间的距离，事实上他(tā)是字符图形外边界框的尺寸和字符在方框中(zhōng)的位置的距离。
字偶间距，英文(wén)名(míng)為(wèi)「Kerning」，也叫做「字距调整」，是在字间距的基础上，為(wèi)实现不同字偶（一对字符）可(kě)以有(yǒu)不同字间距的调整值。我们都知道，不同的字母外形不同，所以只有(yǒu)同样的字间距是不协调的。例如，「NA」间是标准的字间距，而「WA」由于W和A的形状可(kě)以重叠，所以需要负字偶间距才能(néng)达到协调一致的外观。
在大段落文(wén)字排版时，我们一般不需要更改字间距和字偶间距，因為(wèi)字體(tǐ)设计师已经对他(tā)们做过了最优处理(lǐ)。在对一组字符单独设计时，就需要考虑字偶间距，以达到更协调的视觉效果。总的来说，字号越小(xiǎo)，字距应当相对越大，行高也应该相对越大。反之亦然。
西文(wén)字间距还分(fēn)為(wèi)：比例字體(tǐ)和等宽字體(tǐ)
比例字體(tǐ)：根据字符外形特点设置不同字宽的字體(tǐ)，使得字體(tǐ)外形协调，可(kě)读性更好；
等宽字體(tǐ)：每个字符设置相同字宽的字體(tǐ)，字符间距较大，它们经常被用(yòng)于显示计算机代码示例；
2. 字间距的三种形式
标准间距：即默认的字间距，字与字之间的距离不大也不小(xiǎo)，在设计中(zhōng)要根据不同的字号设置不同的字间距来排版，往往需要我们根据字号、字重的不同动态调节间距参数，避免千篇一律使用(yòng)软件默认间距。
紧凑间距：字与字之间的距离向里缩进，在字符工(gōng)具(jù)里的「字间距」数值為(wèi)负数，一般在-5%~-30%不等，通常用(yòng)在标题中(zhōng)。
宽松间距：与紧凑型间距相反，字与字之间间距向外扩大，在字符工(gōng)具(jù)里的「字间距」数值為(wèi)正数，一般在5%~30%不等，通常用(yòng)在正文(wén)中(zhōng)。
知识点：
提示：字间距虽然有(yǒu)以上三种形式，但是在实际工(gōng)作(zuò)中(zhōng)也要具(jù)體(tǐ)问题具(jù)體(tǐ)分(fēn)析，例如有(yǒu)些中(zhōng)文(wén)字體(tǐ)本身「外边框」的距离就比较大，如果再加大字间距，就会显得过于分(fēn)散。
3. 西文(wén)词距
在西文(wén)阅读时，视觉上的自然界限是「词距」而不是「字距」。如果排版时需要进行例如「两端对齐」的行内间距调整，中(zhōng)文(wén)直接可(kě)以动「字距」，把调整量均匀地放到每个字间里；而西文(wén)却是动「词距」，只能(néng)把调整量加到词距里，而单词内部的字距依然是保持字體(tǐ)设计师预设的原始字距，这是保证西文(wén)易读性的关键所在。
4. 标点避头尾
在古代，书籍排版可(kě)以做到字间距恒定，原因是古代不存在「标点」，也就没有(yǒu)「标点避头尾」导致的种种问题。而现代汉语存在标点符号，有(yǒu)的标点不能(néng)放在行首(如逗号、顿号、句号等)，有(yǒu)的不能(néng)放在行尾(引号、前括号等)。处理(lǐ)方式叫做「优先推出式」标点避头尾，通过将本行内的标点宽度进行挤压后，腾出了空间给本来排不到的逗号，确保了字间距的恒定（篇幅限制，本文(wén)暂不谈文(wén)字编排具(jù)體(tǐ)调整方法）。更详细的介绍可(kě)移步字體(tǐ)设计与排印网站 Type is Beautiful 了解。
5. 文(wén)本框
在设计软件中(zhōng)，我们在添加文(wén)本时，就会创建一个文(wén)本區(qū)域，例如Sketch中(zhōng)文(wén)本區(qū)域有(yǒu)三种类型，自动宽度、自动高度、固定尺寸，而「固定尺寸」可(kě)配合「设置文(wén)字层垂直对齐方式」使用(yòng)。
6. 对齐方式
文(wén)本的对齐方向有(yǒu)左、中(zhōng)、右三种对齐方式。文(wén)本对齐的标准是基于文(wén)本區(qū)域的边界决定的，只有(yǒu)设置固定的文(wén)本區(qū)域对齐才有(yǒu)意义。
7. 行高
行高或行距是文(wén)字排版的基础参数，也是排版品质(zhì)的先决要素之一。行高是一行文(wén)本垂直方向的高度，这个高度和字高无关，文(wén)字内容水平居中(zhōng)，如下图所示：
8. 英文(wén)行高
英文(wén)的行高指的是一行英文(wén)的基線(xiàn)与下一行英文(wén)的基線(xiàn)之间的距离，基線(xiàn)（baseline）是英文(wén)字體(tǐ)结构中(zhōng)的概念，在css里文(wén)字的元素都是按基線(xiàn)来对齐的。西文(wén)基本行高是字号的1.2倍左右，字體(tǐ)有(yǒu)上伸部（ascender）和下延部（descender）可(kě)来创造行间空隙。
9. 中(zhōng)文(wén)行高
中(zhōng)文(wén)的结构属于方块字没有(yǒu)基線(xiàn)，所以中(zhōng)文(wén)的行高指的是一行中(zhōng)文(wén)的最底部与下一行中(zhōng)文(wén)最底部之间的距离。中(zhōng)文(wén)因為(wèi)字符密实且高度一致，所以一般行高需要更大，根据不同用(yòng)户人群（儿童、年轻人、老年人）以及使用(yòng)环境，可(kě)达到1.5~2倍甚至更大。
知识点：
提示：不管是标题、正文(wén)还是注释文(wén)字，行高都不易过大或过小(xiǎo)，会导致阅读困难。总的来说，字号越大行高应该越小(xiǎo)，字号越小(xiǎo)行高应该越大。
10. 行長(cháng)
在《中(zhōng)文(wén)排版需求》里，明确写明了这项基本要求：
2.3.5 版心设计的注意事项：「 一行的行長(cháng)应為(wèi)文(wén)字尺寸的整数倍，各行的位置尽可(kě)能(néng)头尾对齐。」
「一行的行長(cháng)应為(wèi)文(wén)字尺寸的整数倍」，这一基本的、理(lǐ)所应当的需求看似简单，但是在实际操作(zuò)中(zhōng)，却往往由于单位换算等各个原因没有(yǒu)得到实现。对于后半句提到的「头尾对齐」，将另文(wén)讨论，但显然也和本文(wén)相关。正因為(wèi)设计师想实现「头尾对齐」才会盲目地用(yòng)软件的「两端对齐」功能(néng)，大家可(kě)以看看身边的印刷品，注意看一下每段的最后一行间距是不是统一，就可(kě)以知道设计师有(yǒu)没有(yǒu)按照这个原则排版。
中(zhōng)文(wén)的一个字占两个字符，英文(wén)一个字占一个字符。正文(wén)的行長(cháng)通常在40到60个字符之间。在行長(cháng)较宽的區(qū)域（例如桌面）中(zhōng)，包含最多(duō)120个字符的较長(cháng)行将需要将行高增大。行長(cháng)过長(cháng)易读性就会变差，读者阅读时容易串行，造成阅读困难。合理(lǐ)的行長(cháng)使用(yòng)户在行间跳转时感到轻快和愉悦，反之则会使阅读成為(wèi)一种负担。
11. 行间距
行距是指临近两行之间的距离。合适的行距让用(yòng)户阅读舒服，阅读效率也高，行距太紧凑会让内容挤成一团，实现无法正常阅读；行距太宽松会让内容松散，产(chǎn)生了我们通常意义上的「河流」，阻断了行的视線(xiàn)，Photoshop中(zhōng)默认行距是1.2倍的字号，例如字号是30px，那么将行距设為(wèi)36px和默认「自动」的效果一致。1.2倍的行距对中(zhōng)文(wén)排版来说通常过小(xiǎo)，合适的行间距通常為(wèi)1.5～2倍之间。文(wén)本字體(tǐ)越小(xiǎo)，两行之间的行间距应该越大，确保字与行呼吸的空间。
12. 英文(wén)行间距
英文(wén)的行间距指的是一行英文(wén)的底部線(xiàn)与下一行英文(wén)的顶部線(xiàn)之间的距离。可(kě)以简单的理(lǐ)解為(wèi)「行与行之间的距离」。另外英文(wén)文(wén)字底部和顶部都有(yǒu)对应的专有(yǒu)名(míng)词，英文(wén)顶部的那条叫「升部線(xiàn)」，底部那条叫「降部線(xiàn)」。
13. 中(zhōng)文(wén)行间距
中(zhōng)文(wén)的行间距就比较好理(lǐ)解了，是指一行文(wén)字的最底部与下一行文(wén)字的最顶部之间的距离。即行与行之间的距离。
14. 段间距
段间距：段落与段落之间的距离，可(kě)保持页(yè)面节奏，与字體(tǐ)、行高相互关联。
為(wèi)保证文(wén)章易读性，正文(wén)段间距，可(kě)以简单地取一个空行（也就是一个行高），这是比较常规也比较合适的做法。举个例子：字号12，行高设定20，段间距 = 行高 + 行间距。行间距越大，段间距就越大；行间距越小(xiǎo)，段间距就越小(xiǎo)，行距与段间距成正比。段落之间首尾的行之间间距应该大于段内的间距，这时候就应该增加段间距，使得文(wén)本的阅读體(tǐ)验得到进一步的提升。
排版的CRAP原则
在任何一个设计中(zhōng)都需要把各个元素进行分(fēn)级，分(fēn)清主次，这样才能(néng)更好地抓住重点。為(wèi)了能(néng)分(fēn)清各元素的主次，就需要用(yòng)到CRAP原则。这四个原则分(fēn)别是对比、重复、对齐、亲密性。
1. 对比 Contrast （增强效果、组织信息）
对比的基本作(zuò)用(yòng)是突出重点，增加可(kě)读性。附加作(zuò)用(yòng)是有(yǒu)效增强视觉效果，打破平淡，吸引读者注意。
一些界面排版混乱，可(kě)读性非常差，用(yòng)户的视線(xiàn)不知道集中(zhōng)在哪，导致这种情况的发生都是因為(wèi)界面内容对比不明显造成。在同一个视觉區(qū)域内的逻辑不同的元素应该有(yǒu)所區(qū)别，以避免视觉上的相似，这样就可(kě)以有(yǒu)效的分(fēn)清主次，為(wèi)了使主要元素更突出，次要元素更弱化，可(kě)以尽量使它们的颜色，字體(tǐ)、大小(xiǎo)，留白不同。如果两个元素不尽相同，那就让他(tā)们截然不同。比如，使用(yòng)「14 号字」和「15 号字」进行对比，差异就很(hěn)不明显，而使用(yòng)「14号字」和「24 号字」，差异就明显得多(duō)，一眼就能(néng)看到大号的字體(tǐ)。
在这点上，「微信读书」的列表页(yè)就做得非常好，它通过标题与描述的字體(tǐ)粗细、大小(xiǎo)、颜色进行对比，把最有(yǒu)用(yòng)的信息直观地呈现在用(yòng)户面前标题是吸引用(yòng)户关注的关键，作(zuò)者和评分(fēn)只是给用(yòng)户一种参考，不起决定性作(zuò)用(yòng)。因此，如果没有(yǒu)对比原则，标题和描述的字體(tǐ)同样粗细、大小(xiǎo)，你就会发现视線(xiàn)总是会情不自禁的被评分(fēn)所干扰。
大小(xiǎo)对比
為(wèi)了區(qū)分(fēn)文(wén)字、图片、图标等元素的重要性，通常采用(yòng)尺寸的大小(xiǎo)来做对比。例如文(wén)章的正副标题，副标题一般用(yòng)来解释主标题的内容，因此副标题的文(wén)字应该通过大小(xiǎo)和颜色调整变成次级，让用(yòng)户阅读时分(fēn)清主次。
颜色对比
在排版中(zhōng)，首先要产(chǎn)生对比效果的就是背景和文(wén)字。文(wén)字与背景如果在颜色上很(hěn)接近，那么就不容易區(qū)分(fēn)开来吸引用(yòng)户注意力，一般来说，人们习惯白纸黑字（也是因為(wèi)人类有(yǒu)书写需求以来形成的），即白色背景和黑色文(wén)字。也有(yǒu)黑纸白字，例如现在APP都在做的DarkMode暗色模式，但其实暗色背景搭配浅色文(wén)字并不适合大量阅读。当然这也是為(wèi)了配合用(yòng)户使用(yòng)场景，在夜晚光線(xiàn)较暗的环境下，深色模式或许更利于阅读。「冷知识：暗色模式其实就是厂商(shāng)為(wèi)了解决電(diàn)池耗電(diàn)量而出的计策，只是换了个噱头而已」总之，不管设计中(zhōng)使用(yòng)黑白、红绿、蓝黄哪一种配色，一定要注意文(wén)字和背景的对比是否清晰便于阅读。
2. 重复 Repeated （统一有(yǒu)秩序）
重复是保持整齐的重要准则。既包括字體(tǐ)、字号的重复，也包括颜色、风格的重复。对于新(xīn)人来说，要时刻牢记，尽量统一字體(tǐ)、字号、颜色等一系列元素，在统一的基础上，找出需要强调的部分(fēn)，进行更改，通过对比原则进行强化。
如果相同内容（如标题）属于同一种逻辑关系，则应该使他(tā)们的字體(tǐ)、颜色、留白尽量保持一致。这样可(kě)以增加内容的条理(lǐ)性，并加强设计的统一性。在重复原则下，用(yòng)户会因為(wèi)视觉惯性继续选招设计線(xiàn)索，根据重复性设计線(xiàn)索顺场地浏览下去。
知识点：
重复不是单一的机械式的元素重复，我们可(kě)以理(lǐ)解為(wèi)用(yòng)统一的重复元素塑造一个新(xīn)的元素。当然这是在保留基本的元素时所塑造出来的高度统一性的画面，从而增强我们所想要的设计效果。
3. 对齐 Alignment （统一而有(yǒu)条理(lǐ)）
在页(yè)面设计上每一元素都应该与页(yè)面上的另一个元素存在某种视觉联系，这样才能(néng)建立清晰的结构。任何元素内容在在版面上都应该尽量上下左右对齐，对于设计新(xīn)人来说，最好严格遵循一种对齐方式，不然就会导致混乱，实在不行，至少保证在同一内容版块中(zhōng)遵循一种对齐方式。方法也很(hěn)简单，就是找到一条明确的对齐線(xiàn)，并用(yòng)它来对齐。
对齐包括左对齐、居中(zhōng)对齐、右对齐 3 种方式。
左对齐：页(yè)面中(zhōng)的元素以左基線(xiàn)对齐。左对齐是最常见的对齐方式，简洁大方，利于阅读；
居中(zhōng)对齐：页(yè)面中(zhōng)的元素以中(zhōng)基線(xiàn)对齐。居中(zhōng)对齐给人一种严肃与正式感，不过也会有(yǒu)呆板的感觉；
右对齐：页(yè)面中(zhōng)的元素以右基線(xiàn)对齐。相对少见的对齐方式，给人一种人為(wèi)干预的感觉，加强了形式感，降低了阅读效率；
4. 亲密性 Proximity （实现组织性）
亲密性是实现视觉逻辑化的第一步，它是指关系越近的内容，在视觉上应该靠得越近，反之，关系越疏遠(yuǎn)的内容，在视觉上应该越遠(yuǎn)。简单的来讲就是要把画面中(zhōng)的元素分(fēn)类，把每一个分(fēn)类做成一个视觉单位，而不是众多(duō)的孤立的元素。这有(yǒu)助于组织信息，减少混乱，為(wèi)读者提供清晰的结构。
那做好亲密性有(yǒu)哪些方法呢(ne)，私以為(wèi)有(yǒu)以下几点：
留白：留白是设计中(zhōng)通用(yòng)的万金油原则，通过留白建立距离关系进行内容區(qū)分(fēn)；
左图歌曲封面和歌曲名(míng)信息间隔比每首歌曲上下间距还大，导致用(yòng)户的视線(xiàn)流呈垂直方向。
分(fēn)割：简单来说就是分(fēn)组，建立组合关系。常见的形式有(yǒu)線(xiàn)条分(fēn)割，卡片分(fēn)割等；
色相：通过颜色的对比，不同颜色的信息会暗示这是同一类。常见的日历行程就是通过不同颜色来區(qū)分(fēn)时间和具(jù)體(tǐ)事项。
方向：不同的排版方式也可(kě)以很(hěn)好的區(qū)分(fēn)信息；
什么是信噪比及在设计中(zhōng)的作(zuò)用(yòng)
「信噪比」（Signal-to-Noise Ratio）原本是用(yòng)在声音和图像领域的概念。在互联网产(chǎn)品中(zhōng)把 「信噪比」概念借用(yòng)到了用(yòng)户體(tǐ)验。合理(lǐ)的信噪比可(kě)改善与用(yòng)户的交流。加大信号可(kě)以将有(yǒu)用(yòng)的信息快速准确的传达给用(yòng)户，减少噪音并使信号脱颖而出。
从人机交互角度，我们应该删除与任務(wù)不相关的内容或设计元素。你甚至可(kě)以将高信噪比的目标与极简主义联系起来。但是「信号」和「噪音」的确切含义会有(yǒu)所不同，一个人的信号可(kě)能(néng)是对另一个人的干扰，因此，用(yòng)户界面的信噪比有(yǒu)低有(yǒu)高，取决于具(jù)體(tǐ)的用(yòng)户和具(jù)體(tǐ)的任務(wù)。在用(yòng)户界面中(zhōng)，信噪比所涉及的「信息」可(kě)以是任何内容，包括文(wén)本内容，视觉元素或动画等。為(wèi)了提高设计传达信息的效率并帮助用(yòng)户完成任務(wù)，需要提高信噪比。
知识点：
用(yòng)户始终喜欢清晰、简单、自然、好用(yòng)的设计和产(chǎn)品。但需要注意的是，除了交流必要信息之外，我们还希望界面在视觉上具(jù)备吸引力，以唤起用(yòng)户的某些情感。有(yǒu)了额外的目标（比如品牌宣传、业務(wù)目标等），应该以合理(lǐ)的信噪比為(wèi)目标，而不是以绝对的方式排除所有(yǒu)「无关」的信息。
例如iOS6到iOS7图标拟物(wù)到扁平到改变，让用(yòng)户可(kě)以更快速准确的获取到有(yǒu)效信息。而这一过程，就是典型的放大「信号」。
还有(yǒu)虾米音乐的驾驶模式
我都知道，在开車(chē)的时候操作(zuò)手机是非常危险的。在40km/h的速度下，看手机3秒(miǎo)，相当于盲驶了35米。但有(yǒu)些情况下又(yòu)不得不操作(zuò)手机，比如紧急来電(diàn)或者导航出错……这时，驾驶模式的界面就显得尤為(wèi)重要了，让用(yòng)户能(néng)够快速准确的识别信息并进行操作(zuò)，可(kě)以大大提高行車(chē)的安(ān)全性。
在界面中(zhōng)无论是何种分(fēn)割方式(分(fēn)割線(xiàn)、卡片阴影、分(fēn)割色块)，过于浓重的表现都会影响有(yǒu)效信息的获取，成為(wèi)界面中(zhōng)的「噪音」，因此我们应该让它们细一点、淡一点来降低表现，或者干脆不要(留白分(fēn)割)。
图版率的高低对设计的影响
图版率就是页(yè)面中(zhōng)图片面积的所占比。在页(yè)面设计中(zhōng)，除了文(wén)字之外，通常都会加入图片或是插图等视觉直观性的内容。这种文(wén)字和图片所占的比率，对于页(yè)面的整體(tǐ)效果和其内容的易读性会产(chǎn)生巨大的影响。当然，除图片本身外，我们也可(kě)以通过填充底色，图形叠底等方式来提高界面中(zhōng)的图版率。
图版率高低的區(qū)别：同样的设计风格下，图版率高的页(yè)面会给人以热闹而活跃的感觉，反之图版率低的页(yè)面则会传达出沉稳、安(ān)静的效果。提高图版率可(kě)以活跃版面，优化版面的视觉度。但完全没有(yǒu)文(wén)字的版面也会显得空洞，反而会削弱版面的视觉度。
在没有(yǒu)图像素材的情况下想要呈现出高图版率，可(kě)以通过以下几种方式来实现：
通过填充页(yè)面底色，取得与提高图版率相似的效果，从而改变页(yè)面所呈现出来的视觉效果；
如果素材图像尺寸小(xiǎo)，可(kě)以通过色块的延伸或是图像的重复来组织页(yè)面结构，同样可(kě)以提高图版率；
利用(yòng)排版的节奏感以及跳跃率（文(wén)字和图片的跳跃率，是指版面中(zhōng)最大标题和最大的图与最小(xiǎo)正文(wén)字體(tǐ)和图片大小(xiǎo)之间的比率）让无趣的版面充满活力，富有(yǒu)节奏的设计也能(néng)间接优化页(yè)面的图版率；
增加页(yè)面中(zhōng)的图形也可(kě)以改善图版率低的问题。无论是数字、序号、图标，甚至是视觉处理(lǐ)后的标题文(wén)字，都能(néng)提高页(yè)面的视觉度，并给用(yòng)户留下活跃生动的印象；
如果页(yè)面中(zhōng)没有(yǒu)图片和插图，那么通过对文(wén)字及其颜色的处理(lǐ)，也可(kě)以起到提高图版率的作(zuò)用(yòng)；
上面的例子中(zhōng)，对于标题文(wén)字都进行了视觉加工(gōng)，起到了整體(tǐ)页(yè)面的装(zhuāng)饰效果。借助对这种文(wén)字大小(xiǎo)、颜色、形状的灵活运用(yòng)，来突出页(yè)面的重点，避免视觉上的单调感。
文(wén)字在代码中(zhōng)的实现及标注
1. 文(wén)字在代码中(zhōng)的实现
在开发落地的过程中(zhōng)，文(wén)字排版的开发实现是很(hěn)重要的一个环节，也是经常让设计师和开发小(xiǎo)哥(gē)哥(gē)头疼不已的地方。字體(tǐ)和排版在实现上经常会出现偏差，主要原因在于开发的标注方式和设计软件不一致。因此理(lǐ)解文(wén)字开发的实现方式，细节问题的解决方法至关重要。在Android中(zhōng)，文(wén)字开发工(gōng)作(zuò)是通过一个叫TextView控件来实现的，主要承担文(wén)本显示的任務(wù)，任何APP都不可(kě)避免的会用(yòng)到它。TextView常用(yòng)属性如下图：
2. 字體(tǐ)字重对应的font-weight值
在前文(wén)聊过，每种字體(tǐ)都对应有(yǒu)好几种字重（Regular、Normal、Medium、Light ），在给开发的 UI 设计稿中(zhōng)，我们给的字體(tǐ)标注通常有(yǒu) PingFangSC-Regular、PingFangSC-Medium、PingFangSC-Bold，并不会直接给开发 font-weight 的值。虽然这需要开发去熟记，但作(zuò)為(wèi)设计师了解它们的对应关系，可(kě)以更顺畅的和开发沟通。
在W3C Fonts节章的规范标准中(zhōng)有(yǒu)给具(jù)體(tǐ)数值（100至900）：
这些有(yǒu)序排列中(zhōng)的每个值，对应字體(tǐ)的字重。其大致符合下列通用(yòng)重量名(míng)称：
当然，并不是每一种字體(tǐ)都有(yǒu)这么多(duō)字重，那遇到有(yǒu)些字體(tǐ)只有(yǒu)2、3种字重，该怎么对应font-weight 值呢(ne)？W3C Fonts也给出了解决方案，例如字重和400大致符合将会归為(wèi)Regular、Book、Roman；和700大致符合将会归為(wèi)Bold。若一个重量所指定的字形不存在，则应当使用(yòng)相近重量的字形。通常，较重的重量会映射到更重的字形、较轻的重量会映射到更轻的字形。下图所示：灰色表示该重量的字形不存在、使用(yòng)的是相近重量的字形。
△ 只包含400、700和900重量字形的字體(tǐ)家族的对应字重
△ 只包含300和600重量字形的字體(tǐ)家族的对应字重
3. 文(wén)本框行高的问题
我们都知道在设计的时候，可(kě)能(néng)字體(tǐ)使用(yòng)的24pt，但其实字體(tǐ)本身占用(yòng)的距离是包含了升部及降部區(qū)域的，这样就导致其占用(yòng)空间大于24pt，而变成了33pt。每个字體(tǐ)都有(yǒu)相应设定的「字高」比例，可(kě)以通过sketch选中(zhōng)字體(tǐ)后的height值来进行查看。線(xiàn)高越大，问题就越大。下面的示例显示文(wén)本框之间的距离设置為(wèi)32px。如你所见，即使你将所有(yǒu)垂直间距都设置為(wèi)相同的值，它们在视觉上也遠(yuǎn)大于32px。
△ 虽然标注出来的参数都是一样大，但视觉上间距却是不一样的
4. Leading-Trim：数字排版的未来
去年六月，Microsoft Design赞助了一个新(xīn)的css规范，称為(wèi)「Leading-Trim」。这个css方案能(néng)很(hěn)好的解决上面这个问题。
我们常用(yòng)的UI设计工(gōng)具(jù)，例如Figma和Sketch，似乎已经采用(yòng)了「half-leading」模式并以此方式渲染文(wén)本。因此，我们在设计工(gōng)具(jù)和浏览器中(zhōng)都遇到了这个问题。
设计方面的解决方法相对容易：你可(kě)以忽略边界框，而直接根据文(wén)本的大写高度和基線(xiàn)来测量空间。这是一个手动过程，因為(wèi)大多(duō)数设计工(gōng)具(jù)没有(yǒu)上限高度和基線(xiàn)的参照目标，尽管设计师将尽一切努力使我们的设计看起来更好！但是，如果采用(yòng)这种方法，开发人员仍将仅在CSS中(zhōng)实现边界框间距。因此，它们会出现随机的间距值。
為(wèi)了缓解此随机性问题，开发人员可(kě)以在CSS中(zhōng)以负边距「裁剪」文(wén)本框。但是负边距将需要手动确定，并且是特定于字體(tǐ)的，因此是「随机的」。任何字體(tǐ)，浏览器，操作(zuò)系统或语言环境的更改都将不可(kě)避免地导致你不小(xiǎo)心设置边距。此外，该技(jì )术通常不是良好的编码实践，并且可(kě)能(néng)导致意外的副作(zuò)用(yòng)。
Leading-Trim新(xīn)规范
Leading-trim是CSS工(gōng)作(zuò)组正在引入的新(xīn)CSS属性。顾名(míng)思义，它就像文(wén)本框剪刀(dāo)一样工(gōng)作(zuò)。你只需使用(yòng)两行CSS，就可(kě)以从你选择的参考点中(zhōng)修剪掉所有(yǒu)多(duō)余的空间。
代码示例：
上面的示例首先使用(yòng)text-edge（也是新(xīn)属性）来告诉浏览器，所需的文(wén)本边缘是大写高度和字母基線(xiàn)。然后，从两侧修剪多(duō)余部分(fēn)。请注意，采用(yòng)修剪仅会影响文(wén)本框。它不会切断其中(zhōng)的文(wén)本。这两行简单的CSS创建了一个干净的文(wén)本框。这可(kě)以帮助你获得更准确的间距并创建更好的视觉层次。
使用(yòng)后再来对比一下：
△使用(yòng)新(xīn)规范对比发现，右图文(wén)字上下间距舒服多(duō)了，也更合理(lǐ)。
Leading-Trim修复对齐问题
借助Leading-Trim，可(kě)以解决在APP上看到的所有(yǒu)奇怪的对齐问题。例如，即使文(wén)字位于文(wén)本框内，你的文(wén)本也不总是在容器中(zhōng)垂直居中(zhōng)。
默认行高中(zhōng)保留的多(duō)余空间会导致文(wén)本不总是在文(wén)本框中(zhōng)居中(zhōng)。使用(yòng)Leading-Trim修剪，就可(kě)以很(hěn)省心的使文(wén)本垂直居中(zhōng)。
知识点：
原因是每种字體(tǐ)的设计也不同。它具(jù)有(yǒu)自己的默认行高，并且其中(zhōng)的文(wén)本可(kě)以具(jù)有(yǒu)不同的大小(xiǎo)和基線(xiàn)位置，并不都是水平居中(zhōng)对齐的。因此，有(yǒu)时即使字體(tǐ)大小(xiǎo)，行高和文(wén)本框位置保持不变，更改字體(tǐ)也会改变文(wén)本的对齐方式，如下例所示，文(wén)字很(hěn)明显没有(yǒu)对齐。
在第二个示例中(zhōng)，你可(kě)以看到Leading-Trim如何防止这种情况并使文(wén)本完美对齐。
一致性和工(gōng)作(zuò)流程的改进
Leading-trim修整超出了使间距和对齐更准确的范围。它在建立精(jīng)确的间距系统，為(wèi)设计准确性和一致性以及高效的设计到开发交接铺平道路方面发挥着关键作(zuò)用(yòng)。
拥有(yǒu)间距系统有(yǒu)很(hěn)多(duō)好处。设计师可(kě)以更快地确定间距，开发人员可(kě)以设置相应的间距变量以消除代码中(zhōng)的随机间距值。但是目前，即使我们设置了间距系统，由于文(wén)本框中(zhōng)的额外空间，对于文(wén)本元素来说也不是很(hěn)准确。如果我们尝试忽略设计中(zhōng)的边界框并在代码中(zhōng)「裁剪」文(wén)本框，则会遇到那些棘手的解决方法问题。
△应用(yòng)于文(wén)本元素且没有(yǒu)Leading-trim修剪的间距系统
借助领先的文(wén)字间隔系统，从设计到开发的交接过程也将更加顺畅，因為(wèi)开发人员将能(néng)够建立完全相同的系统，并且避免在布局错误上花(huā)费大量时间。最重要的是，领先的微调间距系统将帮助我们提供用(yòng)户信赖和喜欢的外观更美观的产(chǎn)品。
5. 设计中(zhōng)修改文(wén)字行高的方法
上面我们介绍了利用(yòng)Leading-trim修剪字高的先进方法，但是这个新(xīn)CSS的规范还在编写中(zhōng)，还未世界范围的推进，不过有(yǒu)「微软」团队的扶持相信國(guó)际化也不会太遠(yuǎn)了。
在这之前，我们想要尽可(kě)能(néng)的解决字符多(duō)出的间距问题，就需要在设计软件里手动修改了，手动把文(wén)字行高与客户端系统默认行高保持一致，从而给出准确的文(wén)字间距。开发在实现的时候iOS使用(yòng)系统默认行高，Android系统去掉文(wén)字上下padding。
这种方式虽会花(huā)费不少时间，但也最精(jīng)确，你可(kě)以据此设置出最美观合理(lǐ)的间距，而不用(yòng)担心上線(xiàn)稿的还原度问题，也便于我们后期的页(yè)面校对和调整。
△在Sketch中(zhōng)修改文(wén)字高度
6. 什么是弹性适配
文(wén)字弹性适配一般涉及的是宽度适配，宽度适配普遍使用(yòng)的是间距适配，即定好左右页(yè)边距，中(zhōng)间弹性拉伸。这种方式可(kě)以做到较好的适配，也是做快速常用(yòng)的适配方法。
7. 标注工(gōng)具(jù)
设计师将设计文(wén)件交付开发之前，应站在程序员的角度着想，做好前期沟通，提供他(tā)们开发所需要的资源。设计文(wén)件的标注可(kě)以使用(yòng)Sketch插件或直接上传「蓝湖(hú)」，拿(ná)Sketch插件「Sketch Measure」為(wèi)例，它是一款十分(fēn)智能(néng)的标注插件，主要功能(néng)包含两大块：标注和规范。
工(gōng)具(jù)栏汇合了Measure所有(yǒu)功能(néng)的快捷工(gōng)具(jù)，永遠(yuǎn)置于画布顶层，有(yǒu)了它就不用(yòng)再频繁通过菜单栏去使用(yòng)功能(néng)。
做好规范后，点击「导出规范」一键自动生成Html页(yè)面，浏览器打开页(yè)面点击其中(zhōng)任何元素都可(kě)以查看其属性和间距，还包括代码样式，交给开发开发工(gōng)程师后，不用(yòng)沟通都能(néng)看明白。
△Sketch Measure导出标注的网页(yè)界面
设计验收环节
产(chǎn)品功能(néng)开发完成后，对产(chǎn)品对功能(néng)，视觉和交互操作(zuò)进行测试和验收，确保产(chǎn)品的可(kě)用(yòng)性。一般在功能(néng)模块验收完成后，就可(kě)以开始具(jù)體(tǐ)的视觉设计验收，这也是由主要设计师负责的模块，主要验收颜色、字體(tǐ)、图形、间距、控件和空状态等。
因本文(wén)主讲字體(tǐ)与排版，就拿(ná)这部分(fēn)来说，需要检视的就有(yǒu)：
字體(tǐ)：是否用(yòng)的平台默认字體(tǐ)，如果是内置字體(tǐ)检查字體(tǐ)显示有(yǒu)没问题；
字号：导航栏、栏目名(míng)称、分(fēn)类页(yè)签、tab等字号大小(xiǎo)是否符合规范；
字重：标题和正文(wén)字重是否正确，粗體(tǐ)用(yòng)的是哪一种，是Medium，还是SemiBold；
字色：标题、正文(wén)、注释、提示等文(wén)字颜色；
字间距：检查中(zhōng)文(wén)间距和英文(wén)间距，段落文(wén)字标点有(yǒu)无避头尾；
行间距：段落文(wén)字行间距，有(yǒu)没有(yǒu)出现多(duō)余的行高 ；
……
在检视过程中(zhōng)如发现问题，截图标示问题所在，并出具(jù)检视报告。
深圳网站建设www.sz886.com
扫码咨询
扫码咨询
