给新手设计师的排版设计指南

神译局是36氪旗下的编译团队，关注科技、商业、职场、生活等领域，重点介绍外国的新技术、新观点、新风向。

编者按：即使不是专业的设计师，我们也经常会在生活中进行排版设计，大到网页设计，小到一份Word文档的文字组合。排版设计的本质是“图像+文字”，这个简单的元素背后，有着无限的可能性。本文来自Medium，作者Monica Galvan在文中介绍排版设计的基本知识和相关技巧。原文标题“Improve your designs with these typography tips”。

图片来自Medium｜制图Monica Galvan

优秀的版面设计可以为你的作品锦上添花。我们可以对字体进行多种类型的设计，从而适应某种具体的需要。你可以调整字体大小、间距、对齐方式、色彩，等等。一旦你掌握了排版设计的基本技巧，你就可以和其他字体搭配，实现多样化的、多次层的设计。

版面设计是一种排列字符的技巧和艺术。无论是设计海报、书页，还是APP上的文字，版面设计都在一定程度上参与创造了我们的视觉体验。

排版设计的目的有两个：第一个是清晰可读，要时刻考虑用户是否能够阅读它。第二个是使用特殊的排版技巧，创造一种美学氛围，从而吸引特定的受众。

学习基本的版面设计规则将帮助你成为更好的设计师。你需要做的只是一点理论知识，外加不断练习。接下来我们就开始介绍相关理论。

设计 vs. 设计式样，有什么区别？

设计（Typeface）和设计式样（font）的意思有重合，所有有时候人们难以分清这两种术语的区别。简单来说，设计就是各类设计式样的集合体，而设计式样就是每一种具体的、特殊的式样（比如不同粗细的字体）。

举个例子，Helvetica Bold就是一种设计式样，是Helvetica大家族中的一种。通过下面的图片，你可以很清楚地看到二者的区别。

图片来自Medium｜制图Monica Galvan

字体的类型

字体可以分为三种类型：衬线字体、无衬线字体和装饰性字体。

三种类型的字体举例 ｜图片来自Medium｜制图Monica Galvan

• 衬线字体

衬线字体（Serif）是连接笔画较明显、或者笔画末尾有细线的字体。这些字符通常会在笔画末尾有一个小小的衬线，不同类型的衬线产生了不同类型的字体，从而产生了独特的效果。有时候衬线的区别会非常细微。

F尾部的衬线｜图片来自Medium｜制图Monica Galvan

衬线字体一般会更加正式和传统。编辑们经常会挑选这类字体，用在报纸、杂志和书籍正文中。Times New Roman 是最著名的衬线字体之一，它或许是您在计算机中最先了解到的字体。以下是一些比较著名的衬线字体的例子：

五种衬线字体｜图片来自Medium｜制图Monica Galvan

选择衬线字体的一个优势就在于可以自定义部分内容。举个例子，大部分衬线字体都是可以斜体的（而无衬线字体则没有）。有一些衬线字体也具有其他的变化，如连字变化。

• 无衬线字体

无衬线字体（sans serif）一词来自法语，意思就是“没有衬线”。这种字体往往更加现代、醒目，可以在设计大型标题时考虑它们。

有衬线字体（左）和无衬线字体（右）的区别｜图片来自Medium｜制图Monica Galvan

最流行的一种无衬线字体包括Arial，它是Helvetica字体的复制品。下面的图片中介绍了一些最受欢迎的无衬线字体：

7种最受欢迎的无衬线字体｜图片来自Medium｜制图Monica Galvan

• 装饰性字体

这类字体主要用于标题。由于它们缺乏易读性，所以尽量不要选择用装饰性字体来呈现大量的正文。装饰性字体包含的内容非常广泛，包括slab serifs、 scripts、blackletter和monospaced等。它们也会有一些有趣的用法，可以为设计增光添彩，但在使用时一定要谨慎。 

装饰性字体｜图片来自Medium｜制图Monica Galvan

版面设计元素

 版面设计元素一览｜图片来自Medium｜制图Monica Galvan

现在，让我们一起来探讨一下和印刷相关的术语。相关的术语非常多，比如大写高度、基线、上伸、下延、字形末端等。

但是，成为优秀设计师和认识多少术语并没有直接关系。相反，我们应该要多关注核心元素，因为你可能会每天都使用它们。

• 行距

行距是两行字之间的距离，具体而言是两行字基线之间的空间距离。行距是影响阅读体验的重要因素之一。

一般来说，行距越短，阅读起来就越困难。但是，如果两行之间的空间太大，也会影响阅读体验。所以，行距需要掌握一个微妙的平衡，你必须根据文本的用途来调整字体。

行距｜图片来自Medium｜制图Monica Galvan

• 字符间距

字符间距是指一系列字符（通常是一行或者多行）上每个字母的间距。字符间距的数值越小，字符之间就越紧凑。反之，数值越大，字符之间的空白就会越多。

你需要根据需要调整字符间距。太紧凑或者太宽松都会影响文字的可读性。

通常情况下，全都是大写字母的标题都需要增加字符间距，正文部分字符间距相对小，如果想要和标题区分开，还经常使用斜体。

字符间距由小到大的不同效果｜图片来自Medium｜制图Monica Galvan

• 字距

字符间距是字符之间的距离，而字距是单指每个字母之间的距离。

字距｜图片来自Medium｜制图Monica Galvan

