Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save ilife5/606558d6d2b603288467 to your computer and use it in GitHub Desktop.
Save ilife5/606558d6d2b603288467 to your computer and use it in GitHub Desktop.
design

设计师的理解英文字母字距设计指南

为什么需要在文字之间调整字距

目标,可读性更好。

原因,不同的字母之间无法用等距,因为字型不同,眼睛总是会欺骗人的,明明两个字母之间的字距是相同的,但是由于字距不同,看上去还是很别扭的,过大或者过小。

办法,手动调整或者依赖字体自带的字距。

9个专业建议:

需要注意以下的字母组合

  • 带有斜边的:A,K,V,W,Y
  • 带有伸展边或者交叉笔画的:F,L,T
  • 字母组合:W或者V + A;T或F + 小写元音

如上图,PAN中的A看起来距离N更近,而距离P更远,因为P和A的斜边造成的视觉影响。

理解字母形状和空白直接的关系

  • 两个边缘为直线的字母之间的字距应设计的较大,如i和i之间,i和l之间
  • 一个边缘为直线的字母和一个边缘为弧形的字母之间的字距设计较小
  • 两个边缘都为弧形的字母之间的字距设计的更小

如下图所示:

留意字号的影响

当文字较大时,字距对视觉的影响较大,当字号较小的时候,字距的影响对视觉的影响较小。

字距带来的错误

当字距较小的时候,不但会影响可读性,也会带来错误,如r和n字距过小时,会被误认为m。

如何避免设计时字母本身的意义对设计带来的影响

翻转!如下图所示

将调整字距留到最后一步

在调整字距之前还有很多事情要做,如全局的字距,行距。

思路为,先整体,再局部。

知道何时应该使用字距

以下的场景是不需要考虑调整字距的

  • 小文字,如10,11,12字号时
  • 很多高质量的字体,本身已经对特定的字母之间设计了适当的字距,在这种情形下,是不需要过度调整的

字距的练习

可以在如下的网站进行练习:kerntype

web工程师,也是有工具可以调整字距的

kerningjs.com

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment