如何制作字体

从字体文件的表格结构、文本成形与 Hinting,到字形比例、字重、字母结构、间距和字母设计,系统拆解数字字体制作的完整过程。

字体理论

标签内容

本文共

5308

预计阅读

约 13 分钟

查看原文

作者:丹·霍利克(Dan Hollick)。本文依据用户提供的 Markdown 完成整理,剩余英文内容已翻译为中文。

数字字体制作过程中涉及的一切,从矢量轮廓到字体微调。

字母 Abc 的字体数据。

首先声明——我不是字体设计师。我从来没设计过字体,那工作量太大了。而这话出自一个写了十万字软件文章的人之口。

表面上看,字体只是每个字符的矢量图集合,制作字体也只是费力地绘制这些矢量图的过程。但创建实际的字形反而是最简单的部分,要让这些字符在不同的大小、大小写和字重下都能相互协调,需要考虑的因素就多得多了。

什么是字体?

字体设计师对术语非常敏感,所以我们先来了解一下相关概念。实际上,人们经常交替使用“字体”和“字型”这两个词,但“字型29”指的是一个字体家族——Garamond,包括其所有字重和样式——而“字体11”则指的是一个具体的实例:例如 12 磅的 Garamond Roman 或 Garamond Bold Italic。

从技术角度来看,字体文件是一个由表格组成的结构化数据库。该数据库中只有一个表格包含每个字形的轮廓数据¹²,而这通常就是我们理解的字体。

OpenType字体文件的结构。

其他表格包含了使字体正确渲染的所有实际内容,例如定义每个字符占用空间大小的间距度量、调整特定字母对间距的15 个字距调整表、用于在小尺寸下渲染的13 条提示指令,以及字体名称、许可证和支持的语言等元数据。

这种容器的格式在过去几十年中发生了显著变化。在数字排版的早期,Adobe于 1984 年创建了PostScript Type 1字体。这些字体使用三次贝塞尔曲线↗来描述字形轮廓,并成为专业印刷标准。但它们存在局限性——每个字体文件只能容纳 256 个字形(远远不足以支持许多语言),并且需要两个单独的文件才能正常工作。

使用三次贝塞尔曲线计算字母“R”的字形数据。

苹果公司在 20 世纪 80 年代末推出了TrueType 字体,它使用二次贝塞尔曲线⁴。二次曲线更简单(只需三个控制点而非四个),但要实现相同的形状需要更多的控制点。TrueType 的最大优势在于其内置的微调系统,该系统使字体设计师能够精确控制字形在小尺寸下如何与像素网格对齐。微软在 Windows 系统中采用了 TrueType,它迅速普及开来。

使用二次贝塞尔曲线计算字母“R”的字形数据。

20 世纪 90 年代末,微软和 Adobe 联手创建了OpenType——一种可以包含 TrueType 或 PostScript 轮廓的统一格式。OpenType 是一项巨大的进步:它每个字体最多支持 65,536 个字形(足以覆盖数十种语言的Unicode 30标准),并且引入了布局表,从而实现了连字、小型大写字母、样式替代和上下文替换等高级排版功能,所有这些功能都直接嵌入到字体文件中。

最新的发展是可变字体 31,它将整个设计空间打包到一个文件中。可变字体不再像以前那样为细体、常规体、中等体、粗体和特粗体分别提供单独的文件,而是定义了一个或多个轴——字重、宽度、倾斜度、光学尺寸——并在运行时根据主设计进行插值 14。您可以请求这些轴上的任意点,而不仅仅是预定义的点。这对 Web 来说是一项巨大的进步,因为加载五个不同字重的独立字体文件意味着五个单独的网络请求。

可变字体可以在任意字重之间进行插值。

如果我们深入研究 OpenType 字体文件的内容,就能感受到字体的复杂程度。首先是字形表,其格式根据字体的类型而有所不同,可以是 TrueType 字体(.ttf)或普通的 OpenType 字体(.otf)。

TrueType 字体使用glyf数据loca表。glyf数据是一系列点,这些点使用二次贝塞尔曲线描述字形的形状。每个点有两个参数:x,y位置和一个标志,该标志指示该点是在曲线上还是控制点。

TrueType 使用二次贝塞尔曲线格式,可以填充控制点之间缺失的锚点。

这种格式相当巧妙。如果曲线上有两个连续的点,则它们构成一条直线。如果曲线上点→曲线外点→曲线上点的序列为“曲线上→曲线外→曲线上”,则形成一个二次贝塞尔曲线段,其中曲线外点为控制点。如果曲线上有两个连续的点,光栅化器21会在它们中间插入一个虚拟的曲线上点,这样我们就可以在不显式存储每个锚点的情况下构建贝塞尔曲线段。

loca表简单地存储每个字形的字节偏移量,以便系统能够准确地知道一个字形在哪里结束,另一个字形在哪里开始。

LOCA 表存储每个字符的字节偏移量。

