设想师必看的字体与排版指南（下）笔墨排版与开辟利用

心坎上的疤痕认

来历：知乎



书接前文，《字体与排版》下篇来啦～


设想中，好的排版能让用户愉快地阅读，而欠好的排版则会给用户带来糟糕的阅读体验。是以排版的潜伏重要性不容轻忽。



不管是在西方国家还是亚洲国家，大部分人们的阅读习惯都是从左到右。这类阅读形式已经延续了几百年，是以如无特别需求，你应当使你的文本左对齐，这样合适人们一向的阅读习惯（阿拉伯地域除外）。人缺少耐烦，在阅读进程中更似是一种远近不定的腾跃「扫视」。死板的笔墨假如没有经过任何排版处置，会让读者瞬间落空阅读的爱好，除非非读不成。所以经过改良笔墨内容的结构和排版来进步阅读性甚至「诱读性」，是一件非常需要的工作。







4.1  字间距与字偶间距
字间距，英文名为“spacing”，即字符间的间隔，究竟上他是字符图形外鸿沟框的尺寸和字符在方框中的位置的间隔。



字偶间距，英文名为“Kerning”，也叫做“字距调剂”，是在字间距的根本上，为实现分歧字偶（一对字符）可以有分歧字间距的调剂值。我们都晓得，分歧的字母外形分歧，所以只要一样的字间距是不调和的。例如，“NA”间是标准的字间距，而“WA”由于W和A的外形可以堆叠，所以需要负字偶间距才能到达调和分歧的表面。



在大段落笔墨排版时，我们一般不需要变动字间距和字偶间距，由于字体设想师已经对他们做过了最优处置。在对一组字符零丁设想时，就需要斟酌字偶间距，以到达更调和的视觉结果。总的来说，字号越小，字距该当相对越大，行高也应当相对越大。反之亦然。

西笔墨间距还分为：比例字体和等宽字体
比例字体：按照字符外形特点设备分歧字宽的字体，使得字体外形调和，可读性更好；
等宽字体：每个字符设备不异字宽的字体，字符间距较大，它们经常被用于显现计较机代码示例；



4.2  字间距的三种形式
标准间距：即默许的字间距，字与字之间的间隔不大也不小，在设想中要按照分歧的字号设备分歧的字间距来排版，常常需要我们按照字号、字重的分歧静态调理间距参数，避免陈旧见解利用软件默许间距。



松散间距：字与字之间的间隔向里缩进，在字符工具里的“字间距”数值为负数，一般在-5%~-30%不等，凡是用在题目中。



宽松间距：与松散型间距相反，字与字之间间距向外扩大，在字符工具里的“字间距”数值为正数，一般在5%~30%不等，凡是用在正文中。



提醒：字间距虽然有以上三种形式，可是在现实工作中也要具体题目具体分析，例若有些中笔墨体自己“外边框”的间隔就比力大，假如再加大字间距，就会显得过于分离。

4.3  西文词距
在西文阅读时，视觉上的自然界限是「词距」而不是「字距」。假如排版时需要停止例如「两头对齐」的行内间距调剂，中文间接可以动「字距」，把调剂量均匀地放到每个字间里；而西文却是动「词距」，只能把调剂量加到词距里，而单词内部的字距仍然是连结字体设想师预设的原始字距，这是保证西文易读性的关键地点。




4.4  标点避头尾
在现代，书籍排版可以做到字间距恒定，缘由是现代不存在「标点」，也就没有「标点避头尾」致使的各种题目。而现代汉语存在标点标记，有的标点不能放在行首(如逗号、顿号、句号等)，有的不能放在行尾(引号、前括号等)。处置方式叫做「优先推出式」标点避头尾，经过将本行内的标点宽度停止挤压后，腾出了空间给原本排不到的逗号，确保了字间距的恒定（篇幅限制，本文暂不谈笔墨编排具体调剂方式）。更具体的先容可移步字体设想与排印网站 Type is Beautiful 领会。




