版式设计无处不在。您是否注意到饼干包装背面的配料表上的行距?还是价格标签上的数字形状,甚至是街道名称标志上字母的粗细(又称粗细)?这些可能不是您的灵感来源,但它们却是生活的日常组成部分。

版式设计指南
由Mky

实际上,我们到处看都不断被字母包围。所有这些资源为我们提供了不同的观点和见解,并向我们展示了可以使用印刷术的无穷方式。

在深入研究版式设计之前,让我们看一下什么是版式,以及它来自何处。

印刷术简史

什么是版式设计?简而言之,版式设计是一种以可读且美观的方式排列消息的艺术。这是设计不可或缺的元素。字体印刷并不要求设计师绘制自己的字母,而是要使用已经存在的字体。该过程要求设计人员进行一系列决策,例如选择合适的字体,选择点大小,调整字距和行距,并得出有意义的布局。

使用笔记本电脑,计算机甚至电话,都可以快速轻松地完成此操作。得益于技术,新一代设计师每天都在挑战排版及其规则,他们以几年前无法想象的方式设想字母。

类型示例
谁说情况说明书一定很无聊?通过 安德沃什
类型示例
使用大胆的字体来保持简单始终是一个不错的选择。通过 五角星

但这并不总是与技术有关。移动式是在15世纪初发明的 约翰尼斯·古腾堡并允许批量生产印刷材料,从而彻底改变了版式。但是,即使在没有印刷技术出现之前,人们仍然决心创建书籍或基于类型的海报。他们只是手工完成,充满耐心和奉献精神。人类一直在创造书面信息-缺乏纸张和适当的书写工具从未阻止过我们。古代文明将其字形雕刻为石头或木头。

如果我们看一下版式的演变以及到目前为止使用的所有工具和技术,我们会注意到手工制作和机器制作之间,有机和几何之间的持续斗争。如今,将两个世界彻底隔离并和谐地融合在一起,便产生了新奇的结果,助长了印刷探索永无止境的循环。

您需要了解的版式设计术语

在开始排版之前,需要了解一些基本规则和设计术语。这是最重要的:

风格

信件有许多不同的形状和样式。对它们进行分类可能会具有挑战性,因为有许多因素需要考虑:它们的外观,对它们的启发,它们出现的时代以及它们的用法。为了简单起见,我们经常引用三种主要的样式类别,然后将它们分成较小的类别。

衬线

最早的衬线字体是受传统书法启发而来的,被称为 人文主义者 要么 老式。这种风格的特点是光滑,圆润的形式以及轻微的重量变化。

人文主义字体

大约在18世纪中叶出现了一种新型衬线,我们现在将其称为 过渡性的。这种风格标志着人文主义风格与现代风格之间的过渡,因此融合了两种风格的特点。

过渡字体

到18世纪末和19世纪初,一种激进的衬线样式诞生了: 现代。我们可以通过鲜明的重量对比和细而直的衬线来识别这种风格。

现代字体

随着19世纪广告的兴起, 埃及人 要么 平板衬线 被介绍了。由于其大胆的外观和沉重的衬线,它们是显示商业消息的首选样式。

平板字体

无衬线字体

Sans Serif字体在20世纪变得流行,并且它们也具有书法影响力,因此我们称它们为 人文主义者 也一样我们可以观察到轻微的体重变化和整体温暖的氛围。

人文主义字体

1900年代中期,Helvetica创立,为 过渡性的 无衬线。这些字母是统一的,比以前使用的字母更坚固,缺少手工制作的元素。

过渡字体

几何 无衬线等效于现代衬线。它们建立在几何形状上(字母O是一个完美的圆圈),字母A和N之类的峰尖而结实。

几何字体

草书

脚本 字母模仿手写和书法风格,从光滑,正式到凌乱而毫不费力的任何地方。

脚本字体

脸部接近脚本,但它们从笔刷字体中汲取灵感。这使它们更大胆且不那么优雅。

笔刷字体

最后, 哥特 要么 黑字 风格以传统的毡尖书法为基础。该样式是从加洛林式的微小字体发展而来的,到12世纪中叶,一种新的样式以锐利,笔直和棱角分明的线条创造出来。

哥特式或黑体字字体

字体与字体

我敢肯定,在人生的某个时刻,我们都对字体和字体之间的区别感到困惑。我绝对是!

一种 字体 (或 字体系列)是字母形式的视觉设计,它由多种字体格式组成。在金属排版中,一组物理字母被视为一种字体,其中包含每个现有字母,数字和标点符号作为单独的元素。在数字世界中,字体是我们安装和使用的软件。

完整的字体家族可能具有压倒性的样式:从超薄到超黑,从超浓缩到超宽,全部以常规和斜体显示。

字型

但是,等等,还不是全部。有些人的脸也有小写字母(大写字母,只延伸到x高度),衬里数字和非衬里数字(超出基线和x-height的数字,更无缝地集成到文本块中),在某些情况下甚至还有几个额外的备用字符。太多了吧?

