在设计时,行距与字体大小一样重要。行间距不仅影响理解可读性 - 更重要的是影响可访问性。
什么是行距?
行间距是段落内文本行之间的空间量,该属性由HTML代码中的“行高”设置。
行间距表示为数字值或字体大小的因素,例如1.5×或150%。举个例子:1.5×12的文本行高为18。
为什么行间距很重要?
字体,大小,重量和颜色是排版的重要考虑因素,行间距也是如此。
行距会影响设计的感觉,排版的节奏和可读性。太紧,文字会感到拥挤,变得更难阅读。太大,线条会显得不相关没有空间。
行间距也影响可访问性。有认知障碍或视觉障碍的用户在间隔太近时无法追随文本行。提供正确的行距平衡可以让用户更轻松地下移到下一行文字。
什么是正确的行距?
要符合 W3C辅助功能指南 “行间距至少在段落中是一半半,这是150%。”
许多默认行间距设置都低于此指南。
一个例子:
大多数浏览器的默认引导率是110%到120%
Sketch和Adobe Creative Suite的自动引导默认设置为120%
Bootstrap的段落文本默认行高为1.428(142%)
Foundation段落默认行高为1.5625
只有其中一个默认设置符合可访问性准则。这些默认的引导设置才会进入设计模型,进入网站。
使用默认的尺寸是不可以接受的。设计师做得更好是我们的责任。这也并不意味着将150%设置为默认值并忘记它。行间距应仔细设计,应当考虑行长度,字体大小和其他类型规格。一些设计可能需要更多的引导和其他更适合少引导(谨慎!)
一般规则:
1.较小的文字大小- 需要较大的行间距。
2.较宽的段落宽度 和 较长的段落 需要更多的行间距。
3.较大的字体大小 (如标题)可以处理较少的行间距。
为什么我喜欢大行间距?
排版网页的样式时,我喜欢更大的行间距(合理的范围内)
更大行距的好处:
1.无障碍
2.用户更容易更快地吸收内容
3.快速扫视
4.可读性
在网页设计中,线条长度会对不同的屏幕尺寸产生影响。在桌面上有两行的段落可能会在移动设备上变成4至6行。更紧密的行距可以在桌面上使用2行,但会导致移动设备出现可读性问题,因为它会成为一大块文本。(当然,行间距可以针对不同的断点进行调整,与字体大小相同,但实际情况大多数情况下不是这样)。
较大的行间距比(适用于较短和较大的段落)不会有这些问题。在印刷设计中,增加10-20%的引导会增加页数,从而导致印刷成本的增加。
每个人都在谈论扫描能力,可访问性,用户如何急躁,以及我们如何不介意网页上的更长页面 - 但却没有什么文章和建议争论更大的行间距。
不要害怕大行间距。 设置印刷字体的大小,颜色,字体和重量时,请 务必花时间设计和检查行间距。你的读者和用户会感谢你。