4.5  文本框
在设想软件中，我们在增加文本时，就会建立一个文本地区，例如Sketch中文本地区有三品种型，自动宽度、自动高度、牢固尺寸，而「牢固尺寸」可配合「设备笔墨层垂直对齐方式」利用。

4.6  对齐方式
文本的对齐偏向有左、中、右三种对齐方式。文本对齐的标准是基于文本地区的鸿沟决议的，只要设备牢固的文本地区对齐才成心义。



4.7  行高
行高或行距是笔墨排版的根本参数，也是排版品格的先决要素之一。行高是一行文本垂直偏向的高度，这个高度和字高无关，笔墨内容水平居中，以下图所示：



4.8  英文行高
英文的行高指的是一行英文的基线与下一行英文的基线之间的间隔，基线（baseline）是英笔墨体结构中的概念，在css里笔墨的元素都是按基线来对齐的。西文根基行高是字号的1.2倍左右，字体有上伸部（ascender）和下延部（descender）可来缔造行间空地。




4.9  中文行高
中文的结构属于方块字没有基线，所以中文的行高指的是一行中文的最底部与下一行中文最底部之间的间隔。中文由于字符密实且高度分歧，所以一般行高需要更大，按照分歧用户人群（儿童、年轻人、老年人）以及利用情况，可到达1.5~2倍甚至更大。





提醒：非论是题目、正文还是正文笔墨，行高都不易过大或太小，会致使阅读困难。总的来说，字号越大行高应当越小，字号越小行高应当越大。

4.10  行长
在《中文排版需求》里，明白写了然这项根基要求：
2.3.5 版心设想的留意事项：「一行的行长应为笔墨尺寸的整数倍，各行的位置尽能够头尾对齐。」
「一行的行长应为笔墨尺寸的整数倍」，这一根基的、理所该当的需求看似简单，可是在现实操纵中，却常常由于单元换算等各个缘由没有获得实现。对于后半句提到的「头尾对齐」，将另文会商，但明显也和本文相关。正由于设想师想实现「头尾对齐」才会自觉地用软件的「两头对齐」功用，大师可以看看身旁的印刷品，留意看一下每段的最初一行间距能否是同一，便可以晓得设想师有没有依照这个原则排版。



中文的一个字占两个字符，英文一个字占一个字符。正文的行长凡是在40到60个字符之间。在行长较宽的地区（例如桌面）中，包括最多120个字符的较长行将需要将行高增大。行长太长易读性就会变差，读者阅读时轻易串行，形成阅读困难。公道的行长利用户在行间跳转时感应轻盈和愉悦，反之则会使阅读成为一种负担。



4.11  行间距
行距是指邻近两行之间的间隔。合适的行距让用户阅读舒服，阅读效力也高，行距太松散会让内容挤成一团，实现没法一般阅读；行距太宽松会让内容疏松，发生了我们凡是意义上的“河流”，阻断了行的视野，Photoshop中默许行距是1.2倍的字号，例如字号是30px，那末将行距设为36px和默许“自动”的结果分歧。1.2倍的行距对中文排版来说凡是太小，合适的行间距凡是为1.5～2倍之间。文本字体越小，两行之间的行间距应当越大，确保字与行呼吸的空间。

4.12  英文行间距
英文的行间距指的是一行英文的底部线与下一行英文的顶部线之间的间隔。可以简单的了解为“行与行之间的间隔”。别的英文笔墨底部和顶部都有对应的专著名词，英文顶部的那条叫“升部线”，底部那条叫“降部线”。



4.13中文行间距
中文的行间距就比力好了解了，是指一行笔墨的最底部与下一行笔墨的最顶部之间的间隔。即行与行之间的间隔。



4.14  段间距
段间距：段落与段落之间的间隔，可连结页面节奏，与字体、行高相互关联。
为保证文章易读性，正文段间距，可以简单地取一个空行（也就是一个行高），这是比力常规也比力合适的做法。举个例子：字号12，行高设定20，段间距 = 行高 + 行间距。行间距越大，段间距就越大；行间距越小，段间距就越小，行距与段间距成反比。段落之间首尾的行之间间距应当大于段内的间距，这时辰就应当增加段间距，使得文本的阅读体验获得进一步的提升。





