F4.13.4paragraph spacing coupled to leading设计

段落间距应随行高联动,而非固定像素值

别名: 段间距随行高 · 固定像素段间距 · spacing scale

概念解释

段间距若写成「十六像素」,它只在画板的默认字号上相对于行高是对的。用户一放大字号,行盒长了,十六像素还停在原地,曾经大于行高的缝变成小于行高,分段线索自己塌掉。段间距跟行高走(paragraph spacing coupled to leading)要求这段空白是行高的函数,通常用 em 或行盒倍数写,而不是一份与字体无关的像素定数。

机制

行高随字号变,段间距若不变,二者的比值就变。分段能被看见,靠的正是这个比值,不是空白的绝对毫米数。像素值来自默认档的视觉稿,对后续的动态字体、浏览器缩放、用户最低字号一无所知。字号从常规走到辅助功能最大档,行盒可以翻倍,固定段间距相对变成「行内缝」,段落重新粘成一墙。反过来,为最大档选一个很大的像素值,默认档上又会把短段撑成稀疏卡片。跟行高联动,比值在缩放中保持,阈值那条不等式才能在每个档位上同时成立。这不是把段间距再加大一次,是换约束单位。

边界

与周边组件对齐的间距(卡片内边距、列表项间隔)常常要停在间距刻度上,不能随正文行高无限涨,否则卡片系统会被段落带着跑。那是组件间距,不是段间距;正文块内部仍应跟行高。电子邮件客户端和部分原生文本视图不给行高倍数,只能用点数,这时按当前字号重算点数,而不是写死一份。标题与正文之间的空白承担的是层级,不是分段,乘数可以不同,但仍应随各自字号走。

怎么落地

  • 正文段间距写成行高的倍数(或 em),不要写成与字号脱钩的像素。
  • 把系统字号从最小拖到最大,量每一档的「段间距 ÷ 行盒」。比值应大致恒定,且始终大于一;若只在默认档大于一,就是像素锁死。
  • 卡片、工具栏的间距继续走布局刻度,不要为了「全部用 em」把非段落的空隙绑到行高上。

延伸

  • 同组F4.13.1 段落间距需大于行内行高才能形成可辨的分段线索 · F4.13.2 首行缩进与段间空行是互斥的两种分段惯例,混用造成冗余 · F4.13.3 过长的无分段文本块会显著降低阅读完成率
  • 相邻F4.02 行高 · F4.16 动态字体与用户字号
  • 站内检索paragraph spacing · em spacing · leading scale

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F4.13.4