F4.18.1tabular figures设计

表格中的数字应使用等宽数字以保证列对齐

别名: 等宽数字 · tabular lining · 比例数字 · proportional figures

概念解释

多数正文字体里,数字是比例宽度的:1 窄,0 宽。放进表格列,同一数位上下对不齐,个位的 1 会缩到十位下面去。等宽数字(tabular figures)让 0 到 9 占同一字宽,列才成为可以扫的位值网格。这和把整列右对齐不是一件事:右对齐决定的是这串数靠哪一边,等宽决定的是每一位是否还在同一条垂线上。

机制

表格阅读是纵向比较:看哪一行更大,看小数点有没有对齐。比较依赖位值——个、十、百在固定的横位置上。比例数字把这个网格揉掉,尤其是含很多 1 的列(序号、百分比、年份)会看起来像在斜着往下掉。等宽数字是字体里另一套字形,通常和齐线数字(lining figures,与大写字母同高)成套出现;旧式数字(oldstyle)高低错落,即使等宽,纵向扫读也会被升部降部打扰,所以表内默认是等宽齐线。OpenType 里这是 tnum 一类特征,不是「换一个等宽字体」;用等宽英文去排表,字母也会被强迫等宽,正文会变丑。只要数字走表格数字,拉丁词仍可走比例宽度。

边界

句子里的年份、门牌、一笔带过的数量,用比例数字更融进正文,硬套等宽会在词间留出不自然的洞。等宽数字在窄 1 两边补白,大面积使用会让数字区显得稀。等宽并不等于「数字看起来一样重」,1 仍然比 8 淡,那是字重,不是宽度。手写感强、没有表格数字特征的展示字体,不要拿来排要对齐的列。

怎么落地

  • 价格列、序号列、统计表打开表格数字(或选用带 tnum 的字体),不要用正文默认的比例数字。
  • 把一列既有 111 又有 800 的数排出来,看个位是否在一条垂线上。个位跳来跳去,就是还在用比例数字。
  • 正文段落保持比例数字;不要为了表,把整站 font-variant-numeric 全局锁死。

延伸

  • 同组F4.18.2 金额、序号等数字优先靠右对齐以便比较位数 · F4.18.3 小数点位数不一致会破坏纵向对齐的比较意图 · F4.18.4 数字与单位之间的间距和换行规则需要单独定义
  • 相邻F4.05 对齐方式 · E4.03 表格
  • 站内检索tabular figures · lining figures · tnum

同组卡片

快捷操作

分享

分享当前页面

ios_share

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