为什么要大行间距?

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

什么是行距?

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,029评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,395评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,570评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,535评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,650评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,850评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,006评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,747评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,207评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,536评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,683评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,342评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,964评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,772评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,004评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,401评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,566评论 2 349

推荐阅读更多精彩内容

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