在任何一个设想中都需要把各个元素停止分级，分清主次，这样才能更好地捉住重点。为了能分清各元素的主次，就需要用到CRAP原则。这四个原则别离是对照、反复、对齐、密切性。



5.1  对照  Contrast  （增强结果、构造信息）
对照的根基感化是突出重点，增加可读性。附加感化是有用增强视觉结果，打破平平，吸引读者留意。
一些界面排版紊乱，可读性很是差，用户的视野不晓得集合在哪，致使这类情况的发生都是由于界面内容对照不明显形成。在同一个视觉地区内的逻辑分歧的元素应当有所区分，以避免视觉上的类似，这样便可以有用的分清主次，为了使首要元素更突出，主要元素更弱化，可以只管使它们的色彩，字体、巨细，留白分歧。假如两个元素不尽不异，那就让他们截然分歧。比如，利用「14 号字」和「15 号字」停止对照，差别就很不明显，而利用「14号字」和「24 号字」，差别就明显很多，一眼就能看到大号的字体。



在这点上，“微信心书”的列表页就做得很是好，它经过题目与描写的字体粗细、巨细、色彩停止对照，把最有用的信息直观地显现在用户眼前题目是吸援用户关注的关键，作者和评分只是给用户一种参考，不起决议性感化。是以，假如没有对照原则，题目和描写的字体一样粗细、巨细，你就会发现视野总是会不由自立的被评分所干扰。



5.1.1  巨细对照
为了区分笔墨、图片、图标等元素的重要性，凡是采用尺寸的巨细来做对照。例如文章的正副题目，副题目一般用来诠释主题目标内容，是以副题目标笔墨应当经过巨细和色彩调剂酿成次级，让用户阅读时分清主次。



5.1.2  色彩对照
在排版中，首先要发生对照结果的就是布景和笔墨。笔墨与布景假如在色彩上很接近，那末就不轻易区分隔来吸援用户留意力，一般来说，人们习惯白纸黑字（也是由于人类有誊写需求以来构成的），即红色布景和黑色笔墨。也有黑纸白字，例如现在APP都在做的DarkMode暗色形式，但实在暗色布景搭配浅色笔墨并不合适大量阅读。固然这也是为了配适用户利用处景，在夜晚光芒较暗的情况下，深色形式也许更利于阅读。「冷常识：暗色形式实在就是厂商为领会决电池耗电量而出的计谋，只是换了个噱头而已」总之，不管设想中利用黑白、红绿、蓝黄哪一种配色，一定要留意笔墨和布景的对照能否清楚便于阅读。



5.2  反复 Repeated  （同一有次序）
反复是连结整洁的重要原则。既包括字体、字号的反复，也包括色彩、气概的反复。对于新人来说，要时辰服膺，只管同一字体、字号、色彩等一系列元素，在同一的根本上，找出需要夸大的部分，停止变动，经过对照原则停止强化。
假如不异内容（如题目）属于同一种逻辑关系，则应当使他们的字体、色彩、留白只管连结分歧。这样可以增加内容的条理性，并增强设想的同一性。在反复原则下，用户会由于视觉惯性继续选招设想线索，按照反复性设想线索顺场地阅读下去。






反复不是单一的机械式的元素反复，我们可以了解为用同一的反复元素塑造一个新的元素。固然这是在保存根基的元素时所塑造出来的高度同一性的画面，从而增强我们所想要的设想结果。

5.3  对齐  Alignment   （同一而有条理）   
在页面设想上每一元素都应当与页面上的另一个元素存在某种视觉联系，这样才能建立清楚的结构。任何元素内容在在版面上都应当只管高低左右对齐，对于设想新人来说，最好严酷遵守一种对齐方式，否则就会致使紊乱，实在不可，最少保证在同一内容版块中遵守一种对齐方式。方式也很简单，就是找到一条明白的对齐线，并用它来对齐。




