文章转载于:优设 作者:稣稣稣稣

序言

去年 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