为什么你的 UI 字体排版看起来很初级:6 个修复方案与精确数值
六个让界面显得初级的字体排版错误,以及资深设计师对应的修复方法和精确数字:字号比例、单一字体族、可读的灰色、大写、行高与层级。
初级的字体排版很少是一个大错误,而是六个小错误,每一个都凭感觉决定:一个看着顺眼的字号,一个看起来有趣的字体,一个显得优雅的灰色。资深设计师的排版之所以看起来平静,是因为每个选择都遵循规则。下面就是这六条规则,附上具体数字。
1. 使用字号比例
✕ 初级:字号凭感觉挑选
✓ 资深:统一比例,从 16 起按 1.25
左边的每个字号都是单独挑的:31、27、22、17、15、13。它们之间的步长不均匀,有些层级几乎一样,有些又跳得很大。右边的每个字号都是前一个乘以 1.25:16、20、25、31、39。步长均匀,所以每个层级都与下一级清晰区分。
1.2 到 1.333 之间的比例适合大多数界面。选一个,写下来,再也不要输入不在列表里的字号。在 CSS 里这就是一小组变量,在 Figma 里就是一组文字样式。我们的模块化字号比例指南讲解了如何选择比例。
:root {
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31px */
--text-3xl: 2.441rem; /* 39px */
}
2. 一个字体族,两种字重
里斯本的周末
一篇小小的旅行日记三天,两个街区,还有一趟超级漫长的电车之旅。
阅读更多✕ 初级:一张卡片上用了四种字体
里斯本的周末
一篇小小的旅行日记三天,两个街区,还有一趟超级漫长的电车之旅。
阅读更多✓ 资深:一个字体族,常规与粗体
每种新字体都带着自己的个性,一张卡片上四种个性只会吵架。读者分不清哪个才是品牌。一个字体族两种字重,常规用于阅读,粗体用于标题,就足以构建屏幕所需的每一个层级。
如果你想要第二个字体族,就给它一份固定的工作,比如只用于大标题,并且在所有地方都保持如此。永远不要为了让某个元素“特别”而加一种字体。
3. 读得清的灰色
您的订单正在路上
预计 14:20 至 14:40 送达。快递员临近时我们会给您发短信。
✕ 白底上的 #B0B0B0:很难读
您的订单正在路上
预计 14:20 至 14:40 送达。快递员临近时我们会给您发短信。
✓ 白底上的 #6B6B6B:轻松易读
浅灰在明亮显示器上的设计文件里显得精致。到了户外的手机上,它就消失了。左边的送达时间是卡片上最有用的一行,却最难读。
#6B6B6B 在黑色标题旁边依然显得安静,同时保持可读。经验法则是:白底上的次要文字不要比大约 #767676 更浅,这是满足正文无障碍最低标准的最浅灰色。
4. 大写只用于标签
We've updated our terms. Please review the changes before your next order.
✕ 初级:整句都用大写
更新
我们更新了条款
请在下次下单前查看这些变更。
✓ 资深:大写标签,正文用句首大写
大写会抹去单词的形状。在小写中,高矮不一的字母让每个单词有了眼睛可以识别的轮廓;在大写中每个单词都是一个矩形,所以一句话只能逐个字母地读。这就是为什么整段大写像在吼叫,而且读起来更慢。
大写适用于它本来的用途:一到三个词的简短标签,比如栏目标签、状态或按钮。更长的内容一律用句首大写。
5. 标题紧凑,正文宽松
间距也是字体排版的一部分
过紧的行距会把段落变成一堵墙。给正文留出呼吸的空间,让标题保持紧凑。
✕ 初级:标题松散,正文拥挤
间距也是字体排版的一部分
过紧的行距会把段落变成一堵墙。给正文留出呼吸的空间,让标题保持紧凑。
✓ 资深:标题 1.1,正文 1.5
行高在不同字号下的职责相反。大标题的字形内部本来就有足够空间,所以 1.1 的标题能聚成一个整体。小号正文需要行与行之间的空隙,让视线能找到下一行的开头,所以用 1.5。
初级版本正好相反,往往是因为把同一个行高用在了所有地方。设两个值并处处使用:标题约 1.1 到 1.2,正文 1.4 到 1.6。
6. 字号、字重、颜色、间距
订单 #2841
已送达今天 14:203 件商品合计 ¥42.80
✕ 初级:全部加粗,字号单一
● 已送达
订单 #2841
今天 14:20 · 3 件商品合计 ¥42.80
✓ 资深:四种工具,一个清晰的顺序
当一切都加粗,就没有什么是重点。初级的卡片有五行同样字号同样字重的文字,读者得全部读完才能找到重要的那一行。
资深的卡片用了四种工具,每种都只用一点:订单号更大,状态有了颜色和圆点,细节降为灰色,空间把合计隔开。没有哪一种工具被用得很猛,所以看起来很平静。更多内容见字体排版层级。
一张表看完六个修复
| 初级 | 资深 | 数值 |
|---|---|---|
| 凭感觉挑字号 | 一套字号比例 | 从 16 起按 1.25:20、25、31、39 |
| 多种字体 | 一个字体族,两种字重 | 常规与粗体 |
| 浅灰文字 | 读得清的灰色 | 白底上用 #6B6B6B,绝不浅于 #767676 |
| 整句大写 | 简短标签才用大写 | 一到三个词 |
| 所有地方一个行高 | 两种行高 | 标题 1.1,正文 1.5 |
| 全部加粗 | 四种层级工具 | 字号、字重、颜色、间距 |
FAQ
UI 适合用什么样的字号比例?
以 16 px 为基准,取 1.2 到 1.333 之间的比例。1.25 的比例会得到 16、20、25、31 和 39 px,足够大多数屏幕使用的层级。
UI 应该使用多少种字体?
一个字体族就够了,用两种字重。只有在赋予固定职责(比如大标题)时才加第二个字体族,并且处处用法一致。
正文应该用多大的行高?
正文约 1.5,大标题约 1.1 到 1.2。
白底上什么灰色是可读的?
#767676 是白底上满足 WCAG 正文最低标准的最浅灰色。#6B6B6B 余量稍多,同时仍然像次要文字。
UI 文字应该全部大写吗?
只适用于一到三个词的简短标签。更长的大写文字读起来更慢,因为单词失去了形状。
Sources
- 字号比例:16 × 1.25ⁿ = 20、25、31.25 和 39.06,显示为四舍五入后的值。
- 白底对比度,按 WCAG 2 公式计算:#B0B0B0 为 2.2 比 1,#767676 为 4.5 比 1,#6B6B6B 为 5.3 比 1。WCAG 对正文要求 4.5 比 1(1.4.3 Contrast (Minimum))。
- 最初作为轮播图发布于 UX Brainy。
Want type that looks this calm across your whole product? Our team builds UI and design systems with the typography decided once.
Get Started