对齐包括左对齐、居中对齐、右对齐 3 种方式。
左对齐：页面中的元素以左基线对齐。左对齐是最多见的对齐方式，简洁风雅，利于阅读；
居中对齐：页面中的元素以中基线对齐。居中对齐给人一种严厉与正式感，不外也会有呆板的感受；
右对齐：页面中的元素以右基线对齐。相对少见的对齐方式，给人一种报酬干涉的感受，增强了形式感，下降了阅读效力；



5.4  密切性  Proximity  （实现构造性）
密切性是实现视觉逻辑化的第一步，它是指关系越近的内容，在视觉上应当靠得越近，反之，关系越冷淡的内容，在视觉上应当越远。简单的来说就是要把画面中的元素分类，把每一个分类做成一个视觉单元，而不是众多的孤立的元素。这有助于构造信息，削减紊乱，为读者供给清楚的结构。

那做好密切性有哪些方式呢，私以为有以下几点：
留白：留白是设想中通用的万金油原则，经过留白建立间隔关系停止内容区分；
左图歌曲封面和歌曲名信息间隔比每首歌曲高低间距还大，致利用户的视野流呈垂直偏向。



朋分：简单来说就是分组，建立组合关系。常见的形式有线条朋分，卡片朋分等；


色相：经过色彩的对照，分歧色彩的信息会暗示这是同一类。常见的日历路程就是经过度歧色彩来区分时候和具体事项。



偏向：分歧的排版方式也可以很好的区分信息；




“信噪比”（Signal-to-Noise Ratio）原本是用在声音和图像范畴的概念。在互联网产物中把 “信噪比”概念借用到了用户体验。公道的信噪比可改良与用户的交换。加大信号可以将有用的信息快速正确的转达给用户，削减乐音并使信号脱颖而出。
从人机交互角度，我们应当删除与使命不相关的内容或设想元素。你甚至可以将高信噪比的方针与极简主义联系起来。可是“信号”和“乐音”简直切寄义会有所分歧，一小我的信号能够是对另一小我的干扰，是以，用户界面的信噪比有低有高，取决于具体的用户和具体的使命。在用户界面中，信噪比所触及的“信息”可所以任何内容，包括文本内容，视觉元素或动画等。为了进步设想转达信息的效力并帮助用户完成使命，需要进步信噪比。




用户始终喜好清楚、简单、自然、好用的设想和产物。但需要留意的是，除了交换需要信息之外，我们还希望界面在视觉上具有吸引力，以唤升引户的某些感情。有了额外的方针（比如品牌宣传、营业方针等），应当以公道的信噪比为方针，而不是以绝对的方式解除一切“无关”的信息。
例如iOS6到iOS7图标拟物到扁平到改变，让用户可以更快速正确的获得到有用信息。而这一进程，就是典型的放大“信号”。



还有虾米音乐的驾驶形式
我们都晓得，在开车的时辰操纵手机是很是危险的。在40km/h的速度下，看手机3秒，相当于盲驶了35米。但有些情况下又不能不操纵手机，比如告急来电大概导航出错……这时，驾驶形式的界面就显得尤其重要了，让用户可以快速正确的识别信息并停止操纵，可以大猛进步行车的平安性。


在界面中不管是何种朋分方式(朋分线、卡片阴影、朋分色块)，过于浓厚的表示城市影响有用信息的获得，成为界面中的“乐音”，是以我们应当让它们细一点、淡一点来下降表示，大概爽性不要(留白朋分)。




图版率就是页面中图全面积的所占比。在页面设想中，除了笔墨之外，凡是城市加入图片或是插图等视觉直观性的内容。这类笔墨和图片所占的比率，对于页面的整体结果和其内容的易读性会发生庞大的影响。固然，除图片自己外，我们也可以经过添补底色，图形叠底等方式来进步界面中的图版率。
图版率凹凸的区分：一样的设想气概下，图版率高的页面会给人以热烈而活跃的感受，反之图版率低的页面则会转达出沉稳、恬静的结果。进步图版率可以活跃版面，优化版面的视觉度。但完全没有笔墨的版面也会显无暇洞，反而会削弱版面的视觉度。