OpenType 字体使用 CFFCFF2 表来存储字形数据。字形数据并非存储为点,而是通过一系列绘图运算符(如 rmovetorlinetorrcurveto)来描述。这些运算符使用堆栈中的数字,让绘图点移动相应的距离,与 SVG 路径数据格式非常相似。由于数字采用相对值,因此体积更小,也更容易压缩。

OpenType 风格的字形使用的绘图指令与 SVG 路径非常相似。

这种CFF2格式是专为可变字体设计的现代版本,它会根据字重、宽度或光学尺寸为基本字符添加偏移量。当系统绘制可变字形时,它会处理基本点,然后根据当前设置从这些表格中添加偏移量。

可变字体存储相对于基本字体的偏移量,可用于在这些偏移量之间的任意点进行插值。

字形数据通过一个映射表转换为实际字符,cmap该映射表将字形数据映射到 Unicode 字符代码。当你输入字母 A 时,你的计算机将其识别为字母 A,U+0041并在字体文件中查找该字符代码对应的字形。

CMAP 表存储 Unicode 代码点与字体内部字形 ID 之间的映射关系。

head表是一个表头,包含版本、全局边界框和网格比例(单位为每em单位,UPM)等元数据。UPM定义了字体设计空间中一个em方格对应多少个字体单位,并允许渲染器针对不同尺寸正确缩放字形。通常,CFF字体的UPM值为1000,TrueType字体的UPM值为1024。

HEAD 表定义了 Em 正方形的单位制。

接下来是hhea表格,它是一个表头,存储了水平方向语言(从左到右和从右到左)的全局指标。它存储了诸如最大上升部高度2下降部高度9 、建议的前导16距离以及最大前进宽度(即文件中最宽的字形)等信息。该表格还有一个可选的垂直版本vhea

HHEA 表定义了必要的全局高度和宽度。

我们还有一个hmtx表(vmtx用于竖排字体),其中存储了所有字母的具体间距数据。这些数据定义了三个关键的空间区域,分别映射到字体中的每个字形:字宽/字高、左侧边距 (LSB) 和右侧边距 (RSB)。

每个字形都有自己的宽度和侧边距。

Advance Width 1基本上就像每个字母的边界框,对于系统在构建文本序列时准确分配空间至关重要27。LSB 是边界框中的左侧填充量,RSB 是右侧填充量,通常使用宽度和 LSB 计算得出。

还有一些其他的表,分别存储字体所需的内存信息(maxp)和与字体相关的文本信息(name),但最后一个真正重要的表是字体OS/2表。它的名称最初来源于 20 世纪 80 年代末的 OS/2 操作系统,但如今它用于存储操作系统或应用程序渲染字体所需的所有信息。

这里存储着字体粗细和宽度范围,以及字体家族样式(例如,衬线字体、无衬线字体、手写体、等宽字体)。它还包含渲染器对齐文本所需的视觉对齐信息,即x 高度32大写字母高度6

更重要的是,这张表包含了一系列字体的跨平台指标。由于不同平台渲染字体的方式不同,它们绘制的裁剪边界也可能不同。这张表包含一些平台特定的指标,以确保字体在 Windows、macOS 和网页上都能保持一致。它还包含了cmap我们之前提到的那个表。

文本成形

当你的计算机排版一些文本时,它会经历一系列步骤,我们通常称之为文本成形28

文本成形过程。

在实际渲染字形之前,计算机需要知道如何布局文本,即将文本分割成称为“文本段”的文本块。一个文本段是指字体、字号、颜色和语言都相同的文本。如果文本内容发生变化,例如句子中的单词变为斜体,则该文本段结束,并开始一个新的文本段。

文本被分割成若干段,每段文本由具有相同属性的块组成。

字符通常可以分为强字符弱字符。强字符是指明确属于特定字母表的字符,例如拉丁字母“A”或希腊字母“Δ”,它们会告诉渲染器该字符属于哪种语言。弱字符包括空格、数字和标点符号(例如“?”或“"")。它们不属于任何特定语言,因此不会导致程序运行停止。

与某种语言关联性强的字符可以引发新的连贯性变化,但关联性弱的字符则不会。

这些字符段之所以重要,是因为计算机将它们视为彼此完全隔离的。如果一个希腊字母位于第一个字符段,一个拉丁字母位于第二个字符段,计算机就无法在它们之间创建平滑的间距(字距调整),因为它拒绝跨越字符段的边界进行查找。

文本被分割成若干段落后,每段文本都要经过四个步骤的处理。第一步是字典查找,它会获取字符 A 的 Unicode 值,U+0041并使用cmap字典查找该字符对应的字形 ID。

CMAP 表保存了从 Unicode 代码点到字体内部 ID 结构的映射关系。

然后,它会获取该 ID 并检查字符GSUB表,以确定是否需要根据上下文对该字符进行任何替换。例如,如果您连续输入字母“f”和“i”,此步骤会自动将这两个单独的字符框替换为一个美观合并的“fi”连字框。