字型

解剖学

字母的解剖结构非常复杂-每个细节和元素都有其自己的用语。

这里有几个:

类型解剖

以下是一些标点符号,以及它们的名称和正确用法:

认识印刷错觉

字母之所以很棒,不仅是因为它们表达了太多的情感,而且还因为它们具有欺骗我们的眼睛的能力。

让我们看一下在版式设计中发现的一些错觉:

幻觉1

S看起来像是一个完全对称的字母,对不对?好吧,不是。只需将其旋转180°,您就会发现顶部实际上小于底部。这使它看起来更加稳定和自信。

字体错觉

幻觉2

即使所有字母看起来都完全相同,但圆形实际上稍大一些。例如,O与基线和瓶盖高度的交点只是一个点。例如,字母E的交点与这些线的整个表面接触。因为两个字母在技术上都相同,所以它们看起来不成比例。为了使它们在视觉上相等,我们需要稍微超出O。

字体错觉

幻觉3

为了使字母O看起来对称且重量一致,我们实际上需要使其-重量不一致。将字母O翻转90°,您会发现侧面比顶部和底部要厚一些。

字体错觉

幻觉4

由于我们要翻转字母,因此请对字母A尝试相同的技巧。将其水平翻转会发现该看似对称的​​字母实际上不是对称的。即使使某些字母违背数学规则,也需要对某些字母进行少量作弊,以使它们在视觉上令人愉悦。

字体错觉

幻觉5

如果您对书法有所了解,那么您会知道向上笔划很细,向下笔划很粗,而十字笔划又很细。该规则甚至需要应用于最简单和几何形状的字母,例如字母T。

字体错觉

幻觉6

人们可能会认为,理论上,字母E和A中的横线位于字母的中间。好吧,再想一想。为了使字母看起来很平衡,需要稍微移动一下。通过将字母上下颠倒,您可以清楚地看到横杆偏离中心。

字体错觉

幻觉7

字母B,P和R是姐妹形状,一个从另一个派生。但是,这并不意味着它们具有相同的比例。 R的碗需要稍薄一些,这样当我们将腿连接到它时,它就不会变得太厚。 B的上碗需要小于底部的碗,以便字母看起来更稳定。

字体错觉
字体错觉

排版设计规则

是的我知道, 规则注定要被打破, 但是为了以一种不会令设计师哭泣的方式违反规则,您需要首先学习它们。

在页面上输入文字和排列段落时,我们需要注意一些因素,并确保我们要设计的内容清晰易读。当然,如果您要创建一些抽象的,实验性的印刷海报,目的是完全混乱和无政府状态。如果那是您的果酱,那就去吧。但是,如果您要处理很长的文本,这不仅要引起观看者的注意,而且要以一种简单明了的方式实际刻画一条消息,则需要注意您所做的每个决定。

对准

对齐是指在页面上排列文本主体,更具体地说,是将其边缘与页面的边缘对齐。对齐方式有4种,但请记住,没有一种比另一种更正确,它们只是外观不同且表达不同的共鸣。

向左冲

这可能是最常用的对齐方式,因为它遵循大多数语言的自然流程。使用这种对齐方式时,必须注意创建一个平衡良好的右边缘,并具有自然感觉的行长度。

确保避免在新行上出现孤单的单词。这些被称为“寡妇”,他们很难过。

字体向左冲

向右冲

与左对齐对齐相反,右对齐与大多数书面语言的自然流程背道而驰,这也可以使我们受益。但是请注意,这种对齐方式会产生不寻常的外观,并且在较长的段落中使用时可能很难看清眼睛。为了获得干净的右边缘,请尽量避免在行尾出现许多句号或逗号。

字体向右冲

居中

如果做得不好,居中对齐可能看起来很无聊且凌乱。尽管吸引了很多注意力,它却可以营造出优雅却动感的感觉。关键是要在保持整体平衡的同时发挥行的长度。

字体居中

有道理

尽管做得好的话看起来很现代而且干净,但是合理的对齐会很快出错。因为单词必须填满整个行,所以它们之间可能会出现尴尬的空格。确保必要时均匀地整理所有内容,必要时使用文本的大小,文本框的长度和字距调整。

字体对齐

追踪

调整字母之间的整体空间的过程称为跟踪或字母间距。在大多数情况下,人们将采用积极的追踪而不是消极的追踪,以创造一种更加开放和通风的构图。

文本越大,字母之间的间隔越大,因此需要减少跟踪。同样,如果文本大小变小,我们需要增加跟踪。

字体追踪

由于我们经常倾向于应用超出实际需求的趋势,因此增加跟踪可能会变得棘手。要记住的一个提示是,大写字母比小写字母允许更慷慨的跟踪。

字体追踪

紧缩