在没有图像素材的情况下想要显现出高图版率，可以经过以下几种方式来实现：
1、经过添补页面底色，获得与进步图版率类似的结果，从而改变页面所显现出来的视觉结果；
2、假如素材图像尺寸小，可以经过色块的延长或是图像的反复来构造页面结构，一样可以进步图版率；
3、操纵排版的节奏感以及腾跃率（笔墨和图片的腾跃率，是指版面中最大题目和最大的图与最小正笔墨体和图片巨细之间的比率）让无趣的版面布满活力，富有节奏的设想也能间接优化页面的图版率；
4、增加页面中的图形也可以改美计版率低的题目。不管是数字、序号、图标，甚至是视觉处置后的题目笔墨，都能进步页面的视觉度，并给用户留下活跃活泼的印象；
5、假如页面中没有图片和插图，那末经过对笔墨及其色彩的处置，也可以起到进步图版率的感化；



上面的例子中，对于题目笔墨都停止了视觉加工，起到了整体页面的装潢结果。借助对这类笔墨巨细、色彩、外形的灵活应用，来突出页面的重点，避免视觉上的单调感。





8.1  笔墨在代码中的实现
在开辟落地的进程中，笔墨排版的开辟实现是很重要的一个环节，也是经常让设想师和开辟小哥哥头疼不已的地方。字体和排版在实现上经常会出现误差，首要缘由在于开辟的标注方式和设想软件纷歧致。是以了解笔墨开辟的实现方式，细节题目标处理方式相当重要。在Android中，笔墨开辟工作是经过一个叫TextView控件来实现的，首要承当文本显现的使命，任何APP都不成避免的会用到它。TextView常用属性以下图：



8.2  字体字重对应的font-weight值
在前文聊过，每种字体都对应有好几种字重（Regular、Normal、Medium、Light ），在给开辟的 UI 设想稿中，我们给的字体标注凡是有 PingFangSC-Regular、PingFangSC-Medium、PingFangSC-Bold，并不会间接给开辟 font-weight 的值。虽然这需要开辟去熟记，但作为设想师领会它们的对应关系，可以更顺畅的和开辟相同。
在W3C Fonts节章的标准标准中有给具体数值（100至900）：
这些有序排列中的每个值，对应字体的字重。其大致合适以下通用重量称号：

• 100 - Thin
  
• 200 - Extra Light (Ultra Light)
  
• 300 - Light
  
• 400 - Normal
  
• 500 - Medium
  
• 600 - Semi Bold (Demi Bold)
  
• 700 - Bold
  
• 800 - Extra Bold (Ultra Bold)
  
• 900 - Black (Heavy)
  

固然，并不是每一种字体都有这么多字重，那碰到有些字体只要2、3种字重，该怎样对应font-weight 值呢？W3C Fonts也给出领会决计划，例如字重和400大致合适将会归为Regular、Book、Roman；和700大致合适将会归为Bold。若一个重量所指定的字形不存在，则该当利用附近重量的字形。凡是，较重的重量会映照到更重的字形、较轻的重量会映照到更轻的字形。下图所示：灰色暗示该重量的字形不存在、利用的是附近重量的字形。


△ 只包括400、700和900重量字形的字体家属的对应字重


△ 只包括300和600重量字形的字体家属的对应字重

8.3  文本框行高的题目
我们都晓得在设想的时辰，能够字体利用的24pt，但实在字体自己占用的间隔是包括了升部及降部地区的，这样就致使其占用空间大于24pt，而酿成了33pt。每个字体都有响应设定的「字高」比例，可以经过sketch选中字体后的height值来停止检察。线高越大，题目就越大。下面的示例显现文本框之间的间隔设备为32px。如你所见，即使你将一切垂直间距都设备为不异的值，它们在视觉上也远大于32px。



8.4  Leading-Trim：数字排版的未来
客岁六月，Microsoft Design援助了一个新的css标准，称为「Leading-Trim」。这个css计划能很好的处理上面这个题目。