GSUB 表存储了可以用单个字形替换一系列字形的实例,称为连字。

之后,它需要根据表格应用字母对之间的特定间距规则GPOS。例如,如果它看到大写字母 T 旁边是小写字母“o”,GPOS表格会指示它将“o”向左移动,使其紧贴“T”的横杠下方。这就是针对字母对的上下文感知字距调整。

GPOS 表存储字距调整对等信息。

到目前为止,计算机实际上只是在移动一些不可见的空几何体,但最后一步是通过获取与每个 ID 关联的数据并按选定的比例绘制,从而在这些几何体中渲染字形。请记住,每个字形都有一组特定的边距23,用于将其放置在这个几何体中。

每个字形 ID 都指向用于渲染该字符的一组字形数据。

使用可变字体时,所发生的一切就是在此过程的开始阶段确定字重,在将文本切分成行之前,基本上选择该字重作为字体。

整个过程与浏览器布局 HTML 和 CSS 的方式非常相似。Unicode 文本是原始 HTML 内容,字体选择和颜色是 CSS 样式,而这四个步骤则是浏览器构建布局块并将其绘制到屏幕上的过程。

字体提示

我之前提到过TrueType的最大优势在于其内置的微调系统,现在我们已经掌握了足够的信息来解释它的实际含义。我们的字形绘制在一个约1000个单位的网格上,但当文本以较小的尺寸渲染时,整个坐标系会被压缩到几个像素之内。

分辨率降低时,我们的字形开始失去形状。

在 11 像素的宽度下,100 个单位宽的笔画仅占一个像素多一点,几乎不可能完全落在像素网格上。字母 H 的一根笔画可能栅格化为清晰的一列像素,而另一根笔画则会模糊地分布在两列灰色像素上,使字母看起来模糊不清且歪斜。

微调(Hinting)是一组存储在字体中的指令,它会在特定尺寸下扭曲字母轮廓,使其在栅格化之前贴合像素网格。其目的并非保留字母的真实形状,而是为了获得更清晰的显示效果而略微改变其形状——例如,将字母的笔画圆角化为整数像素宽度,强制字母 H 的两根笔画完全相同,并保持一行中每个字母的 x 高度一致。

字形微调技术通过调整字形信息,在低分辨率下生成更清晰的文本。

这两种字体的处理方式截然不同。TrueType 的 Hinting 实际上是一些微型程序,以字节码形式存储在 fpgmprepglyf 表中,并由光栅化器内部的小型虚拟机执行。这使得字体设计师能够控制每个像素在每个尺寸下的变化,而在低分辨率 CRT 显示器时代,这种控制至关重要——像 Verdana 和 Georgia 这样的字体就是逐像素手工调整提示的,这也是它们在当时的屏幕上如此清晰易读的重要原因之一。

Verdana字体中不同大小/分辨率的小写字母'a'。

CFF 风格的字体则采用了一种声明式方法。它不会对精确的结果进行编程,而是标记重要特征的位置——笔画的位置和宽度,以及一组称为蓝色区域的水平对齐区域(用于基线、x 高度和大写字母高度)——并将实际的网格适配决策留给光栅化器。

字体微调的重要性远不如以前了。高分辨率显示屏意味着笔画宽度可达数像素,而抗锯齿技术会平滑其余部分,因此 macOS 几乎完全忽略了字体微调,直接渲染出字体的轮廓。如今,大多数字体都由字体编辑器或 ttfautohint 等工具自动进行微调,手动微调几乎成了一门失传的技艺。

字体的语言

因为字体设计实际上是一门极其古老的技艺,它拥有自己独特的术语体系,用于描述字体的各个组成部分和属性。事实上,这些名称和概念大多源于计算机出现之前我们使用的物理媒介。

“字体”一词源于法语“fondre”,意为“熔化/铸造”。最初,字体指的是一种特定尺寸的完整字形铸造件。每个字母被称为一个“sort”,它们被存放在不同的字盒中,大写字母存放在大写字母盒中,其他字母存放在小写字母盒中,因为小写字母使用频率更高,而且存放位置更近。

许多字体术语都源于字体排印的物理起源。

排字工人过去会用细铅条来分隔字母行,这就是我们现在用来描述行间距的术语“行距”(leading)的由来。字距调整器(kern)是字母的一部分,它悬垂在金属字体之外,用来补偿行间距;而现在,我们用字距调整(kerning)来描述数字排字过程中调整字母间距的方法。

总之,字体设计中还有很多术语具有非常具体的含义。

尺寸和比例

每个字形都是在一个称为“ Em”的边界框区域内设计的,当我们之前讨论字体文件的内容时,你会记得我们为这个区域设置了单位缩放(每em的单位数),通常为1000。我们将要定义的一切都基于这个坐标系。

em 方格用于设定绘制字母的单位比例。

当字体在屏幕上以 14 像素显示时,占据这 14 像素高度的是一个 em 方块(由于诸多复杂原因,它几乎从来不是实际的 14 个屏幕像素)。当字体大小增加时,这个 em 方块会被放大,但其坐标保持不变,因为它们是相对坐标。

