在框中“正确”垂直居中文本

平面设计 排版 文本 结盟 最佳实践
2021-12-29 14:10:13

是否有规范规则如何在框中垂直居中文本?或者,换句话说,如何围绕文本对齐一个框?我可以根据印刷指标想象三个选项(请参阅我的非精确插图):

  • 在 x 高度的中间对齐
  • 在大写高度的中间对齐(“平均线”)
  • 对齐帽子的中间 + 下降高度

在此处输入图像描述

我主要是一名程序员,但我经常不得不这样做,并且想知道是否有一个共同的共享规则,或者你们设计师是否按照你认为合适的方式去做。我更喜欢平面设计书籍的链接而不是个人意见。

3个回答

好问题!

我真的很喜欢并同意到目前为止给出的答案。我的回答更侧重于实用技术,而不是科学或数学推理。:D

话虽如此,我的偏好是使用基线和 x 高度(请参阅下面的类型术语部分)分别作为我的盒子的顶线和底线的起点。希望这个 GIF 有助于解释:

在此处输入图像描述

一旦我获得了与基线或 x 高度对齐的路径,然后我使用SHIFT+UPDOWN箭头键来创建视觉填充(默认情况下,在 Photoshop 中,每个增量都是10px,所以在上面的示例中,我40px在顶部添加了填充和底部)。

在这个例子中,如果我要使用相同的框/文本并执行“对齐垂直中心”(红色文本是使用对齐工具的结果),您可以看到对齐工具的作用:

在此处输入图像描述

如您所见,它非常接近(2px差异)。

总结/总结:

我使用的技术:

  1. 将框的顶部/底部路径分别与 x 高度/基线对齐(然后SHIFT向外箭头键以进行视觉填充。
  2. 同样,有时我会上下箭头键,直到它的基线和 x 高度与框的底部和顶部边框相交;从那里开始,我将计算像素,然后在文本居中时将剩余部分均匀地分布在两个方向之间。
  3. 选择框和文本,然后执行“对齐垂直中心”和“对齐水平中心”。
  4. 最后,有时我会盯着这个位置。通常,我向上和向下走以避免视觉“下垂”(这与图片框架有关,请参阅下面的图片框架部分);如果字体大小是奇数高度并且1px差异是余数,则尤其如此……我会将文本1px(或更多)向上而不是向下移动。

图片框架

最常用的垫子始终具有相等的边距。在视觉中心低于实际中心的艺术品上,.[8] 在消光中经常使用底部加权或偏移。底部边距大于侧边距和顶部边距。看图像时,眼睛的中心往往高于图像的物理中心。通过创建更大的底部边距并偏移垫子,您可以将视线吸引到图像的物理中心。顶部中心是底部加权的子集,其中顶部和侧边距相等,从而产生视觉上令人愉悦的效果。在边界不相等的垫子中尤其如此,例如 11x14 和 8x10 开口。
维基百科:垫子(图片框架)

… 和这里:

垫子在底部“加重”,因为我们的眼睛/大脑会感受到重力的拉力。如果垫子周围的宽度相同,我们的大脑会将底部“记录”为稍窄(图像在垫子中没有视觉居中)
WetCanvas > 学习中心 > 工作室技巧和框架 > 框架讨论 重新加载此页面垫子的底部

键入条款

在此处输入图像描述
https://www.supremo.tv/typeterms/

奖金!

这是一个比较大写高度、下降器、上升器和所有小写字母且没有下降器/上升器的 GIF:

在此处输入图像描述

我认为这两个版本在包装盒内排列得非常好。

视觉重量是如此动态,以至于它真的不能由 x 高度、帽子高度等来决定......

尽管在数学上是“中心”,但您设计中的某些元素可能会将眼睛拉向一个方向而不是另一个方向,例如,与画布相比,从左到右。

“视觉中心”是所有元素权重在视觉上平衡的地方,尽管不在确切的中心。

您可能想尝试使用此工具:http: //javier.xyz/visual-center/

设计并不总是一门精确的科学。通常看起来正确的东西可能不是真正的中心或数学上正确的东西。

具体来说,在您的问题中,它将取决于文本中的上升和下降来确定最佳的光学对齐方式。如果没有上升或下降,理想的对齐方式可能会改变。在您的示例中,数字 3 似乎是最佳选择,因为既有上升器又有下降器,将它们居中看起来最令人赏心悦目。