排版设计入门：普通人也能用的字体与布局技巧

编者按: 哪怕并非专业的设计师, 我们时常会于生活里开展排版设计, 往大了说有网页设计，往小了讲有一份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, 左边呈现的那种排版是糟糕的, 与此同时, 右边所展示的属于理想的排版。

层次结构

做设计以及排版时, 最为关键的一点是要构建出一个层次结构, 无论你所从事的是何种设计工作, 层次感都是必然会存在的, 当登录页面里所有文字的大小均保持一致时, 用户便会对先阅读哪些内容毫无头绪, 极易就此丧失耐心, 进而直接选择退出。

改变所使用的字体, 变换其大小程度, 调整粗细状况, 更改颜色面貌, 凭借这些方式, 你能够引领用户在一眼之间, 就看到最为重要的信息。

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

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

首先, 是把排版设计的大小予以增加, 其中, 占据篇幅最大的是最为重要的信息, 而篇幅相对较小的是辅助信息。

接下来, 我们能够运用颜色, 或者运用色调去创建层次结构。对于主要信息采取加粗处理, 对于次要信息采用更为柔和的色彩。

你能够借助调整间距, 去建造层次结构。比如说, 你的标题能够是大且粗的亮色字符, 或者在这个根基之上, 把标题与正文留出让人觉得足够的间距, 以此那种情况下受众或者读者会在第一时间就瞧见这类消息。

增加版面设计的对比

运用上面提及的方法, 能够增添版面设计里的对比度, 比如说, 你能够在标题那儿采用亮红色, 而正文部分使用暗红色, 借助色彩之间的对比, 能够营造出不错的层次感。

再者, 你能够从文本的“轻重”此视角予以思量。当作练习, 你能够将差异的字体实行粗细搭配从而去查看效果。标题运用粗体以及亮色, 正文却应当运用常规颜色。当一种字体存有多种字体式样时, 这种组合搭配会出现更多花样。

你当然还能够借由改变尺寸以增添对照, 换而言之, 便是创设那些字体为同类、然而尺寸却存在差异的文本组合。

最后, 你能够去试着弄些文本通通采用大写字母, 与之搭配的文本就用小写字母。所有都为大写字母的段落会稳固地吸引住读者的目光, 缘由是这是一种别具一格的风格。你同样能够挑选把标题全都设定为大写字母。

如何选择字体式样

此刻, 你已然知悉了何为排版设计, 知悉了字体的 three 种类型, 以及让字体清晰易读的若干调整策略。现如今, 我们会借助所学的这些基础内容, 进而打造出好看的设计。

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

把挑选字体式样设想成于不同场合挑选服装, 你是要穿着正式些, 还是随意些, 都有谁会到场, 这些问题全能够助推你去缩小字体 的类型以及范围, 比如说假使你此刻正给百事可乐设置首页, 那么你兴许需要更加现代的无衬线字体用于搭配它们设计大胆的徽标。

若是你打算为一部庄重的剧情影片来设计海报, 说不定你将会更有必要运用沉稳优雅的衬线字体去做标题。

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

不到一个版面设计里运用好多类别的字体, 字体数目越多, 阅读或者分辨的困难度就会越厉害, 一般情况下 , 尽量把字体数字把控在2至3个！

当进行多个字体搭配之际, 务必要保证选取两种存在显著差异的字体，举例来说, 别去挑选看上去几乎不存在差别的两种无衬线字体, 并且应当把无衬线字体与衬线字体或者装饰性字体进行搭配, 从而达成理想的区分成效。

如何提高排版技巧

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

设若你身为版面设计之人, 且为新手, 首先要着手的是开启自我对文字的探索之旅, 暂且别去思量运用颜色、摄影、视觉图像或者其他类别的方式来开展设计工作。

开启一款你颇为中意的设计软件, 起始于一块儿白色的画板, 增添一个标题, 一段正文, 接着着手探寻不同的组合以及搭配。

怎样去创建层次结构呢, 在白板之上增添更多一些文本, 之后运用文中所提及的技巧, 来改变字体的大小, 调整字母之间的间距, 变换单词字母的大小写等。

要是你具备信心, 那就能够着手试着搭配两三款字体, 与此同时去调节它们的色彩以及间距之类的。很快你就会发觉, 那设计的本质即为“图像 + 文字”, 于这两个元素当中, 有着无穷无尽种搭配、无穷无尽种可能。

译者：Michiko

继续浏览有关 排版设计字体布局 的文章