西文字体排印基础知识篇

Sponsor

本篇会在“西文”语境下分享字体排印的相关知识，为大家做好西文字体排印提供理论依据。

西文字体排印基础知识篇

前言

去年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都提供了相应的列表功能，作为设计师应该使用对应功能来实现以上样式。

五、结语

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

巴特里克的字体排印指南（Butterick’s Practical Typography）：https://practicaltypography.com/

字谈字畅（一个介绍西文字体排印的中文播客）：https://www.xiaoyuzhoufm.com/podcast/5e280faf418a84a0461fc02d

The Type（分享字体排印的专业网站）：https://www.thetype.com/

Material Design的字体排印章节：https://m2.material.io/design/typography/understanding-typography.html#type-properties

IOS人机交互指南中的字体排印章节：https://developer.apple.com/design/human-interface-guidelines/typography

作者：Ye_susu（zcool.com.cn/u/1072459）
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。