排版的基础知识

WebFX团队由450多名数字营销、SEO、网页设计和网页开发、社交媒体等领域的专家组成。他们共同帮助WebFX的客户从网络上获得了超过30亿美元的收入——而这仅仅是在过去的五年里。

什么是排版?

从描述性和简单化的角度来看,排版是排字。但事情远不止如此。

根据你问的人不同,它的意思也不同。

对我来说,如何在设计中使用排版深深植根于它的整体主题、基调和信息。它与你的布局,网格和颜色选择一起工作来创建一个全面的设计

字体的选择和设置字体的技术赋予了你的作品的特点、节奏和风格。它不仅使文案易于阅读,还有助于读者对设计主题有更深入的了解。

对于一个设计师来说,版式排版是非常重要的报告是一个SEO。

一个简单的例子可以说明印刷术的影响力有多大,那就是用不同的字体看同一文本。注意字体是如何定义和改变信息的:

正是这种与设计主题的整合,使排版成为设计师工具箱中最强大的工具之一。接下来,让我们浏览一些基本的排版术语和概念。

一行字符至少有5行可以对齐。这些水平线表示大写字母、上升字母、小写字母和下降字母(我们将很快讨论这些术语)。以下是这五句话:

  • 基线:您可能最熟悉的是基线。这是文本所在的行。
  • 盖高(或盖线):这标志着大写字母的顶部。
  • 上升器高度(或背线):这一行显示了字母的顶部,如k而且h联系。奇怪的是,在很多情况下,这条线比资本线略高。我花了一段时间才明白这一点,因为直觉上,你会认为大写字母是最高的字符。

  • x高度(或中线):这显示了小写字母的高度(不包括上升字母和下降字母)。它通常用字母的高度来测量x
  • 下降高度(或胡子线):降序是字符中低于基线的部分(例如字母)p而且y).这条线显示了下降趋势的底部。

领先的

领先的描述文本行与行之间的间距。您可以通过获得两个基线之间的距离来测量领先。领导被称为行高在CSS。

领导是强大的。

它会影响长文本块的可读性。当你减少行距时,行之间会变得更接近,使文本块看起来更紧凑。

降低前导的数量会导致上升和下降发生碰撞,这可能会对可读性产生不利影响。但作为一种视觉风格,少量的前导会增加读者的阅读速度,引发局促的感觉和幽闭恐惧症,当你以这种富有表现力的方式使用字体时,可能会希望出现这种情况。

增加前导可以降低一篇文章的节奏;它会通过引入更多的空白来减慢读者的阅读速度。

它可以在文本块中显示更轻松的感觉。

太多的前导会导致连续性问题,因为读者的眼睛需要在文本行之间移动更大的距离。请看下面的例子。所有这些都设置在相同的字体,重量和尺寸。

但是,每一个都有不同的引导值。

  • 示例1设置为负值(小于类型大小的值)。你可以看到上升和下降的碰撞以及它对可读性和美观的影响。
  • 示例2设置为通常推荐的值,即类型大小的120%。这意味着如果你的字体大小是10pt,那么前导应该设置为12pt。
  • 示例3设置为类型大小的200%。你会注意到阅读文本的节奏和流程被打乱了。

以下是一些主要的指导方针:

  • 前导可以以不同的方式影响文本块。短文本块(如标语/口号)与长文本块(如段落或新闻专栏)的引导方式将受到各自的影响。仅仅因为它在一个地方很有效并不意味着它在另一个地方也同样有效。

  • 一行字越多,你就需要更多的导语来保持愉快的阅读体验。
  • 如果你增加词间距(每个单词之间的间距),你必须增加引行来提高文本块的可读性。

跟踪

跟踪(或字母间距)是两组字符之间的空格。这叫做字母间距属性。

跟踪可以被描述为宽松的.松散跟踪是指字母之间的距离较大。

严密追踪是指字母离得更近。

跟踪与领导有相似的指导方针,所有这些最佳实践都与可读性有关。你的队伍越长(或测量它通常被称为),你的跟踪就需要更宽松。

这条规则不是一成不变的。字体选择、背景颜色、列数和周围设计元素等变量也会影响文本块的可读性。

每次设置字体时,你都应该查看整体图片。

字距调整

字距调整描述两个字符之间的空格量。

跟踪和字距调整之间经常会有混淆。

虽然跟踪是一个全局设置,影响所有字符的距离,但字距调整更像是两个字母之间空间的微观视图。一些字符组合可能需要比其他字符组合更多的字距,以避免冲突(例如,比较KX).

某些角色以创造和最小化空间的方式坐在一起。

例如,小写字母l在Helvetica字体中是一个矩形;如果你把其中的5个放在一起,(即,lllll)它们之间的距离将相等。

现在考虑一个像大写字母这样的字符W.它所占据的区域不太容易定义,因为最后一条线的对角线在它下面创造了空间。考虑到这一点,一旦你把句子的其余部分放在它旁边,与其他字符相比,这个空格就会产生明显的区别:

字距调整是一种调整字符间距的艺术,这样人们的眼睛就可以轻松地浏览文本,而不会被差异分散注意力。

记住:好的排版永远不会被注意到。

对齐

你如何对齐你的文本对人们如何阅读和理解它有巨大的影响。对齐的决定应该考虑到您的设计主题,当然还有可读性和易读性。

左齐平(或右粗糙)

