字间距

文本中字符与字符之间的间隔。通过 CSS 的 letter-spacing 属性控制,影响可读性和设计风格。字距调整 (kerning) 针对特定字符对进行微调,而字间距 (tracking) 是对整体间隔的均匀调整。

字间距 (letter-spacing / tracking) 是文本中相邻字符之间的距离。字距调整 (kerning) 针对"AV""To"等特定字符对单独调整间距,而字间距 (tracking) 则是对整段文本的字符间隔进行均匀的增减。在 CSS 中通过 letter-spacing 属性来控制。

中文排版中,字间距的默认值为零,即所谓的"密排"。汉字设计在正方形字身内,字符紧密排列即可获得均匀的视觉间距。而英文文本中每个字符宽度不同,需要依靠字体内置的度量数据 (字符宽度信息) 自动调整间距。中文排版标准 GB/T 15834 对标点符号的间距有专门规定,例如句号后不需要额外空格。

在标题和 Logo 设计中,增大字间距 (正向 tracking) 可以营造高端感和开阔感,缩小字间距 (负向 tracking) 则产生紧凑感和张力。中文标题通常设置 letter-spacing: 0.1em0.2em 的字间距,比正文略宽的间距兼顾了美观与可读性。

字间距不影响字符计数本身,但会显著改变"相同字符数的文本所占据的物理空间"。名片上能放多少字、海报标题能用多少字、按钮标签能容纳多少字,都取决于字间距的设置。字间距每增加 0.1em,10 个字符的文本就会多占约 1 个字符的宽度。

从无障碍访问的角度看,WCAG 2.1 的成功标准 1.4.12 (文本间距) 要求用户将字间距调整到 0.12em 以上时,内容不应受到损害。如果在固定宽度的容器中紧密排列文字,当用户增大字间距后,文本可能溢出或重叠。

CSS 的 letter-spacing 是可继承属性。父元素设置的字间距会自动应用到子元素,因此在标题上设置了较大的字间距后,其中的链接文本也会继承同样的间距。要避免意外的继承效果,需要在子元素上显式指定 letter-spacing: normal

分享这篇文章