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

前言

去年 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 所有这些都提供了相应的列表功能，设计师应使用相应的功能来实现上述风格。

五、结语

字体印刷有很大的知识范畴，作者文章中提到的部分只是沧海一粟。如果您对西方字体印刷更感兴趣，可以关注以下参考资料。

巴特里克字体印刷指南： 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