这个坐标系的 0,0 值并非如你所想的位于左上或左下。实际上,它是由基线3 的位置定义的,基线3是一条水平线,用于确定整个字体的对齐方式。通常,我们希望基线位于 em 网格的四分之三处(这是针对西方字母字体而言的——我对其他字母的适用情况并不了解)。

基线将 y 轴的值设为 0。

接下来,我们需要设置字体的基本高度,首先是大写字母的高度,通常使用大写字母 H 来设置,因为它顶部平坦且形状简单(出于同样的原因,E 或 I 也可以)。

根据字母 H 设置大写字母高度。

人们很容易认为这定义了字母高度的上限,但实际上这只是一个对齐点,许多字母都会特意超过这个高度20厘米。像O、C、G、Q、S这样的圆弧形字母和像A、V这样的尖角形字母,通常会略微超过大写字母的高度和基线,这样它们在视觉上与网格对齐,而不是在数学上对齐。

为了使某些字母在光学上对齐,我们故意让它们越过对齐导轨。

下一个非常重要的高度是x 高度,它决定了所有小写字母的高度,通常以字母 x 为基准,但有时也会用到 o 或 n。设置 x 高度可能是设计字体时最重要的决定之一,因为它决定了字体的视觉大小。一般来说,x 高度设置为大写字母高度的 60% 到 75%。

x 高度设置小写字母的高度范围。

x 高度与字体的易读性之间存在很强的相关性,较高的 x 高度更容易阅读,因为它们为每个字母的区分细节提供了更多的空间。

x高度更高的字体在相同字号下看起来更大。Mrs. Eaves 就是一个著名的例子,这款字体由 Zuzana Licko 为 Emigre 字体公司设计,其 x高度仅为 57%。后来,他们推出了 Mrs. Eaves XL 版本,x高度高达 72%,在相同字号下对比两者,差异令人惊叹。

伊夫斯夫人和伊夫斯夫人XL。

注意,较小的 x 高度并不一定会导致单词整体宽度变窄,因为需要更多的水平空间来保持字母的清晰度。此外,x 高度的增加也存在收益递减的现象,因为字母的上升部和下降部会变得难以区分。当然,这方面已经有一些研究,结果表明最佳 x 高度约为 0.3° 视弧,超过这个值后阅读速度会开始下降。

每分钟字数与 x 轴高度(度)的关系。原图作者:Gordon E. Legge 和 Charles A. Bigelow

弧度是一种测量物体在视野中占据多少度数的方法,它取决于物体的大小和距离——消除了像素大小和密度造成的所有差异。

视觉弧度取决于物体的大小和距离。

该研究采用了 40 厘米的距离。实际上,这意味着 x 高度超出此最佳范围的字体,要么需要更大一些,要么需要更靠近一些,才能与 x 高度在此范围内的字体具有相同的易读性。

您可以通过增大字体大小或缩短距离来增大弧度大小。

接下来,我们需要定义字母的上升部下降部的高度,它们决定了小写字母的对齐点,这些字母需要向任一方向延伸超过 x 高度。对于这两个高度,我们希望使用通常具有清晰垂直笔画的字母24来设置,这样我们就不必处理复杂笔画末端26造成的超出。上升部可以使用 h、d、b 或 l,下降部可以使用 p 或 q。

设置上升器和下降器的高度。

就像我们定义的其他高度一样,很多字母实际上会略微超出这些高度线,以在视觉上与其他字母保持平衡。例如,字母 f 和 g 由于其弧形部分,往往会超出这些高度线。

为了保持光学平衡,字母可以始终超出对准点。

我们还需定义其他一些高度。例如,数字的高度(通常与大写字母的高度相同);如果字体包含小型大写字母,则需要定义小型大写字母的高度(通常介于大写字母的高度和 x 高度之间);带重音符号/变音符号的高度(定义带重音符号的字母的高度,这些符号通常会超出大写字母的高度或延伸部分);以及上标和下标的位置(定义基线如何偏移以及字形如何缩放)。

定义小型大写字母的高度、重音符号的高度和基线,以及下标和上标的偏移量。

到目前为止,我们只定义了字体的高度比例,但如果我们制作的是比例字体(等宽字体是指每个字母宽度相同的字体),那么字母的宽度是不同的。我们之前稍微提到过,字母所占的总宽度称为字,它是通过将左侧边距、字形宽度和右侧边距相加计算得出的。边距类似于我们添加到每个字母上的边距,用于使其与其他字母保持距离并维持视觉平衡,不要将其与字距调整混淆,我们稍后会讲到字距调整。

侧边距是我们添加到单个字母上的间距。

正如我们在 Mrs. Eaves 字体中看到的那样,侧边距很大程度上受 x 高度的影响。较小的 x 高度通常需要在小写字母周围留出额外的间距,以确保其清晰易读。当然,凡事皆有例外,而紧凑型字体往往整体上具有更窄的字宽。