在大多数情况下你不需要调整字距，尤其是对大段文本而言。通常情况下，在调整标题或Logo的时候（这时候字母通常情况下不超过五个字）需要微调距离，这时候才会选择调整字距。字距的调整是非常微小的，当字母越大，字距的调整才越明显。在缺乏具体模版和数据的时候，你需要受过专业训练才能看出来字距是否过大。

在大多数设计软件中，你可以选择光学字偶距（Optical）或者度量字偶距（Metrics）。度量字偶距可以调整不同字体样式的微调，大多数的字体样式都可以用度量字偶距调整。光学字偶距的原理是按照字符形状来调整相邻字符之间的距离。

• 段落对齐

段落对齐包括左对齐、右对齐、居中对齐和适应对齐。

通常情况下。右对齐是一个不错的选择。居中对齐适合少量文本和标题。在大多数情况下，人们的阅读习惯更适合左对齐。

左对齐的文本更便于眼睛辨认和理解，因为我们都是从左到右来阅读页面的。现在，大多数的书籍都是左对齐或者在适应的前提下左对齐的。适应对齐的文本更为传统，经常用在报纸、杂志上。对于适应对齐的文本，有时候你需要调整字符间距来避免句子中出现的空白。

四种对齐方式，从左到右、从上到下依次是：左对齐、右对齐、居中对齐和适应对齐｜图片来自Medium｜制图Monica Galvan

选择哪种段落对齐，取决于最终的视觉效果如何。有时候，当你将文字左对齐或者居中对齐的时候，你会发现边缘部分差异过大（参考下图左边的文本）。在这种情况下，你需要按下回车键手动调整，从而创造出更好的视觉效果。下图是两个文本的例子，你觉得哪一个看起来更舒服？

左边是糟糕的排版，右边是理想的排版｜图片来自Medium｜制图Monica Galvan

层次结构

设计和排版中最重要的是做出一个层次结构。不管你在做什么设计，层次感都是不可避免的。如果登录页面上所有的文字大小都相同，用户会不知道先阅读哪些内容，很容易就会失去耐心，直接选择退出。

通过更改字体、大小、粗细和颜色，你可以引导用户一眼看到最重要的信息。

在你的设计中加入层次结构

有三种方法增加层次结构。

首先是增加排版设计的大小——最重要的信息占据的篇幅是最大的，辅助信息的篇幅相对较小。

接下来，我们可以使用颜色或者色调来创建层次结构。对于主要信息可以加粗，对于次要信息可以使用更加柔和的色彩。

你还可以通过调整间距来创建层次结构。比如你的标题可以是大而粗的亮色字符，也可以在这个基础上将标题和正文留出足够的间距，这样用户或者读者会第一眼就看到这类消息。

增加版面设计的对比

使用上面的方法可以增加版面设计中的对比度。比如，你可以在标题中使用亮红色，正文则使用暗红色，通过色彩的对比可以产生良好的层次感。

另外，你还可以从文本的“轻重”这一角度考虑。作为练习，你可以把不同的字体进行粗细搭配以查看效果。标题使用粗体和亮色，正文则应该使用常规颜色。当一种字体有多种字体式样时，这种组合搭配就会有更多花样。

你当然还可以通过改变大小来增加对比，也就是创建字体相同、但是大小不同的文本组合。

最后，你开可以尝试一些文本全部使用大写字母，搭配的文本则使用小写字母。所有都是大写字母的段落会牢牢抓住读者的眼球，因为这是一种独特的风格。你也可以选择将标题全部设为大写字母。

如何选择字体式样

现在你已经了解了什么是排版设计，了解了字体的三种类型，以及使字体清晰易读的几种调整策略。现在我们将利用学到的这些基础知识，来作出好看的设计。

• 避免追随潮流

选择和设计字体的第一点就是避免跟随潮流。要优先考虑经得起时间考验的经典字体。

• 从选择字体类别开始

将挑选字体式样想像成不同场合挑选服装。你需要穿着正式还是随意？都有谁到场？这些问题都可以帮助你缩小字体的类型和范围。举个例子，如果你现在正在为百事可乐设置首页，那么你可能需要更加现代的无衬线字体，以配合它们设计大胆的徽标。

如果你是要为一部严肃的剧情电影设计海报，也许你会更需要用稳重优雅的衬线字体做标题。

任何时候，都要根据当时的场景和需要选择字体。

• 字体数量尽量控制在2-3个

不要在一个版面设计中使用太多类型的字体。字体越多，阅读或者区分的难度就会越大。通常情况下，请尽量将字体数量控制在2至3个。

在搭配多个字体时，请确保选择两种截然不同的字体。比如，不要选择看起来几乎没有差别的两种无衬线字体，而且应该将无衬线字体和衬线字体或装饰性字体搭配，以达到理想的区分效果。

如何提高排版技巧

事实上，想要提高这类技巧，我们必须不断练习。

如果你是版面设计的新手，那么请先从自己探索文字开始，暂时不要考虑用颜色、摄影、图像或者其他方式进行设计。

打开一款你喜欢的设计软件，从一个白色的画板开始。添加一个标题，一段正文，然后开始探索不同的组合和搭配。

如何创建层次结构？请在白板上多添加一些文本，然后用文中提到的技巧去改变字体大小、字母间距、单词大小写等。

如果你有信心，可以开始尝试搭配2至3种字体，同时调整它们的色彩和间距等。你很快就会发现，设计的本质就是“图像+文字”，在这两个元素中，存在着无限种搭配、无限种可能。

译者：Michiko