迷你教程——字体组合指南

“排版是二维架构，以经验和想象为基础，以规则和可读性为指导。” ——赫尔曼·扎普夫

就在短短几年前，设计师在选择网络字体方面受到严格限制。 这些选项通常仅限于系统字体，并希望网站的访问者安装了这些字体。

虽然网络字体在 90 年代后期在技术上是可行的，但直到 2009 年 WOFF 格式可用并成为 W3C 开放标准的一部分时，它们才得到广泛使用。 这为设计师打开了一个全新的印刷选择世界。

这就是两难境地：现在网页设计师可以使用数千种字体，如何创建可以很好地协同工作并支持所呈现内容的字体组合？

良好的排版和使用最好的字体组合可以提升设计与同行的差距，并创造更令人愉悦的用户体验。 有效的类型组合为设计增加了视觉趣味，可以让访问者在页面上停留更长时间。

相比之下，糟糕的类型会使内容更难阅读，阅读者的愉悦感也会降低。

学习有效地组合字体是设计师教育的重要垫脚石，应该不断完善和改进。 掌握排版的设计师甚至可以使最简单的设计更有效。 遵循组合字体的基本排版指南是最好的起点。 一旦掌握了这些“规则”，设计师就可以扩展并尝试创建可以弯曲或打破这些规则的印刷组合。

类型特征

有成千上万的字体可用，试图找出从哪里开始可能会让人不知所措，即使对于高级设计师来说也是如此。 了解不同字体的特点是学习如何有效组合它们的第一步。

了解这些特征如何相互关联，让设计师可以自信地组合字体并尝试意想不到的组合。 实验和实践是设计师可以真正磨练他们的字体组合技能并创造出让他们与其他专家区分开来的设计的地方。 有时，倾听他们的直觉是创建真正闪耀的字体配对的最佳方式。

分类

字体分类是要理解的最基本的概念之一。 有四个主要分类需要学习：衬线、无衬线、脚本和装饰。

Serif 和 sans serif 字体适用于标题和正文。 然而，脚本（有时也称为手写字体）和装饰性字体通常只适用于标题和标题或其他小块文本。

衬线字体被认为对于长文本块（例如正文）更具可读性，特别是在印刷设计中，衬线功能可以帮助引导读者的视线沿着每一行。 但无衬线字体也具有高度可读性，并且在较小的尺寸（例如用于字幕或元信息的字体）中表现出色。

无衬线字体在网络上也更受欢迎，并且被广泛认为比衬线字体更具可读性。 部分原因源于早期的计算，当时较低分辨率的屏幕使衬线字体有些模糊，具体取决于大小。 使用现代高清和 Retina 屏幕，这不再是一个问题，衬线和无衬线字体都可以有效地使用。

组合来自不同分类的字体通常比在分类内组合更简单，因为已经内置的字体之间存在一定程度的对比。 也就是说，只要考虑其他特征，也可以有效地将字体组合在同一类中。

重量

粗细是指字体中字体的粗细。 细的、规则的、半粗体的、粗体的和黑色是重量的例子。

组合字体时，重量之间的对比是必不可少的。 将非常粗的字体与非常轻的字体结合起来通常会让人感觉不平衡。 但是组合相同重量的字体也可能是一个挑战。

相反，尤其是在开始使用字体组合时，最容易找到具有明显但不是极端重量差异的字体。 设计师可以从那里扩展到更突出的区别。

风格

虽然 style 有时可以与分类互换使用，但在这种情况下，它指的是一种字体，或者是normal 、 italic或oblique 。

在组合使用不同样式的字体时，确保斜体或斜体样式与普通样式一样好用是很重要的。 有时斜体样式与相同字体的正常样式有很大不同，这会使原本可以很好地协同工作的字体突然发生冲突。

对比

组合字体的对比可能很棘手。 对比度太小会使字体发生冲突，而对比度太大也会产生同样的效果。

组合字体时的对比度是指字体不同的任何方式，包括分类、重量、样式和结构。

开始时，最好只关注其中一两个事物之间的对比，同时确保其他事物非常相似。 粗细是在字体之间创建对比的最简单方法之一。 正如已经提到的，太多的重量对比可能和太少一样不和谐。

另一种创建对比度的简单方法是结合不同分类的字体，例如无衬线和衬线或脚本和衬线等。在这些情况下，确保两种字体的情绪匹配是必不可少的。

