文章转载于：优设 作者：稣稣稣稣
序言
去年 10 月，我向一位书本设计师朋友请问该如何调度行距，本希望他可以给我一些专业见地，然而他给我的回答是凭觉得调度。他的回答无疑是不专业的，遐想到自己学习和事情经历，不禁以为数字时期彷佛设计师对字体排印越来越陌生。作为一项设计师必备的能力，笔者深感字体排印的主要性，因此有了这篇文章。由于笔者长期从事外洋产品的设计事情，以是本篇会在“西文”语境下分享字体排印的干系知识，为大家做好西笔墨体排印供应理论依据。
一、什么是西文？西文是欧美国家笔墨的总称，以拉丁字母进行书写，如英文、法文、意大利文、德文等等。
字体排印译自英文单词“Typography”，是指通过排版使得笔墨易认、可读和幽美的技艺。通过中文翻译也可领略这项技艺包含四个层面的内容，分别为笔墨、字体、排版和印刷。
1. 笔墨（Script）
笔墨是人类用来记录和传播措辞的书写符号，只有对笔墨有了充足的理解，才能设计出更专业的作品。
首先，笔墨是不断进化的。我们现在利用的拉丁字母可以任意切换大小写，而在历史上涌现最早的拉丁字母却只有大写，直到公元 8 世纪卡洛琳（Caroline）小写体的涌现，才首次明确了字母的大小写。如果此时给你一个设计项目，须要完成一幅韶光背景在公元 7 世纪的海报，而你的作品利用了小写字母，那么在专家眼里你的作品便是不专业的。由于八世纪前是没有小写字母的，你的作品显然不符合时期特色。
其次，不同文化背景对同一笔墨的利用存在差异。德语采取拉丁字母进行书写，但是除了 26 个常规字母外，还新增了 3 个带分音符的元音字母[ä] [ö] [ü]和 1 个分外字母[ß]。[ß]和希腊字母[β]造型十分相似，在之前的案例中就常有设计师误将[ß]写成[β]，这在德语利用者看来是极其不专业的。
2. 字体（Typeface）
字体的英文翻译是“Typeface”，而在中文语境下“Font”也译作字体，如 Font Family 中文称作字体家族，那两者之间有何差异呢？“Typeface”字面意思字脸，指代具有相同特色的字形凑集，我们做设计切换不同字体，即是选择不同的 Typeface。而 Font 是指同一造型和尺寸的笔墨集。印刷时期在字体商店购买字体时，可以看到货架上摆放着一个个小盒子，里面装满了铅字，盒子表面写着字体名称、字号大小、字重类型等信息。而每盒铅字都是一套同一造型和尺寸的笔墨集，也被称为一套 Font。
在界面设计中会制订笔墨规范，针对不同场景进行字号、字重、行高档设定，每种场景的设定都是一套同一造型和尺寸的笔墨集，以是此处的笔墨规范也可称为 Font。
3. 排版（Typesetting）
印刷时期设计师在完成板面设计（Layout）后，排字工人（Typesetter）会在设定好的版面内摆放铅字，摆放铅字这一过程被称为排版（Typesetting）。但随着数字时期来临，设计事情具有了所见即所得的特性，设计师在版面设计中可以自己完成笔墨的摆放，至此排版（Typesetting）的内涵也发生了变革。从单指摆放铅字到涵盖版面设计，也是由于这一缘故原由排字工人这一职业也消逝在了历史长河中。
4. 印刷（Printing）
印刷时期，字体排印中的“印”单指印刷（Printing），但随着数字技能的发展，其内涵也得到拓展，如今的“印”也指呈现办法，如数字时期笔墨呈现在屏幕上，理解呈现办法可以倒逼我们做出更好的设计。早期印刷活动中，油墨质量参差不齐，终极呈现效果会涌现油墨外溢的情形，小字场景下会严重影响文本可读性。为理解决这一问题设计师针对不同字号进行了分外处理，如小写字母“i”圆点和竖线间的间隔，小字号比较大字号会预留更多。数字时期也面临类似情形，早期显示设备分辨率较低，小字显示会直接糊掉，为了应对这种情形设计师创造了点阵字体，虽然丢失了字体细节，但却保留了字体的易认性。
三、字体排印的根本知识
1. 易认性和可读性（Legibility & Readability）
事情中常有设计师搞混 Legibility 和 Readability，在字体排印中 Legibility 译作“易认性”，指笔墨是否随意马虎识别，属于字体设计层面的内容。如西笔墨体设计中，设计师时常关注大写字母“I”，小写字母“l”和数字“1”的造型，这三个字符字型相似，处理不好就会涌现无法区分的情形。为了提升字体的易认性设计师常日会进行分外处理，如大写字母“I”高下两端会加入横线，小写字母“l”尾端会向右侧波折。当前评价一套字体是否具有较好的易认性，以上三个字符的区分也作为一项标准。
Readability 译作“可读性”，指文本组织是否清晰可读，属于排版层面的内容，字体排印的终极目的即是提升文本的可读性。
2. 字间距和字偶剧（Tracking & Kerning）
字间距（Tracking），有时也被称为 Letter Spacing，是指字母与字母的间距。设计师在设计字体时会给到默认的字间距，但默认字间距常日不能知足设计利用，须要经由调度。调度原则以字号和字重作为参考，字号越小，字重越粗，字间距越大，详细取值须要考虑字体和版面效果。Figma 为调度字间距供应了两种打算办法，默认以百分比进行打算，取值为当前字号乘以百分比。如当前字号是 58，字间距设置为 10%，实际字母之间的间距会增大 5810%，即 5.8 个像素。你也可以直接输入 5.8px 进行调度，也便是第二种办法以像素进行打算。
字偶剧（Kerning）也指字母与字母的间距，不同之处在于它特指某对特定字母。如大写字母 A 和 V，由于造型缘故原由顶部和底部分别预留了较大空间，这两个字母组合到一起利用默认字间距，视觉上会以为空隙太大。以是设计师会针对这两个特定字母进行调度，这个间距称作字偶剧，类似的字母还有 T 和 y、L 和 T 等等。字偶剧一样平常由字体设计师设置，排版时我们可以选择是否利用，但一样平常情形下会默认利用。
3. 行距和行高（Leading & Line height）
行距和行高是很多设计师常常搞混的两个观点，事情中时常听到有设计师将行距称为行高，或将行高称为行距。在印刷时期想要调度行与行之间的间隔，排字工人会在铅字行与行之间插入铅条，铅条的英文是“Lead”，以是“Leading”后续引申为行距，是指行与行的间距。数字时期设计师利用电脑软件进行排版，此时行距的定义又发生了改变，指的是文本基线与基线之间的间距。
行高（Line height）是 CSS 中的观点，指的是文本行的高度。两者差异在于打算办法不同，行高是取行高与字号的差值除以 2，分别加到文本行的顶部和底部。行距是取行距与字号差值，加到文本行的底部。如字号 16px 的文本将行高设置为 24px，它会在文本行高下分别加 4px，如果字号 16px 的文本将行距设置成 24px，它会在文本行底部加 8px，终极的视觉效果设置行高的文本会比设置行距的文本下移 4px（如下图所示）。把稳不雅观察的话可以创造 Ps 和 Ai 中采取的是行距的打算办法，Sketch 和 Figma 采取的是行高的打算办法。
行距和行高如何设置？巴特里克的字体排印指南（Butterick's Practical Typography）给到建议，提倡利用字号的 1.2-1.45 倍。
4. 段落间距（Paragraph spacing）
行文过程中为了方便用户理解语义，会进行分段处理，而段落间距（Paragraph spacing）是对这一分段操作所进行的视觉标记。除段落间距外，还可以利用¶ （分段符）、缩进进行标记。¶ 类似一种标点符号，可以在连续的行文内部标记出段落分割点。缩进常日被认为是对¶ （分段符）的省略，只保留其霸占的空间，由此形成视觉缩进。
段落间距如何设置？打印机时期打字员会多敲下回车键，空出一行作为段落间距，以是一行的高度可以作为参考值。除此之外，Material Design 的排版指南也给出了建议，可以利用字号的 0.75-1.25 倍。
四、界面设计中常见的字体排印问题
1. 极少调度字母间距和行高
事情中看到最多的问题便是利用默认字母间距、行高进行排版，默认参数只能确保排版不会犯错，但要想追求更好的效果必须学会如何进行设置。实在 Material Design 和 IOS 人机交互指南已经见告我们答案，在字体排印这一章节供应了其系统字母间距和行高参数，我们只须要按照此参数进行设置即可。当然也有人认为规范给出的参数未必适宜自身项目，此时可参考规范参数，然后结合项目实际情形进行设置。设置完成后可在软件中定义为文本样式，在后续设计中直接调用即可。
2. 段落间距缺点的实现办法
记得有次在看同事设计稿时，他是这样实现段落间距的，每段笔墨建立一个文本框，然后文本框之间设置间距拼接出全体段落。我心中不免迷惑难道不应该是利用软件排版功能去实现吗？当然也有人认为终极的视觉效果相差无几，利用哪种办法都可以。但是作为界面设计师须要明白一点我们的设计是须要落地屏幕的，若利用拼接办法，那么前端还原设计稿时就不会设置段落间距这个参数（设计侧没有设置开拓在参数面板看不到），此时刚好利用的文本是后台返回的，前端又没有设置段落间距，那么终极的显示效果将是不忍直视的。
3. 列表样式缺点的实现办法
行文中须要展示不同文本项目时，常利用有序列表和无序列表。而在界面设计中很少设计师利用这个功能，他们大多有着自己的办法来实现列表样式。如有序列表设计师会自己输入列表序号，无序列表会自己绘制出文本前面的圆点，但这样的实现办法都会造成样式上的差错。精确的有序列表，文本换行后是和序号后的文本居左对齐的，但上述办法文本换行后是和序号对齐的。还有精确的无序列表，小圆点的前方都会空出一部分间距，但常有设计师自己绘制圆点，为了追求绝对的视觉对齐，选择拿掉本应空出的这部分间距。Figma 和 Sketch 都供应了相应的列表功能，作为设计师该当利用对应功能来实现以上样式。
五、结语
字体排印有着巨大的知识范畴，笔者文中聊到的部分也只是沧海一粟，如对西笔墨体排印有更多兴趣，可关注以下参考资料。
巴特里克的字体排印指南： https://practicaltypography.com/字谈字畅（一个先容西笔墨体排印的中文播客）： https://www.xiaoyuzhoufm.com/podcastThe Type（字体排印的专业网站）： https://www.thetype.com/Material Design 的字体排印章节： https://m2.material.io/design/typographyIOS 人机交互指南中的字体排印章节： https://developer.apple.com/design