对齐字母“错”显得更“对”

平面设计 排版 商标 结盟 排版
2022-01-04 00:11:04

我目前正在为客户制作徽标。这是正在进行的工作。 在此处输入图像描述

对我来说,显然 S 应该与上面的线对齐。我觉得对齐它的最佳方法是对齐 S 的底部而不是顶部曲线,即使顶部曲线确实突出更多。请参阅以下示例 在此处输入图像描述

同样在标志的另一端,AI 感觉可以做类似的事情,最大限度地减少标志末端的空白三角形

在此处输入图像描述

我认为最终结果在对齐方面更令人愉悦 在此处输入图像描述

我觉得这是正确的,但我的客户对此提出质疑。这种对齐是我在职业生涯中养成的习惯,所以我没有被正式教过,事实上我不记得我是从哪里学会的。

告诉我,我是不是在这里养成了一个坏习惯?我的客户正确吗?如果这是正确的,这种对齐方式是否有名称?或者有没有我可以推荐我的客户参考的文章?

4个回答

是的,这些是合法的东西,它们有名字。

“视觉对齐”,或者,“光学对齐”

这是一般原则——你是根据视觉上看起来正确的东西来对齐,而不是根据规则。它不仅用于排版,还用于视觉一致性很重要的任何地方,例如在设计图标集时——使带有曲线的图标与带有直边的图标对齐时看起来很整洁。


下面更具体的技术术语不是很常用(我不得不查找它们),它们只是为了好奇。

印刷过冲

这是当角色通过适当的垂直点时,因为这样做看起来比严格停止更自然。Joojaa 的答案有很多很好的例子,我只是从微软的排版标准中添加这个(不要笑,尽管在世界上释放了 Comic Sans,MS 有一个通常相当不错的排版团队),这表明它不仅仅是基线在哪里使用:

在此处输入图像描述

光学边距对齐

本质上是水平过冲,通常应用于弯曲或倾斜的字符,以及其他几乎没有与硬线相交的边缘的字符。它在边缘基本上是紧字距,并且它所应用的字符通常与在其他地方会收到紧字距的字符相同。

以下是维基百科目前的说明:

在此处输入图像描述

如果您查看许多字体,您会注意到字母“s”的曲率穿透了基线和许多其他小字母的完美对齐。作为一般规则,圆形倾向于这样做 - 刺穿直边的基线。我有一篇关于这种现象的文章,以及它发生的原因,在我的书签的某个地方,但该链接目前避开了我。

圆形穿透基线

图 1:圆形“s”穿透基线的一些示例,基线穿孔突出显示。

如果你看,即使是非常几何的字体也会这样做(见图 1)。这种情况发生的次数多于不发生的次数——以至于我经常听到有人提到它。但是请注意数量如何因情况和形状而异。所以今天仍然是你的眼睛决定。

如果您的眼睛敏锐,您还会注意到一些字母形式也会横向刺穿垂直方向。那是因为那里也发生了同样的现象。

“S”曲线延伸到与垂直衬线对齐的右侧

图 2:横向相同的效果。如果您将直线和曲线混合在一起,通常会发生这种情况。

PS:对不起,我的临时工作站上可用的字体有点有限。

这是一种称为过冲(或悬垂)的技术。我们之所以使用超调,是因为我们将事物视为人类的方式(至少在纯数学方面)是不准确的。

不相信我?让我解释:

考虑这张图片:

在此处输入图像描述

圆圈和三角形对你来说是否有相同的重量?事实上,它们的高度相同,但面积不同。

现在让我们展示它们在相同区域的外观:

在此处输入图像描述

注意为圆形和三角形创建的过冲。圆形和三角形在视觉上看起来仍然不平衡(尤其是三角形),但是通过一些缩放并将三角形的底部与正方形对齐,我们得到了以下视觉上吸引人的图像:

在此处输入图像描述

没有指南:

在此处输入图像描述

请注意,两者仍然会发生过冲,但方式不同。这与糟糕的做法完全相反,这是获得适当视觉平衡所必需的——我们经常需要根据我们使用的特定主题来调整形状大小、宽度、间距和对齐方式。这没有具体的公式,它取决于成分和所需的结果。请记住,当您更改垂直尺寸时,您可能需要将水平间距更改相同的数量以保持适当的空白:

在此处输入图像描述

当涉及到视觉对齐时,笔画宽度也会发挥作用。看看这个:

在此处输入图像描述

即使缩放和间距相同,也感觉不太对,是吗?

这里的结论是,我们应该在增加行程的同时增加补偿量,注意平衡计数器。事实上,当我们有反形式时,它们压倒了形式的轮廓,它们的平衡变得比实体形式本身更重要。这正是任天堂在设计Nintendo Switch 标志时所做的。

要详细阅读,请查看Fábio Martins 的文章The Art of Eyeballing – Part III: Overshooting,我实际上从这个答案中窃取了图像和一些内容。

还可以查看这篇关于印刷错觉的精彩文章,其中讨论了这种效果。

我没有任何文章支持它,但我可以从经验告诉你,你是对的。就像手动字距调整、间距和对齐字体(和其他对象)一样,这部分是科学,部分是艺术。让你的眼睛和直觉引导你,而不是精确的数字和数学。