详解超级全面的字体基础知识教程

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:优设   作者:styletin

关键词

不得不说 Font 与 Typeface 即是在英文中也有很多混用的地方,很难分清,现在通常被翻译为“字体”的 Font 在传统印刷界是指特定尺寸、特定字重、字偶间距等信息的一种 Typeface,比如 “尺寸14pt,字重为 Bold 的 Helvetica ” 就是一个 Font,而这里的 Helvetica 就是它的 Typeface 。不过现在 Font 的指定的通常不再包括尺寸了,因为与铸模的时代不同了,数字字体尺寸可以很轻易地改变。

Typeface 的另一个称呼是 Font family(字族),这个词实际上比 Typeface 更好理解且不容易混淆,能很明显的表达出 Font 是 Font family 的子集的意思,以在 HTML & CSS 的标准中使用的是 Font family(字族)。简单来说 “Helvetica” 是一个 Typeface ,而指定具体的字重: “Helvetica Bold” ,这就是 Font 了。

还有一个概念是 Glyph ,它表示的是字的某种写法或者说字体的“骨骼”,比如字母 a 和 ɑ 就是 Glyph 不同,涙 – 泪、強 – 强也是 Glyph 的不同。

而 Font 、Typeface 和 Glyph 在中文里的翻译就乱七八糟了,按照国家标准(GB/T 16964)应该是:

详解超级全面的字体基础知识教程

然而,在实际使用上字体和字型混乱不堪,常常把 Font 称为字体,而字型和字形更是常常搞反。常用民间称法是把 Font 称为字体, 不用 Typeface 而是使用 Font family 即字体族,再把 Glyph 称为字形或字型。这种称法实际上比标准翻译更加流行。

罗马体与意大利体

Roman 指的就是衬线体,这个称呼是因为衬线的起源于罗马时期的碑刻。由于通常都把衬线体作为正文字体,所以很多场合下,Roman 就变成了正文字体的代名词。

而 Italic(意大利体)最早是指意大利使用的一种手写体,而后来 Italic (意大利体)常被用作斜体与正文的罗马体搭配,成为了斜体的代名词。另外一种斜体的称呼是 Oblique (单斜体、仿斜体)也被称为 Slanted,这通常是指直接把正文字体做倾斜处理产生的斜体,而 Italic (意大利体) 则是特别设计的与正文相差较大的斜体。

详解超级全面的字体基础知识教程

△ Roman 罗马

详解超级全面的字体基础知识教程

△ 同一字体(Adobe Garamond)的 Italic(意大利斜体)与 Oblique(单斜体)

字体结构

详解超级全面的字体基础知识教程

字间距、字偶间距与等宽字体

字间距(Spacing)顾名思义是字符间的距离,在实现上就是字符图形外边界框的尺寸和字符在方框中的位置。

详解超级全面的字体基础知识教程

△ 字间距 -《西文字体》

字偶间距(Kerning)也被称为字距调整,是在字间距的基础上,为实现不同字偶(一对字符)可以有不同字间距的调整值。不同的字母有不同的外形,所以字体只有同样的字间距是不协调的,比如“AH”间是标准的字间距,而“AV” 由于 V 和 A 的形状,其位置可以重叠,所以需要负字偶间距才能达到协调的外观。字间距和字偶间距都是一个字体的组成部分,并且字偶间距需要为很多字偶准备。

详解超级全面的字体基础知识教程

△ 一套字体中的多个字偶 -《西文字体》

另外有字距的概念就是等宽字体(Monospaced)与比例字体(Proportional)了,比例字体就是上面说的按字符外形设置有不同字距的字体,这种字体外形协调,可读性好。而等宽字体(Monospaced)是每个字字间距都相同的字体,其优点是可以很好的控制排版对齐,因此目前编程的代码编辑器通常都会使用等宽字体(Monospaced)为显示字体。

详解超级全面的字体基础知识教程

字重与宽度

字重的划分根据不同字体厂商各有不同,不同的字重称呼也可以不一样,常见的划分如下:

详解超级全面的字体基础知识教程

△ 另外还有窄字体:Condensed、宽体:Expanded、斜体:Italic、Slanted(通常指仿斜体)。

连字

连字(Typographic ligature)也被称为合字,源于手写时的连笔,如“fi”的 i 上一点常与 f 的一钩合并。传统英文印刷常会使用连字,而 1970 年代照相排版流行之后就很少使用连字了,而且由于显示屏的分辨率有限,是否连字差别不大,所以现在不是很流行使用连字。

连字的实现方式有两种,一是字体的 PostScript 连字功能,这需要排版或显示软件支持,另外是使用合字字符,如:

详解超级全面的字体基础知识教程

详解超级全面的字体基础知识教程

字面率、中宫、重心

详解超级全面的字体基础知识教程

字面率、字面、中宫、重心是常见描述中文字体外观特点的属性。

