等宽数字 Monospaced Numbers 在界面中的使用

Image for post
Image for post
Image for post
Image for post

1.概念介绍

这里介绍两个概念,常见的比例字体 (Proportional Font),以及这篇文章所介绍的等宽字体 (Monospaced Font)

1.1 比例字体 (Proportional Font)

在一些字体里面,从 0 到 9 、从 A 到 Z,每个数字所占的宽度会不同,例如我去年发表这篇文章里介绍到的苹果系统默认的字体 SF Pro Display,默认情况下使用的是比例字体 (Proportional Font),即每个字符占位宽度都不尽相同,会受到对应的字符形状而影响。

Image for post
Image for post

1.2 等宽字体 (Monospaced Font)

等宽字体顾名思义即每个字符所占的宽度一样,由下图可见,等宽字体会在原本较窄的字体上添加一些衬线来作为平衡,撑大容器。

Image for post
Image for post
Image for post
Image for post

2.使用场景

经过一段时间的观察和思考,我总结了三个适合使用等宽数字的场景。

2.1 纵向数据展示——便于对比

如果页面内有多行纵向排列,且需要对比的数据,例如价格、容量、毫升、千克、摄氏度等,可以考虑使用等宽数字(如下图)。便于用户纵向对比各项数据,获得更佳的视觉体验。

Image for post
Image for post

2.2 动态变化的数字 ——防止抖动

非等宽数字的情况下,每个数字宽度不全相同,在纵向排列的时容易导致垂直参考线歪歪扭扭,无法对齐。这种字体应用在实时动态变化的数字字段时会带来更严重的后果 —— 界面元素抖动。

Image for post
Image for post
  1. 各种物理单位:指南针、经纬度、温度、气压计、AR测距等;
  2. 其他:金额、竞赛比分、进度百分比 、直播人气等。
Image for post
Image for post
Image for post
Image for post

2.3 计算数字宽度的布局——准确定位

某个只展示字段的数字,想要固定该字段宽度时,需要同时使用 CSS 内的字体大小单位ch以及等宽数字样式来获得准确的宽度。

Image for post
Image for post

3.实现方式

不管在是在设计软件或落地到手机界面上使用等宽数字,一个大前提是该字体支持 OpenType 高级排版功能并支持等宽数字的特性,例如笔者常常批判的 PingfangSC 就不支持。

3.1 在设计软件上使用等宽数字

Sketch: 选中特定的字体后选择在顶部菜单栏选择「Text」 — 「OpenType Features」 — 「Number Spacing」 — 「Monospaced Numbers」即可转换为等宽数字。

Image for post
Image for post
Image for post
Image for post

3.2 等宽数字在界面上的实践

落地到面上使用等宽数字,Web 端可以直接使用 CSS 属性,两者选其一:

font-variant-numeric: tabular-nums;  //不支持IE浏览器
font-feature-settings: "tnum";
Image for post
Image for post

广州 · LRD.IM

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store