为什么要大行间距?

在设计时,行距与字体大小一样重要。行间距不仅影响理解可读性 - 更重要的是影响可访问性。

什么是行距?

行间距是段落内文本行之间的空间量,该属性由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%的引导会增加页数,从而导致印刷成本的增加。

每个人都在谈论扫描能力,可访问性,用户如何急躁,以及我们如何不介意网页上的更长页面 - 但却没有什么文章和建议争论更大的行间距。

不要害怕大行间距。 设置印刷字体的大小,颜色,字体和重量时,请 务必花时间设计和检查行间距。你的读者和用户会感谢你。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,253评论 19 139
  • iOS 9设计规范 中文版 完整版译者注:本文译自苹果官方人机界面指南 iOS Human Interface G...
    海宁Hennie阅读 13,452评论 2 60
  • 1 UI设计基础 1.1 为iOS而设计 1.1.1 iOS包含以下3条设计原则: 遵从,UI应该有助于人们理解内...
    Willry阅读 3,717评论 1 48
  • 有人说过这么一句话:“上大学后,故乡再无春秋,只有冬夏。” 然而,工作了的人会说“真羡慕你们,还有假期。” 是吧,...
    笑笑奇谈阅读 357评论 0 0
  • 关于年轻。 天气越来越冷。随着冬至日逼近,日出越晚,人就醒得越晚。寒意不会催人醒,只会显得被窝更加暖和,这就是为什...
    995吧阅读 270评论 0 0