我们常用的UI设想工具，例如Figma和Sketch，似乎已经采用了「half-leading」形式并以此方式衬着文本。是以，我们在设想工具和阅读器中都碰到了这个题目。
设想方面的处理方式相对轻易：你可以疏忽鸿沟框，而间接按照文本的大写高度和基线来丈量空间。这是一个手动进程，由于大大都设想工具没有上限高度和基线的参照方针，虽然设想师将尽一切尽力使我们的设想看起来更好！可是，假如采用这类方式，开辟职员仍将仅在CSS中实现鸿沟框间距。是以，它们会出现随机的间距值。
为了减缓此随机性题目，开辟职员可以在CSS中以负边距“裁剪”文本框。可是负边距将需要手动肯定，而且是特定于字体的，是以是“随机的”。任何字体，阅读器，操纵系统或说话情况的变动都将不成避免地致使你不谨慎设备边距。此外，该技术凡是不是杰出的编码理论，而且能够致使意外的副感化。

8.4.1  Leading-Trim新标准
Leading-trim是CSS工作组正在引入的新CSS属性。望文生义，它就像文本框铰剪一样工作。你只需利用两行CSS，便可以从你挑选的参考点中修剪掉一切过剩的空间。



代码示例：
​h1 { ​
​ text-edge: cap alphabetic;​
​ leading-trim: both;​
​}​上面的示例首先利用text-edge（也是新属性）来告诉阅读器，所需的文本边沿是大写高度和字母基线。然后，从两侧修剪过剩部分。请留意，采用修剪仅会影响文本框。它不会切断其中的文本。这两行简单的CSS建立了一个清洁的文本框。这可以帮助你获得更正确的间距并建立更好的视觉条理。


利用后再来对照一下：



利用新标准对照发现，右图笔墨高低间距舒服多了，也更公道。

8.4.2  Leading-Trim修复对齐题目
借助Leading-Trim，可以处理在APP上看到的一切希奇的对齐题目。例如，即使笔墨位于文本框内，你的文本也不总是在容器中垂直居中。


默许行高中保存的过剩空间会致使文本不总是在文本框中居中。利用Leading-Trim修剪，便可以很费心的使文本垂直居中。




缘由是每种字体的设想也分歧。它具有自己的默许行高，而且其中的文本可以具有分歧的巨细和基线位置，并不都是水平居中对齐的。是以，偶然即使字体巨细，行高和文本框位置连结稳定，变动字体也会改变文本的对齐方式，以下例所示，笔墨很明显没有对齐。


在第二个示例中，你可以看到Leading-Trim若何避免这类情况并使文本完善对齐。



8.4.3  分歧性和工作流程的改良
Leading-trim修整超越了使间距和对齐更正确的范围。它在建立切确的间距系统，为设想正确性和分歧性以及高效的设想到开辟交接摊平门路方面发挥着关键感化。
具有间距系统有很多益处。设想师可以更快地肯定间距，开辟职员可以设备响应的间距变量以消除代码中的随机间距值。可是今朝，即使我们设备了间距系统，由于文本框中的额外空间，对于文本元素来说也不是很正确。假如我们尝试疏忽设想中的鸿沟框并在代码中“裁剪”文本框，则会碰到那些辣手的处理方式题目。


△利用于文本元素且没有Leading-trim修剪的间距系统

借助领先的笔墨间隔系统，从设想到开辟的交接进程也将加倍顺畅，由于开辟职员将可以建立完全不异的系统，而且避免在结构毛病上花费大量时候。最重要的是，领先的微调间距系统将帮助我们供给用户相信和喜好的表面更美妙的产物。

8.5  设想中点窜笔墨行高的方式
上面我们先容了操纵Leading-trim修剪字高的先辈方式，可是这个新CSS的标准还在编写中，还未天下范围的推动，不外有「微软」团队的扶持相信国际化也不会太远了。
在这之前，我们想要尽能够的处理字符多出的间距题目，就需要在设想软件内行动点窜了，手动把笔墨行高与客户端系统默许行高连结分歧，从而给出正确的笔墨间距。开辟在实现的时辰iOS利用系统默许行高，Android系统去掉笔墨高低padding。
这类方式虽会花费很多时候，但也最切确，你可以据此设备出最美妙公道的间距，而不用担忧上线稿的复原度题目，也便于我们前期的页面校订和调剂。