例如，将像 Amatic SC 这样更随意的字体与像 Baskerville 这样的非常正式的字体结合起来会产生冲突而不是对比。 但是将 Amatic SC 之类的字体与 Josefin Slab 之类的另一种休闲字体结合起来效果很好。

X 高度

X-height 是指字体中单个字符的高度，特别是小写的x 。 具有相似 x 高度的字体将比具有不同 x 高度的字体更好地协同工作。

结构

字体的基本结构包括其所有特征，以及字符的基本形状及其间距等内容。 与字体结构形成对比是一种组合字体的既定方法。 但最好选择至少有一些共同结构元素的字体（例如 x-height 或“正常”样式的粗细），而不是那些完全不同的字体。

情绪

情绪是排版中比较主观的领域之一。 它指的是字体的正式或非正式程度，以及它是否俏皮、女性化、男性化、休闲、严肃等。

例如，Comic Sans 是一种非常非正式的字体，不适合在大多数情况下使用。 另一方面，Bickham Script 非常正式，但给人的印象是商务信函之类的错误。

组合字体时，找到具有相似情绪的字体很重要。 将俏皮的字体与非常严肃的字体结合起来会让人不快。

装饰、颜色和质地

这些东西不是字体的固有特征，但在组合字体时它们很有用。 通过颜色、装饰（例如下划线）和纹理来统一（或创造更多对比）可能是一种非常有效的技术。

有效的字体组合

那里似乎有无穷无尽的具有漂亮排版的网站，以及同样无穷无尽的那些字体不好或只是乏味的网站。 当设计师刚起步或试图将他们的技能提升到一个新的水平时，学习正确的网站是学习如何组合字体的好方法。

Work Notes 将衬线字体 Adob​​e Caslon Pro 与无衬线 Interstate 相结合，创造出一种向传统致敬的字体组合，不会让人感到陈旧或过时。 结合不同的权重和样式增加了额外的视觉趣味，并使排版感觉比实际更复杂。

Adjuvant Capital 使用现代、略带异想天开的衬线字体 Orpheus Pro 与现代 GT America 无衬线字体相结合。 对于一家金融服务公司来说，这是一个非常现代的选择，但与他们对社会负责的全球投资的使命相得益彰。

Bloomscape 使用休闲衬线字体 Morion 和无衬线 Raisonne 来创建引人注目的现代版式设计。 由于其更具装饰性的字体，Morion 不一定是正文类型的明显选择，但是当以适当的尺寸使用时（如这里所示），它非常适合较短的正文文本块。 Raisonne 具有类似的装饰性字体，这使得这两种网络字体可以很好地协同工作。

Vogue 使用现代、优雅的 Savoy 衬线字体与怪诞的无衬线富兰克林哥特式字体搭配，后者最初设计于 1902 年。两者的结合创造了一种高档字体设计，吸引了杂志所针对的有文化的受众。

南方生活方式杂志《花园与枪》在其网站上的排版比此处包含的其他杂志更复杂，这确实使它与众不同。 该网站自始至终使用四种主要字体：主要文章标题是衬线域显示； 正文和首页部分标题为衬线字体 Domaine Text； 元信息、导航和部分标题使用无衬线 Avenir Next； 主页上的其他部分标题位于 Domaine Sans Display 中。

在更大的字体系列中使用多种字体是创建完美协调的复杂排版设计的一种行之有效的方法。 添加 Avenir Next 打破了一切，并增加了额外的视觉趣味。

你选择的字体和你用它做什么一样重要。

— 邦妮·西格勒

结论

有效的字体组合是良好设计的标志。 如果设计师想要创造出与众不同的非凡设计，就必须掌握这项技能。

将此处包含的指南视为探索如何有效组合类型的起点。 坚实的基础可以进行更有效的实验，而无需花费数小时在完全不合适的组合上。 从这里，设计师可以练习创建自己的风格和方法来有效地组合字体，在必要时偏离指南，更有信心他们的最终产品会让用户感到高兴。

进一步阅读 Toptal 设计博客：

• 可读性设计——网页排版指南（附信息图）
• 了解字体分类的细微差别
• 剖析排版解剖学的复杂性（带信息图）
• 如何构建有效的排版层次结构
• 网页和印刷设计的字体样式