文本向左对齐。这种对齐方式补充了我们在西方文化中阅读文本的自然方式。如果操作得当,它是提高可读性的最大因素之一。

一定要注意右边(或右边)破布).重要的是要确保有一个良好的平衡与线长度;确保它们不会太相似,但也不会相隔太远。

右平齐(或左粗糙)

文本向右对齐。如果我们从左到右阅读,右齐平会妨碍文本的自然流畅。使用它作为一个对比的主体文本,以突出补充副本。

注意右边的标点符号,因为它们会破坏对齐。

合理的

文本行的开始和结束都是向左和向右对齐的。虽然合理对齐看起来很干净,因为它可以整齐地放入方框中,但它也很难阅读,因为文本行结束之间的视觉提示较少。

字与字之间的间距可以有所不同,以保持行之间的均匀性。要警惕过度使用连字符,因为有些程序会在文本行末尾使用连字符来保持文本正确。

此外,有些行可能有太多的字间距,因此您可能需要根据需要调整换行符。

为中心的

文本对齐到文本区域的中心,而不是边缘。使用居中对齐时要谨慎——没有什么比居中对齐不好的文本更糟糕的了。行开始和结束的位置没有共享点,因此很难阅读。

当文本只有几行(2-3行)时,居中文本看起来最好。

如果做得好,居中对齐会看起来高雅而优雅。确保你的文本区域足够宽,可以将文本分解成逻辑的行,并且行长之间有足够的对比,使文本具有吸引力。

在Photoshop和Illustrator中使用排版

像Photoshop和Illustrator这样的图形软件具有强大的排版功能。上面讨论的概念都可以在Photoshop和Illustrator中使用。处理排版的两个面板是字符面板(窗口>字符)和段落面板(窗口>段落)。

一些排版技巧

这里有一些处理类型的技巧和想法。

信息层次结构

在规划你的设计时,弄清楚如何识别层次结构是很重要的。标题/标题应该有多大或多粗?

那么副标题、正文或图片说明呢?还要考虑使用不同的字体可以帮助您在不同的文本级别之间创建区别。

许多成功的出版物结合了不同的字体来创造古典和现代的布局。

在你的设计中创建一个逻辑层次结构,使它们更容易扫描和阅读。

选择支持主题的字体

当你选择字体时,考虑一下你的设计主题将有助于你做出决定。在通常冗长但非常愉快的简短字体列表工作之后,根据你的主题评估它们来证明你的选择。

熟悉

你做得越多,你就做得越好。在这种情况下,你应该尽可能多地尝试排版。让自己沉浸在主题中。

(我在本指南的末尾列出了一份简短的书籍和网站清单。)看看你欣赏的设计师的作品集,研究他们如何使用排版来创造伟大的作品。

注意那些吸引你的字体,以及如何在你自己的工作中使用它们。

熟悉排版的艺术和科学;没有什么比知识更能让你对自己的决定充满信心了。能够自信而清晰地谈论你的决定,在你背后的技术的全力支持下是非常重要的。

自己判断

虽然我前面讨论的一些规则看起来很死板,但归根结底,你应该做出更好的判断。排字既是一门科学,也是一门艺术。虽然我们已经讨论了一些排版的规则,但重要的是要意识到每个工作都是不同的。

一个双重传播,一个网页,一张名片,一个信头-每一个都有自己的目标和考虑。

虽然我们所讨论的规则可能是一个很好的起点,但外部影响,如周围的设计、公司的标识指导方针和客户的批准,都可能改变您需要设置的类型。

总之,真正重要的是设计是否可行。

字体无处不在

字体是设计的一个组成部分,在我们周围的世界中无处不在。路标,杂志封面,海报,电视广告,电影介绍序列-你不需要寻找排版。

网络上也到处都是。不管你是在船商网站或者是餐厅,他们会有一些排版。

当你看字体的时候,想想你在看什么,为什么它是这样的。很快,你就会注意到字体设置上的细微差别,而这些差别往往会导致排版的好坏。

排版资源

很多书籍和网站都涉及到排版的主题。当你在打字时,它们是很好的参考资料。以下是我最喜欢的一些。

  • 停止偷羊,找出类型如何工作:埃里克·施皮克尔曼、E.M.金格著。Spiekermann在这篇精彩的主题介绍中告诉我们这是如何做到的。

  • 排版风格的要素:罗伯特·布林赫斯特著这本书一直在我的桌子上,它帮助了我很多次,我都不想提!它是印刷书籍的鼻祖。

    我每次看这本书都会笑。如果你喜欢印刷术,那么你可能已经有了一份。

  • 新版式作者:Jan Tschichold。这本书首次出版于1928年,其中的课程和信息在今天仍然适用。它讨论了印刷术的概念,以及对印刷术在社会中的地位的反思,以及我们应该如何对待字体。

  • 现代印刷术:批评历史中的一篇文章:罗宾·金罗斯著。这本书很重,但值得一读。这是一份关于文字历史的惊人记录,来自一个清楚了解自己的人!

网站

  • FontShop教育: FontShop教育文档格式化,便于下载和打印。非常适合教室或工作室。
  • 印刷达人:这是识别一个人的好地方字体.浏览论坛;那里有许多慷慨的人分享他们对这个主题的知识。我喜欢在工作时吃三明治时浏览这个网站。

  • Typographica: Typographica是对字体和字体书籍的评论,偶尔对字体和字体设计进行评论。

WebFX职业

加入我们的使命,为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!