较小的 x 高度通常需要较大的侧边距来保持节奏。

字重与对比度

我想我们都能凭直觉理解字体粗细指的是字形的粗细,但对于常规半粗粗体字重的定义,甚至连这些术语本身都没有统一的标准。最接近标准的是网页设计,默认的(常规)字重在 CSS 中被映射到 400,粗体被映射到 700。除此之外,字体粗细的划分就比较随意了。

幸运的是,有一些方法可以衡量字体的粗细,其中一种实用的方法是字体设计师查尔斯·比格罗(Charles Bigelow)提出的x高度与垂直笔画粗细的比值。典型的常规字体的比值大约在1:5到1:6之间,这意味着x高度大约是垂直笔画粗细的5到6倍。

我们可以将重量表示为 x 高度的函数。

如果我们把这个概念放到 em 网格上,一个典型的 x 高度大约是 500 个单位(0.5em),那么常规字体的笔画宽度大约是 100 个单位。根据这个比例,Bigelow 还指出,不同的字重应该是这个比例的 1.3 到 1.5 倍,这样才能在视觉上区分得足够明显。这意味着下一个字重的笔画宽度应该约为 130 个单位,下一个字重的笔画宽度应该约为 70 个单位。

为了区分不同的重量,我们的目标是使笔画粗细增加 1.3-1.5 倍。

这样就形成了一种字重之间的线性变化,而另一位字体设计师卢卡斯·德·格鲁特(Luc(as) de Groot)则建议采用非线性插值的方式,类似于缓动曲线。不过,这些都不是硬性规定,你可以自由发挥。

Inter 字体的字重变化。

我们通常不会让所有笔画的粗细保持一致,垂直笔画粗细与水平笔画粗细的差异称为对比度 7。如果对比度差异较大,则字体对比度高;如果对比度差异较小,则字体对比度低。如果所有笔画的粗细都相同,则我们称之为单线字体 18

对比度是衡量笔画宽度差异的指标。

也就是说,即使是单线字体,笔画的粗细也会因其方向和曲率而略有不同。这是因为存在一种叫做“粗细错觉”的现象:水平线看起来比垂直线或斜线更粗,即使它们的实际粗细相同。为了在视觉上平衡笔画,通常会将水平笔画略微拉细。

为了弥补厚度错觉,需要将水平线拉细。

这个问题以及对比的概念,不仅限于笔画的直线部分,也适用于我们称之为“碗状”的圆形形状。为了使碗状部分在视觉上与字体的其他部分保持一致,我们需要确保曲线最粗的部分比垂直笔画的粗细更粗。同样,曲线最细的部分应该比水平笔画的粗细更细。

我们对碗形和曲线也采用类似的补偿方法。

对比度指的是字体笔画粗细的差异程度,而压力25指的是这种差异发生的方向或轴线。字体设计源于书法,压力来自笔尖根据压力或速度改变笔画粗细的方式。字体设计师希望每个字母看起来都像是用同一工具写出来的,因此每个字母的压力轴线应该保持一致。

压力是对比的角度。

字体设计的核心在于通过视觉调整,使不同字母的形状看起来平衡和谐。大多数字母大致呈正方形,因此,为了在视觉上保持大小一致,像 O、A 或 V 这样圆角或三角形的字母需要略微低于基线,并略微高于大写字母的高度。

为了使不同形状的字母看起来整齐平衡,我们可以让对齐线超出一些。

另一个技巧涉及像 E、B 或 S 这样的双层字形的视觉中心。如果我们把 H 的横杠画在数学中心,它看起来会太低,所以我们把所有双层字形的中点向上调整。

使横杆在双层字形上居中。

但现在像 E 和 B 这样的字形存在一个小问题,这种调整非常明显。为了解决这个问题,我们需要让下层字形的宽度比上层字形的宽度更宽。

通过加宽下半部分,在视觉上平衡偏离中心的横梁。

字母的结构

到目前为止,我们讨论了字母的笔画和笔画碗,但字母的每个部分都有其名称。让我们从你已经知道的开始,即衬线它指的是连接在笔画底部或顶部的衬线。有些衬线字体通过将水平部分向内弯曲来抵消其略微弯曲的视觉效果,这种字体被称为杯状线。

EB Garamond 字体采用弧形杯状笔画,以平衡其较大的衬线。

衬线可分为带衬线和不带衬线两种。带衬线的衬线有弧形支撑连接主笔画,而无衬线的衬线则没有。衬线还可以分为楔形(末端比起始端细)、扁平(粗细均匀)和极细(粗细均匀但非常细)。

各种衬线字体。

笔画末端的更通用术语是笔画末端。在衬线字体中,这些笔画末端可能带有装饰,例如泪滴状球状喇叭状剪刀状书法笔画末端,它们也可以用括号括起来连接到主笔画上。

各种类型的终端。

