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