跳转到主要内容

灰度和视觉校正

适合谁看:设计出的字单个看不错,排成一段却深浅不匀、大小不一,想知道怎么调的人。

灰度:整段文字的深浅

字体设计里的「灰度」(英文 color)指文字排在页面上的整体深浅,和颜色无关。和颜色无关[1][2]。一套好的正文字体,排成一段时应该均匀,没有哪个字特别黑或特别浅。

影响灰度的因素:

  • 笔画粗细:笔画多的字(如「鬱」)和笔画少的字(如「一」)放在一起,笔画多的字必须把笔画做细,否则会是一团黑;否则会是一团黑[3];
  • 字面大小:笔画少的字字面要适当收小,否则显得大而空;
  • 空白分布:字内部的空白要大致均匀。

视觉校正:让眼睛觉得「对」

几何上相等,眼睛看起来不一定相等。常见的校正:

现象 校正
圆形和尖角看起来比方形矮小 让它们略微超出边界(西文叫 overshoot),如「口」和「〇」的大小处理[4]
横画看起来比同样粗的竖画粗 横画做得比竖画细一些
几何中心看起来偏下 把重心略微上提
笔画交叉处显得发黑 在交叉处适当削细(墨阱)
字身框完全填满的字显得特别大 方框类的字(如「国」「图」)字面收小一些

这些都是经验性的处理,具体做多少要靠反复排版、打印、缩小观察来判断。

怎么检查

  1. 排测试文本:用真实文章,不要只看单字;
  2. 多种字号:大字号看细节,小字号看灰度;
  3. 眯眼看或缩小看:模糊之后,深浅不匀的字会跳出来;
  4. 打印或在不同屏幕上看:屏幕渲染和印刷效果不同;
  5. 翻转看:把文字倒过来,摆脱「认字」的干扰,更容易看出形状问题。

参考资料

参考资料(4)
    1. Knowledge:Color,Google Fonts Knowledge:Color:https://fonts.google.com/knowledge/glossary/color
    2. 学习字体设计前,先补上这份超全面的字体基础知识,优设网
    Knowledge:Weight,Google Fonts Knowledge:Overshoot:https://fonts.google.com/knowledge/glossary/overshoot Knowledge:Overshoot,Google Fonts Knowledge:Weight:https://fonts.google.com/knowledge/glossary/weight 优设网:学习字体设计前,先补上这份超全面的字体基础知识:https://www.uisdc.com/font-design-basics