如果垂直衬线出现在字母的顶部,例如字母 G 或 S,我们称之为“喙”。有时,衬线字体会在两个笔画的连接处有小衬线,这些小衬线被称为“短线”。如果水平衬线位于垂直笔画的一侧,例如数字 1,我们称之为“旗形衬线”

旗形装饰、喙形装饰和距形装饰是衬线字体的常见装饰。

如果笔画的末端低于基线,我们称之为尾部。有时,我们可以用称为花饰的装饰性笔画来代替尾部。对于像 c 或 e 这样的开口字母,它们的末端可以有弯曲或锥形的部分,称为尾部装饰

尾部、横纹和顶饰。

字母中完全或部分封闭的部分称为“计数器8”,但如果是小写字母e,则称为“眼睛”;如果是双层小写字母g,则称为“环” 。在这种情况下,“环”与上层通过“连接”连接,连接也可以以“耳朵”结尾。

计数器、循环、链接、眼睛和耳朵。

字母 i 或 j 顶部的点称为尖点,字母 f 的弯曲顶部称为。字母 n 或 m 中垂直笔画之间的弯曲连接处称为肩部字母 ak 或 R 中的斜笔画称为,而像字母 E 那样仅在一端连接的水平笔画称为

点、钩、肩膀、手臂和腿。

像B、R或K这样的双层字母,其中间收紧的部分称为腰部字母s或8中弯曲的竖笔称为脊部;字母G开口前的短竖笔称为喉部

腰部、叶部、脊柱和喉部。

这并非全是解剖学上的指涉;水平笔画与垂直笔画相连的部分称为横线。两条斜笔画在底部附近相交时称为顶点,在顶部附近相交时称为顶点

横杆、顶点和顶角。

间距

字体设计的大部分工作并非在于设计字形本身,而在于完善字形之间的留白。字间距对字体的易读性有着举足轻重的影响。如果字母间距过小,就会形成“空白河流”,使单词难以辨认;如果间距过大,则会导致字母模糊不清。

字母间距对可读性影响极大。

间距合理的字体在字母之间以及单词之间都具有视觉韵律,这使得阅读文本更加轻松。一种常见的描述方式是:从手臂伸直的距离看,一行文字应该是均匀的灰色,但实际上它应该是有规律的条纹状排列。

我们考虑字母间的间距时,目标是使每对字母之间的视觉空间相同。一般来说,这意味着负空间较大的字母需要更小的间距来弥补这一点。字母中的负空间通常与字腔的大小相关,因此字体设计师常说“间距与字腔相匹配”。

较粗的字重留白较少,因此需要更紧密的间距。

我们这里真正可用的工具只有两种:字母间距和字距调整。你可能还记得,字母间距是每个字母固有的间距,而字距调整则是对需要额外调整的字母对(例如 AV)应用的特定间距。理想情况下,我们只希望在字母间距调整失效时才使用字距调整。

字距调整是对特定字母组合应用偏移量。

因为给每个字母都设定侧边距比较麻烦,所以沃尔特·特雷西开发了一种方法。其核心思想是,我们可以将字母大致分类,并对它们使用相同的侧边距。我们先从字母 H 和 O 开始,因为一个字母非常直,另一个字母非常圆。

首先为 OH 配对留出间距。

我们在测试各种组合(例如“HHHOOHHH”和“OOOHHOOO”)时调整它们的侧边距,直到笔画的节奏看起来规律且统一。然后我们对字母 o 和 n 也进行同样的操作,它们分别是字母中最圆润和最方正的小写字母。

首先,为不配对的情况留出空格。

一旦我们确定了这两组字母的侧边距,就可以使用一个根据字母形状而变化的公式,将它们应用到所有其他字母上。基本上,我们从最相似的字母中获取侧边距值。例如,对于字母 B,由于其两侧是平的,我们取字母 H 的左侧侧边距;由于字母 B 两侧是圆的,我们取字母 O 的右侧侧边距。显然,这种方法不适用于像字母 A 或字母 w 这样的斜体字母,但这些字母的间距都可以手动调整。

使用 H 点的左侧方位角和 O 点的右侧方位角。

测试字间距是否正确的方法是,将每个字母依次插入其他字母之间,观察视觉节奏是否存在明显的破坏。你会发现很多字母对的间距问题,例如字母“ti”中的“i”需要稍微靠近“t”的悬垂部分才能容纳。这就是字距调整的作用。

测试间距需要查看所有可能的字母组合。

GPOS字距调整实际上只是为特定字母对设置的间距偏移量,该偏移量保存在表中,并在计算文本长度时调用。我们之前已经介绍过,当渲染器计算给定字形框的宽度时,它会检查该GPOS表,查看是否需要应用任何字距调整偏移量。

现在你可以想象,要调整所有常用字母对的字距是多么繁琐。幸运的是,OpenType 支持基于类的字距调整,我们可以将字距调整应用于相似的字母组。更具体地说,我们可以按字母的左右两侧进行分组。例如,D、E 和 F 可以归为一类,因为它们都具有笔直的左边缘,因此可以与它们前面的字母共享相同的字距调整规则。