字面是相对于字体的外框而言字体实际尺寸的范围,同样字号下不同字体字面大的实际尺寸会更大。

字面率是字面与外框内尺寸的比值,一般简体中文字体有 92 % 左右的字面率,日文字体汉字通常字面率要高一些,94 %左右,相对而言,日文字体汉字更追求平均和较大的字面率。

中宫是汉字主要结构的大小,类似于英文字体的 x 高度。中宫大小可以用来评判字体的松紧程度,中宫分横向和纵向,不过通常看横向的中宫尺寸就够了。

重心是字体另一个主要的外观属性,是字体的视觉中心点,一般字体重心是位于中上部分。

英文字体

字体分类

英文字体的分类方法有许多种,不同的分类法侧重点不同,这里介绍常见的传统分类法“ Vox-ATypl 分类法” 和数字字体时代具有代表性的 typekit 网站的字体分类方法,还有按年代划分(主要参考《西文字体》)字体的方法。

typekit 分类法

Sans-Serif 无衬线:

详解超级全面的字体基础知识教程

Serif 衬线:

详解超级全面的字体基础知识教程

Sleb-Serif 粗衬线体:

详解超级全面的字体基础知识教程

Script 书法体:

详解超级全面的字体基础知识教程

Blackletter 哥特黑体:

详解超级全面的字体基础知识教程

Monospace 等宽字体:

详解超级全面的字体基础知识教程

Hand 手写体:

详解超级全面的字体基础知识教程

Vox-ATypl 分类法

Classicals 古典:

详解超级全面的字体基础知识教程

古典字体分为人文主义体 (Humanist),加拉德体(Garalde)和过渡体(Transitional),他们的特征是有着类似三角形的衬线:

详解超级全面的字体基础知识教程

△ 可以看到人文主义的字体 x 高度明显小,大写字母比小写字母高许多。

Humanist 人文主义字体:

详解超级全面的字体基础知识教程

人文主义字体是文艺复兴时期的兴起的字体,流行于当时文艺复兴的中心意大利,所以也被成为威尼斯式 (Venetian) 字体。

人文主义字体以当时作家的手写字体为参照,所以保留有很多手写的特征,比如倾斜的 e、c、o。还有较小的 x 高度。

e、c、o 的轴线倾斜

笔画粗细差别不大

x 高度较小

代表字体有:Centaur、Cloister old style

Garalde 加拉德体:

详解超级全面的字体基础知识教程

加拉德体的名字(Garalde)是来源于 2 个设计师:Claude Garamont 和 Alde Manuce。这种字体也被称为“古风体”或“旧风格”字体。

这是一种比较中庸的字体,其去掉了很多手写特征,e 的轴线完全垂直了,o 和 c 的倾斜也很小,x 高度也较高,字体的比例较均衡,所以很适合作为正文排版使用。

e 轴线完全垂直,o、c 轴线略微倾斜

笔画粗细差别不大

x 高度较大

代表字体有:Garamond、Bembo

Transitional 过渡期体:

详解超级全面的字体基础知识教程

过渡时期是指法国大革命、美国独立的 18 世纪启蒙时代(Age of the Enlightenment),这种字体也被称为新古典主义字体(Neoclassical)。

这种字体的几乎完全抛弃了手写特征,衬线几何化为十分规则的曲线。而且其笔画粗细相差极大,细处特别细,粗处特别粗,这让它并不很适合作为正文字体。它适合的是有足够尺寸来展示其流畅典雅曲线的场合,比如标题或者 LOGO。

垂直的轴线

强烈的笔画粗细对比

衬线曲线平滑

代表字体有:Baskerville、Times Roman

Moderns 现代:

详解超级全面的字体基础知识教程

△ Moderns(现代)字体的特征

Didone 迪多尼:

详解超级全面的字体基础知识教程

Didone(迪多尼)字体的最大特征就是极细的无撑拱衬线,也被称为发丝衬线(hairline-serif),与 Transitional (过渡期字体)相比有更高的笔画粗细对比,字母开口闭合处也更紧凑。这种字体不是很适合作为正文排版,它需要较大的展示空间。

极细的发丝衬线(hairline-serif)

笔画粗细对比达到极致

字母开口处紧凑

代表字体有:Didot、Bodoni

Mechanistic 机械风格体:

详解超级全面的字体基础知识教程

Mechanistic (机械风格)也被称为 slab serif (粗衬线、厚板、板状衬线)体,其最大的特征就是粗厚的无撑拱衬线。通常 Mechanistic 风格的字体笔画粗细对比低,且很粗,曲线也很生硬。

无撑拱(支架)的粗厚衬线

笔画粗且粗细对比低

曲线生硬

代表字体:Clarendon、Rockwell

Lineals 线体:

详解超级全面的字体基础知识教程

 收藏