字距调整是指修改各个字母之间的间隔。即使在大多数情况下我们都可以采用跟踪功能,但有时我们还是需要进入并仅调整两个字母之间的空间。这些“可调整的”缝隙最常见地出现在诸如A,W,V,T之类的字母周围。

哦,看,这是一个小游戏,可以测试您的字距调整功能!

如果我们使用结构良好的字体,则无需进行大量字距调整。如果可以的话,我们可以在编辑应用程序中应用光学字距调整(由我们正在处理的程序自动执行)或公制字距调整(将在设计字体时使用类型设计器所希望的字距调整),或者我们可以手动完成所有操作(使用我们的直觉和经验)。

字体字距调整

分析您的信件并应用最适合此目的的跟踪方法。另外,请记住,仅光学字距调整可以在某种字体上正常工作,并不意味着它在所有情况下都是最佳选择。

领导

两行文本之间的距离称为行距或行距。通过对其进行调整,我们可以使用段落的纹理和颜色,从而创造视觉趣味并构建层次结构。行距的最佳大小取决于各种因素,例如相对于可用空间的字词数量,显示大小或我们想要的氛围。

字体领先的例子

层次结构

层次结构有助于我们创造视觉趣味并引导浏览者的视线跨页面,从而使吸收文本的过程变得更加容易和直观。创建某些层次结构最明显,最简单的方法是将信息写成不同的大小。

我们还可以通过调整字母或行距或调整文本大小来创建有趣的层次结构。我们还可以混合使用的样式或颜色,或使用特殊字符或不同的对齐方式和布局。

我们决定安排文本的方式(特别是要带到最前面的部分)很大程度上取决于我们为文本准备的材料类型:印刷或数字。如果是印刷的,它是否是报纸上散布着大量文字,带有主标题的杂志封面和显示杂志内容的较短封面或带有标题和一些信息(例如日期和位置)的海报?如果是用于网络,则页面的目标是什么:我们需要显示的文本长度是多少?我们是为谁设计的?

键入示例“ width =” 1280“ height =” 976
我们不能不谈论身份系统而谈论字体 宝拉·谢尔(Paula Scher)为公共剧院创作

但是,使用层次结构并不总是要突出显示文本的某些部分。我们还可以使用层次结构通过更改权重,颜色和大小来创建视觉上有趣的构图,例如图案和形状。

牢记所有这些参考文献将有助于我们构建适当的层次结构,而不会使读者不知所措。

层次结构示例“ width =” 1200“ height =” 675
简洁明了的层次结构的完美示例:标题,正文和图像标题。通过 埃尔德姆·奥萨雷
层次结构示例“ width =” 593“ height =” 1024
我们不仅可以使用层次结构对某些信息进行分类,还可以创建引人入胜的图像。通过 麦克米伦。
层次结构示例“ width =” 481“ height =” 600
由于权重的逐渐变化,请注意类似梯度的效果。通过 打字错误。

格网

网格是处理文本正文过程中最重要的元素之一,它可以是简单的也可以是复杂的。通过使用网格,我们基本上是在给定页面上构建信息框架。这使我们可以更好地控制页面上元素的排列方式。通过正确使用网格,我们可以创建引导观众眼睛的构图,使信息易于处理和理解。

与所有内容一样,我们可以使用简单而又简单的网格,也可以完全疯狂地提出复杂而复杂的网格。

网格示例“ width =” 1000“ height =” 1397
尽管此布局的总体网格相当简单且固定,但中央的大框以及侧面的两个较小的框仍使该框有些移动,使其在视觉上更具吸引力。通过 南德意志报,插图通过 德克·施密特(Dirk Schmidt)

在页面上排列信息时要记住的另一个非常重要的事情是空白。与它成为朋友,并始终保持靠近您。

许多人都有用文本或图像填充页面每个角落的冲动,但是通常要有大量的空白。它提供了信息呼吸的空间,使作品更加通风,并帮助读者在信息中移动。

网格示例“ width =” 678“ height =” 929
字体和空白的美丽示例共同创造出干净通风的构图。通过 Arbeitsform:Rochade
网格示例“ width =” 724“ height =” 1034
只要您的文字清晰易读,就可以对布局绝对疯狂。通过 futuraproject.cz

排版的力量

字体设计具有影响消息的强大功能。如果正确使用方式(样式,尺寸,层次结构,字距和行距的正确组合),您将无法表达任何东西。从正式,精美的页面到动感十足的作品,您可以做任何想像得到的事情。

通过了解有关字母的规则和事实以及可以使用它们的各种方式,我们能够以无尽的方式通过它们来表达自己。这些规则不过是指导。我强烈鼓励您继续前进,并打破所有这些!学习,试验,忘记学到的东西,犯错误并重新开始。这样,您将开发出一种独特的样式。

想更多地了解排版?查看最新的字体趋势,最佳的字体配对和顶级徽标字体。