我们可以使用字距调整类来简化字距调整过程。

字母设计

经过所有这些准备工作,我们终于可以开始讨论绘制字形了。友情提示,接下来是绘制猫头鹰剩余部分的步骤。我们没有足够的时间来讲解设计每个字形的具体步骤,所以我们需要快速过一遍。

那么,字体设计师究竟是如何着手设计字体的呢?并非从A开始,一步步做到Z。就像间距一样,我们可以先从一些控制字母入手,这些字母能够揭示关于重音、对比度、比例和个性的基本选择,而这些选择可以应用到其他字母中。对于大写字母,通常会使用O和H/E。

在衬线字体中,字母 O 尤为重要。它确立了其他所有圆形字母都必须遵循的重音(倾斜或垂直)、对比度(粗细比例)和比例(宽圆或窄椭圆)。

字母 O 很大程度上决定了字体的特征。

字母 C 大致相当于一个去掉一截的 O。字母 G 加上了一根横杠。字母 Q 加上了一条尾巴。字母 D 用一根垂直的笔画封闭了右侧。如果 O 写错了,整个字体就毁了。

字母 O 是其他圆润字母的基础,但我们经常需要进行调整。

有些设计师用H来表示方形字母,但E由于其末端的形状以及比O或H更窄的特性,反而更实用,因为它能更好地确立比例关系。通常,E的三条水平臂长度会刻意不同:最下面的臂最长,最上面的臂中等,中间的臂最短。如前所述,我们还需要将中间的臂略微抬高到垂直中心线之上。

字母 E 包含许多光学平衡调整,其他字母也将继承这些调整。

我们将字母 H 和 E 的设计决策应用于其他方形字母。字母 L 和 F 的尺寸与字母 E 相似,但会进行一些细微调整以适应其额外的开口,而字母 T 的宽度则与字母 H 相似。

我们需要进行一些光学调整,以弥补视野开阔程度的差异。

大写字母按结构相似性分组。圆形字母(O、Q、C、G、S)具有相似的曲线和比例。方形字母(E、F、H、I、L、T)具有相似的笔画粗细和水平线条。斜体字母(V、A、W、X)具有相似的角度关系。此外,还有一些组合字母,例如圆角-方形字母(D、B、P、R)和斜角-方形字母(M、N、K、Z、Y)。

小写字母 a、e、g、n 和 o 是典型的起点,原因与字母 O 和 E 相同,它们迫使我们做出一些决定,这些决定也将应用于其他类似的字母。一个常用的测试词是“hamburgefontsiv”(汉堡字体),它包含了大多数常用的小写字母,并揭示了不同形状字母之间的相互作用。

同样,字母 o 的设计对于所有其他圆润的碗状字母都至关重要。a、c、e、p、d、b、q 和 g 的对比度、受力角度和碗状部分的比例都需要保持一致。

字母 o 构成所有圆角小写字母的基础,通过对连接和倒角进行调整来实现。

字母 o 的碗部最宽。由于字母 c 和 e 是开口的,它们的负空间较大,因此我们需要将它们做得更窄一些以作平衡。同样地,包含碗部和垂直笔画的字母,其笔画通常会在碗部的一个凹陷处相交,形成一个可见的凹槽,称为浮雕,而不是直接在碗部的垂直点相交。

字母 n 是 m、h 和 u 的基础。为了补偿底部开放的字腔,它需要比 o 略窄。与 p 或 d 类似,n 在连接竖笔的位置有一个凹口,但通常更大。r 与 n 相似,不过为了补偿开放的一侧,需要把凹口再降低一些。

n 是 m、h、u 和 r 的基础。

大体而言,这就是整个过程:先设计一个控制字母,再用它调整具有相关形状的其他字母;在必要处做出修正,同时始终保持整套字体的个性。我们可以根据形状对拉丁小写字母进行分组。

按形状分类的小写字母。

较难归类的是双层结构、左侧字腔开放的小写字母 a。我们很容易想直接借用 n 的肩部弧线,因为两者宽度应该相近,但由于它们的收笔方式不同,通常仍需调整。还要确定下层碗部的高度,一般约为 x 高度的 55%–65%。

小写字母 a 借鉴了字母 n 的一些肩部形状,并采用了字母 e 的双层高度。

除了形状,我们还可以按比例对字母形态分类,这有助于在整句话中保持一致的视觉灰度与节奏。

按比例对小写字母进行分类。

我知道这里还有很多内容可以继续展开,我也很想写下去;但真正想亲手设计一套字体的读者,比例恐怕四舍五入后接近于零。以上内容已经足以让你感受到字体设计有多复杂,也解释了为什么字体设计师在晚宴上总是那么有趣。

特别感谢 FontLab 的管理者之一 Adam Twardoch,他为本章提供了指导。

