视觉设计 » 西文字体排印基础知识篇

西文字体排印基础知识篇

发表于: 视觉设计. 评论
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)
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }