6a7aa0886471d7f9e486408e73bdaff1
字体排印入门(上)

字体排印入门(上)

字体排印(英文:Typography),不是艺术,也不是科学,是通过对字体、字号、缩进、行间距、字符间距进行设计使得文字易认、可读和优美的一种技艺。
-- 维基百科

在西方设计领域,这项技艺常常被喻为“二维的建筑”。

中文环境中,“Typography”一词的翻译尚有争议,“字体排印”和“文字设计”都是常见的名称,其中“排印”是对“排版”与“印刷”的合称。

在当代,字体排印学的相关研究和实践范围相当广,几乎无处不在,它出现在我们阅读的书籍、访问的网站、街道标记、产品包装等等生产生活中。

初看字体排印可能令人心生畏惧,但其实只需要了解一点点字体排印的知识,就可以得到不错的效果,那么让我们开始吧。

1. 字体排印的准则

1.1 易认性与可读性

易认性可读性是字体排印的主要目标和准则,这两个词经常被混淆。易认性侧重于文字的辨识程度,而可读性偏向于阅读的舒适度。

易认性(Legibility)

易认性是单个字符识别的难易成都,是文字“可判读和识别的品质”(如:是i 、l 还是 1,是o还是0)。它和语言内容无关,却与印刷或文本显示的尺寸和文字外观联系密切。
字体的选择会对文字的易认性产生影响,在西文排版中,经典的衬线字体和无衬线字体往往具有良好的易认性,中文的基础字体——宋体、仿宋、楷体和黑体也具有良好的易认性。

可读性(Readability)

可读性通常用来形容整篇文本的阅读和理解的容易程度。可读性高的文本可以减轻读者阅读负担,并提升阅读效率。字体排印的要素,如页边距的使用、字符间距和行间距的运用,都会影响到文本的可读性。

1.2 优美得体

字体排印中的审美考量,不仅包括使字体间搭配相协调、字体大小合理,也要求设计者的排版和版式布局富有韵味、吸引读者。

2. 常见的字体类型

2.1 英文字体

在英文中,字体可以分为两大类,衬线字体(Serif)无衬线字体(Sans Serif)

衬线字体 (Serif)

衬线字体在笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同,如下图所示:
▲ serif  衬线字体

因为强调了每个字母笔画的开始和结束,所以衬线字体的易认性较高。衬线字体的外观比较古典,所以更适合传统的印刷媒体,如杂志和报纸。

无衬线字体(Sans Serif)

无衬线字体没有额外的装饰,而且笔画的粗细差不多,在法语中Sans Serif是没有 Serif 的意思。
▲ sans serif 无衬线字体

无衬线字体被认为比衬线字体更干净、现代,适合应用在电脑及手机等智能设备上。

装饰性字体(Display)

此外,西文中还有许多不同风格的字体,比如哥特体、古典手写体、花体等。
▲ Display 装饰性字体

2.2 如何选择字体

字体的选择是设计中很重要的一部分。每种字体都有不同的风格和气质,可以引导读者的情绪与思想,我们需要根据设计的主题去选择字体。想想,如果将一个钢铁直男般的字体用在女性读物中,或者将一个可爱俏皮的字体用在商务杂志中,是不是显得格格不入?

  • 有衬线字体代表着:高贵/优雅/艺术/复古,适合用于报刊书籍、高端广告等场合。

  • 无衬线字体代表着:时尚/现代/简约/低调,适合用于电脑、手机等智能设备。从易认性的角度看,过度花哨的字体在手机屏幕上也很难辨认。从iOS系统的设计风格演变来看,移动端UI也越来越倾向于简单干净的设计风格,通过简单的字体去更好的呈现信息。

  • 装饰性的字体,由于它们具有很强的装饰性,适合应用在少量需要强调文字的上,比如标题、海报、图形设计上。
    ▲装饰性字体的应用场景

千万不要在正文中大量使用风格化的字体,不然就是一场灾难!

避免使用的字体

有些字体有太多的装饰元素,很容易让画面崩溃,除非你清楚的知道自己在干吗,否则还是不要使用这些字体为好。

组合不同的字体

在有些时候,我们需要结合多种字体进行设计,但是记住,少即是多,同时使用三种以上的字体可能会让你的设计看起来混乱无序,最好把使用的字体数量限制在最低限度(两个足够了,通常一个字体就可以搞定)。
对于初学者,我推荐只使用一种字体,但是你可以利用不同的风格。同一种字体可以拥有不同的字重、斜度,如苹果的旧金山字体:
▲ 苹果的旧金山字体

如果你仍然需要使用多个字体,请确保它们的字体族(font family)之间可以互相补充、互相搭配。
以下面的字体组合为例,Georgia和Verdana(左)的组合具有相似的字重,创造了一个和谐的组合。 相比之下,Baskerville 和 Impact 的组合(右图)就不是很合适了,Impact 过于厚重,而 Baskerville 的衬线也过于突出。
▲ Georgia和Verdana(左) |  Baskerville 和 Impact (右)

3. 重要的基础知识

3.1 术语

你之前可能有听过一些术语,如行距、字距等,作为一个初学者,你不需要全部了解,我们将介绍一些经常会用到的概念,使你可以更加自信的讨论字体排印。
▲ Typography 术语

  • Type Size 也称为Cap Height,是单词形成中大写字母的总高度。

  • Ascender 是h,l,t,b,d和k等字母的上升部分。

  • Descender 是g,q和y等字母的下降部分。

  • Counter 是位于o和p之类字母内部的空白区域。

  • X Height 是字母的高度,不包括上升或下降部分。

  • Baseline 是字母最下部所依赖的边界,看一下上图中的y,p,g,p和y字母。 他们所依靠的实线是基线。

你有没有看过 “这 个 样 子” 或者 “这个样子”的文字? 如果字间距和行间距设置的不合理,文字就会变得难以阅读。

Leading 是每行文字之间的空间(从基线到下一行顶部算起),太多或太少行间距,会使读者感到不愉快,我们可以通过调整行间距,可以优化文字的可读性。如果你不知道该使用多少行间距,不要担心,通常用默认的就可以了。
▲ leading /  line spacing

Tracking是字符的间距,对应css的letter-spacing属性。如果将字间距设置的太小,字母就会挤在一起,令人窒息,难以阅读。
▲ tracking / letter-spacing

Kerning, Kerning 容易与 Tracking 搞混,Kerning 强调一个字母与两边字母的距离关系,因为英文每个字母之间的kerning不同,如若 r 和 n 之间的Kerning 没调整好,容易被错认为 m。

简而言之,Kerning 是一对字母之间的空间调整,而 Tracking 是对一段文字之间的空间进行调整,例如对一段文本的段落或整体调整。
▲ kerning

3.2 对齐的类型

你希望如何排列你的文字?它是一段正文、标题还是落款?一般而言,根据文字的类型来选择不同的对齐方式选择不同的对齐方式是最稳妥的方法。

  • 左对齐,大多数语言的默认阅读方向是从左至右(阿拉伯语相反),所以左对齐也是正文的默认对齐方式。

  • 居中对齐,居中对齐比较吸引注意力,大部分时候用于标题,如论文标题、报纸标题、报告标题等是居中对齐的绝佳范例。

  • 右对齐,右对齐是一种干净清爽的对齐方式,一般用于文档页脚、邮件落款、回信地址处。

  • 两端对齐,很多时候,使用左对齐会导致文章右侧变得参差不齐,尤其英文文章中,所以为了美观考虑,我们也可以使用两端对齐,这种类型的对齐会通过调整字符间距使得文本段落的左右边缘完美对齐。但是有些时候,自动调整的间距可能会过宽,这个时候我们可以通过手动调整Tracking来优化(不是所有软件都支持)。

4. 层次结构

4.1 建立层次结构

层次结构是强调整个文本的关键元素,引导读者的眼睛去看那些最重要的东西。换句话说,层级结构告诉读者从哪里开始以及下一步看哪里。

▲ 文字的层级结构

建立层次结构很简单:先决定你想让读者注意哪些元素,然后让它们脱颖而出。web界面通常拥有三个级别,如标题、副标题、正文,而手机屏幕的尺寸有限,很多设计师会选择保留两个层级:标题和正文。保持标题和正文两个层级,也是移动端UI设计的一个趋势,如iOS11:

▲ 名片中的层级

层级结构的建立,会让你的文字更有韵律,提升文字的可读性。对同一种字体进行风格、字号、灰度的调整,就可以表现出不同的层级结构,使页面井井有条。

5. 总结

以上就是涉及字体排印的基础内容。要时刻注意文字的易认性和可读性,若是易认性或可读性的原因毁了整个设计,是非常可惜的。要想进行完美的字体排印,利用基础规则是不错的选择,但是也要关注新的趋势。

随着你对设计及字体排印的深入了解,你会开始注意到更多,看到更多,并且能够在你自己的作品中做更多的事情。

希望你喜欢学习字体排印的基本知识。

参考资料:

  • 版式设计中,如何将中文字的排版做好? - 知乎
  • 平面设计新手在自己的设计中,选择怎样的字体相对较稳妥? - 知乎
  • What makes some fonts more readable than others ? - quora
  • What is typography ? - edu.gcfglobal.org
  • typography-essentials-a-getting-started-guide - freelancefolder.com
  • 《西文字体 字体的背景知识和使用方法》 - 小林章
  • 《拉丁字母的故事》 - thetype.com
  • 《Typography 常见的错误》 - thetype.com

感谢以上文章及图书的作者

© 著作权归作者所有
这个作品真棒,我要支持一下!
设计黑客主要以设计和技术类文章为主,帮助开发者走进设计的世界,促进设计与开发的跨界交流
0条评论
top Created with Sketch.