词汇表

  1. 前进宽度(Advance Width) — 字形占用的总水平空间,由左侧边距、字形宽度和右侧边距相加得到。

  2. 上升部(Ascender) — 小写字母中延伸到 x 高度以上的部分,例如 b、d 或 h;也指设定其高度的对齐线。

  3. 基线(Baseline) — 字母落座的水平线,它为整套字体提供对齐基准,并定义垂直轴的零点。

  4. 贝塞尔曲线(Bézier Curve) — 一种由控制点定义的参数曲线,广泛用于矢量图形和字体,通过线性插值构建平滑且可缩放的曲线。

  5. 碗部(Bowl) — 围合字母圆形部分的弯曲笔画,例如 O、b 或 p。

  6. 大写字母高度(Cap Height) — 大写字母从基线向上的高度,通常以 H 这类顶部平直的字母为基准。

  7. 对比度(Contrast) — 字体中最粗与最细笔画之间的差异,通常体现为垂直笔画与水平笔画的粗细差。

  8. 字腔(Counter) — 字母内部完全或部分封闭的负空间,例如 o、e 或 n。字腔大小会显著影响字体间距。

  9. 下降部(Descender) — 小写字母中延伸到基线以下的部分,例如 p 或 q;也指设定其深度的对齐线。

  10. Em 方框(Em Square) — 每个字形的设计边界框,其坐标系由字体的每 em 单位数(UPM)确定,通常为 1000。设置字号时,被缩放的正是 em 方框。

  11. 字体(Font) — 字型的具体实例,例如 12pt 的 Garamond Bold。数字字体文件是由字形轮廓、间距度量和渲染数据等表组成的结构化数据库。

  12. 字形(Glyph) — 字符在字体中的视觉表现,包括形状、间距,以及不同尺寸或样式下的变体。

  13. Hinting(微调) — 嵌入字体中的指令,用于控制字形轮廓如何贴合像素网格,让小字号文本保持清晰易读。

  14. 插值(Interpolation) — 在两个已知值之间计算中间值的过程。在色彩中,插值用于在颜色之间生成平滑渐变。

  15. 字距调整(Kerning) — 针对特定字母对(如 AV)应用的间距修正,用于解决仅靠侧边距无法消除的空隙或碰撞。

  16. 行距(Leading) — 文本行之间的垂直间距,名称源于排字工人用来分隔金属活字行的铅条。

  17. 连字(Ligature) — 用一个字形替换一串可能碰撞或视觉不协调的字符,例如合并后的 fi。

  18. 单线字体(Monolinear) — 各笔画在视觉上具有相同粗细、几乎没有对比度的字体。

  19. 等宽字体(Monospaced) — 每个字形具有相同前进宽度的字体;与之相对,比例字体中的字母宽度各不相同。

  20. 视觉越界(Overshoot) — 圆形或尖角字母略微越过基线、大写字母高度等对齐线的距离,使其在视觉上与平顶字母对齐。

  21. 光栅化(Rasterization) — 将矢量图形或三维几何转换为可在屏幕显示的像素网格图像的过程。

  22. 衬线(Serif) — 位于主笔画末端、类似小脚的笔画。带有这种结构的称为衬线字体,没有的称为无衬线字体。

  23. 侧边距 ——字形两侧的内置间距,类似于页边距,将其与相邻字母分隔开来。侧边距与字形宽度共同构成字形宽度。

  24. 笔画 —字母形状的主要垂直或对角笔画,例如 H 的两个垂直笔画。

  25. 重音 —字母形状对比发生的角度或轴线,继承自书法笔改变笔画粗细的方式。

  26. 终结笔画 —笔画的末端,没有以衬线结束,可能会用泪滴、球形、喇叭形或其他形状进行装饰。

  27. 文本片段 —一段具有相同字体、大小、颜色和语言的文本,在文本成形过程中作为一个独立的单元进行处理。

  28. 文本塑形 —将一串字符转换为定位字形的过程,包括将代码点映射到字形 ID、应用连字等替换以及调整间距。

  29. 字体 ——指一系列字母形状设计,其所有字重和样式都具有相同的视觉风格,例如 Garamond 或 Helvetica。它与字型不同,字型是字体的具体实例。

  30. Unicode—— 一种通用字符集,它为来自多种书写系统的字符分配一个数字代码点。诸如 UTF-8 之类的编码定义了这些代码点如何以字节形式存储。

  31. 可变字体 —一种将整个设计空间打包到单个文件中的字体,沿着粗细、宽度或光学大小等轴在主设计之间进行插值,以在运行时生成任何中间样式。

  32. X 高度 —小写字母的高度,通常由字母 x 定义。它决定了字体的视觉大小,并极大地影响易读性。

我最有动力的项目是那些让我能够深入研究复杂问题、与聪明的人合作,并交付真正能改善他人生活的成果。

评论

Bejaman

接受合同工作、全职职位,以及关于复杂设计问题的有趣交流。

1

Create a free website with Framer, the website builder loved by startups, designers and agencies.