超全面！值得收藏的西文字体排印基础知识

前言

去年 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%，实际字母之间的间距会增大 58*10%，即 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 都提供了相应的列表功能，作为设计师应该使用对应功能来实现以上样式。

五、结语

字体排印有着巨大的知识范畴，笔者文中聊到的部分也只是沧海一粟，如对西文字体排印有更多兴趣，可关注以下参考资料。

1. 巴特里克的字体排印指南： https://practicaltypography.com/
2. 字谈字畅（一个介绍西文字体排印的中文播客）： https://www.xiaoyuzhoufm.com/podcast
3. The Type（字体排印的专业网站）： https://www.thetype.com/
4. Material Design 的字体排印章节： https://m2.material.io/design/typography
5. IOS 人机交互指南中的字体排印章节： https://developer.apple.com/design