△在Sketch中点窜笔墨高度

8.6  什么是弹性适配
笔墨弹性适配一般触及的是宽度适配，宽度适配普遍利用的是间距适配，即定好左右页边距，中心弹性拉伸。这类方式可以做到较好的适配，也是做快速常用的适配方式。

8.7  标注工具
设想师将设想文件托付开辟之前，应站在法式员的角度着想，做好前期相同，供给他们开辟所需要的资本。设想文件的标注可以利用Sketch插件或间接上传「蓝湖」，拿Sketch插件「Sketch Measure」为例，它是一款非常智能的标注插件，首要功用包括两大块：标注和标准。


工具栏会合了Measure一切功用的快速工具，永久置于画布顶层，有了它就不用再频仍经过菜单栏去利勤奋用。


做好标准后，点击「导出标准」一键自动天生Html页面，阅读器翻开页面点击其中任何元素都可以检察其属性和间距，还包括代码款式，交给开辟开辟工程师后，不用相同都能看大白。


△Sketch Measure导出标注的网页界面



产物功用开辟完成后，对产物对功用，视觉和交互操纵停止测试和验收，确保产物的可用性。一般在功用模块验收完成后，便可以起头具体的视觉设想验收，这也是由首要设想师负责的模块，首要验收色彩、字体、图形、间距、控件和空状态等。

因本文主讲字体与排版，就拿这部分来说，需要检视的就有：
字体：能否用的平台默许字体，假如是内置字体检查字体显现有没题目；
字号：导航栏、栏目称号、分类页签、tab等字号巨细能否合适标准；
字重：题目和正笔墨重能否正确，粗体用的是哪一种，是Medium，还是SemiBold；
字色：题目、正文、正文、提醒等笔墨色彩；
字间距：检查中文间距和英文间距，段落笔墨标点有无避头尾；
行间距：段落笔墨行间距，有没有出现过剩的行高 ；
......
在检视进程中如发现题目，截图标示题目地点，并出具检视报告。


△ 视觉检视暗示例

视觉设想的验收要追求细节上的完善，由于设想上的细节是很轻易被挑错的，同时需要耐烦和仔细，要有像素级的视角，只要这样才能完善的复原设想稿。

写在最初
原本只是想连系工作堆集，写一篇字体利用常识总结，没成想给自己挖了一坑，触及的常识点真是超级多，很多地方都可以零丁拿出来再另写一篇。别的实在在工作中，也倡议大师对自己的经历停止总结，对关键信息停止提炼加以沉淀，一方面能让自己的常识加倍安稳，另一方面也可以帮助后来者进修成长。字体与排版根本就分享到这里，希望对大师有所帮助。由于篇幅较长，几经点窜，有细节不正确的地方，接待赐正，感激阅读。

参考文献：
《W3C-CSS字体标准标准》
《从「行长为字号的整数倍」说起》
《Leading-Trim: The Future of Digital Typesetting》
《关于UI设想中字体利用的干货》
《字体与排版》
《深度分解Baseline设想道理》

——全文完——








原文地址：https://zhuanlan.zhihu.com/p/207951692
免责声明：
1、文章部分图片源于收集，均为表示图；
2、一切文章、图片、音频视频文件等材料版权归版权一切人一切；
3、因非原创文章及图片等内容没法和版权者联系，如原作者或编辑以为作品不宜上网供阅读，或不应无偿利用，请实时告诉我们，以敏捷采纳适当办法，避免给双方形成不需要的经济损失；
4、本页面内容由爬虫法式自动收集于互联网，如无意中加害了媒体或小我的常识产权，请电邮【E-Mail:cb@yoyodoc.com】告之，我们将于24小时内删除。