type

字体

大多数界面有 90% 是文本。如果文本平平无奇，界面也会平平无奇，再多的色彩或动效也掩盖不了。

选择字体家族

界面用一种无衬线字体。数据、代码、快捷键和应呈现系统感的标签用一种等宽字体。展示字体只用于营销页面，而且仅限无衬线字体无法胜任的情况。

根据用途选择：

用途	特点	可选字体
密集型产品 UI	中性、字腔紧凑、在 12–14px 下清晰易读、支持等宽数字	Geist、Inter、接近 SF 风格的 grotesk 字体
阅读（文档、文章）	较大的 x 高度、较宽的字距（如可用）支持光学尺寸	Source 风格的人文主义字体，或同一种无衬线字体，字号不低于 16px，行距更宽松
数据、代码、标签	字符 0/O 和 1/l 易于区分的等宽字体，可选连字	Geist Mono、JetBrains Mono、Berkeley Mono
展示	个性鲜明；应与无衬线字体形成反差，而非相似	选一种，结合品牌进行挑选

如果项目已有字体家族，就沿用它。更换字体是重新设计，不是修复问题。

切勿：在产品 UI 中使用超过两种字体家族；正文使用装饰字体；为了“显得友好”而使用圆润字体。

两套比例，而非一套

产品 UI 和阅读 UI 需要不同的基准。先确定屏幕属于哪一类。

产品比例（工具、仪表盘、管理界面、列表）

角色	字号	字重	行距	字间距
页面标题	20–22px	500	1.15	−0.02em 至 −0.03em
分区标题	14–15px	500	1.3	−0.015em
行 / 正文	13px	400	1.45	−0.003em
次要文本	12–12.5px	400	1.5	0
标签、元信息、等宽文本	10.5–11px	400–500	1.3	大写时为 0.04–0.1em
表格中的数字	正文字号，等宽或等宽数字	400	—	0

当字体家族为此专门设计时，13px 的正文最适合密集型工具。凡是需要人阅读的内容，字号不要低于 10.5px。

阅读比例（文档、文章、含长文本的设置界面）

角色	字号	字重	行距	字间距
H1	28–36px	500–600	1.1	−0.025em
H2	20–24px	500	1.2	−0.02em
H3	16–18px	500	1.3	−0.01em
正文	16–17px	400	1.6	0
小字	14px	400	1.5	0

行长：55–70 个字符。在文本容器上设置以 ch 为单位的 max-width，而非页面上。

不靠字号建立层级

生成式 UI 常犯的错误是让所有内容都使用不同字号。大多数屏幕用三种字号就够了。通过以下方式建立层级：

1. 颜色：分为四级前景色。主文本、次要文本、三级文本、弱化文本。元信息使用同字号的浅一级颜色，而不是更小的字号。
2. 字重：使用 400 和 500。标题很少使用 600。UI 字体几乎不用 700：小字号下笔画会糊成一片。
3. 留白：标题与后续内容之间的间距，应大于行与行之间的间距。
4. 大小写和字体家族：使用带字间距的大写等宽字体作为分区标签，无需放大或加粗也能看出它是标签。

一行中可以有 13px/500 的主色名称、12.5px/400 的次要色描述，以及 10.5px 等宽的弱化色域名。三个层级，两种字号。

行距

字号越大，行距越紧。大致如下：

• 10–12px：1.4–1.5
• 13–14px：1.45
• 16–18px：1.5–1.6（阅读），1.4（UI）
• 20–24px：1.2–1.3
• 28px 及以上：1.05–1.15

标题换成两行时，错误的行距最先显现。先调整两行标题的行距，再检查单行标题是否依然协调。

字间距

字号越大，字间距越负；小型大写字母和等宽标签可稍微增加字间距。

• 24px 及以上：−0.02em 至 −0.04em
• 14–20px：−0.01em 至 −0.02em
• 12–14px：0 至 −0.005em
• 10–11px 的大写标签：+0.06em 至 +0.1em
• 任意字号的等宽字体：0

正文切勿使用正字间距。切勿拉开小写单词的字间距。

数字

凡是按列排列、随时间变化或需要相互比较的数字，都使用等宽数字：

.tabular { font-variant-numeric: tabular-nums; }

计数器、价格、时间戳、行数、百分比、键盘快捷键。等宽字体能强化同样的视觉效果；对于作为标识符的值（ID、哈希值、主机名），使用等宽字体；对于表示数量的值，使用等宽无衬线字体。

在等宽字体中启用带斜线的零（zero 功能），以免 0 和 O 混淆。

OpenType

在整个网站启用字体设计时包含的功能：

html { font-feature-settings: "ss01", "cv11"; } /* per family: check its specimen */

值得检查的常见功能：使用替代字形 a 和 g，让外观更中性；Inter 和 Geist 中的单层 a cv11；开放式数字 ss01；大写字母搭配标点的 case；tnum（与上面的 CSS 属性相同）；如果团队需要代码连字，则使用 calt。

渲染

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

在 macOS 上启用抗锯齿，会让深色背景上的浅色文字显得更细、更清晰。在浅色背景上则基本没有影响。在根元素设置一次即可。

换行与截断

• 标题和各级标题：使用 text-wrap: balance，避免行末只剩一个词。
• 段落：在支持的环境中使用 text-wrap: pretty。
• 必须保持单行的行：使用 truncate（overflow: hidden; text-overflow: ellipsis; white-space: nowrap），并为 flex 子项设置 min-width: 0，否则不会截断。
• 卡片中的描述：使用 line-clamp: 2，绝不要超过 3 行；如果需要 3 行，说明布局有问题。
• 不要截断用户需要据此采取操作的内容（例如用户必须识别的名称或错误信息）。应让它换行。
• 阅读性较强的长文本使用 hyphens: auto 并设置 lang，UI 中则不要使用。

文本中的链接

添加下划线，设置 text-underline-offset: 3px，并将 text-decoration-color 设为最浅的颜色，悬停时再加深。不能只靠颜色区分链接。在项目列表中，整行都是链接，且不加下划线。

标签、按钮和输入框

• 全部使用句首字母大写格式。“Save changes”，而不是“Save Changes”。只有小号等宽字体的分区标签使用全大写。
• 按钮文字：产品 UI 中使用 13px/500，与行名称字号相同。绝不要小于周围的正文。
• 输入文字：触屏设备上使用 16px，否则浏览器会缩放页面。桌面端也使用相同字号，否则输入框在不同设备上会改变大小；使用媒体查询为触屏设备设置字号时，14–15px 是可行的折中值。
• 占位符：使用三级文字颜色，绝不能作为唯一标签。

加载字体

• 自托管或使用框架的字体加载器；两者都能提供 font-display: swap，搭配尺寸调整后不会引发布局偏移。
• 仅预加载首屏可见内容所需的字重。两个字重，而不是六个。
• 如果字体家族提供可变字体，就使用可变字体：一个文件涵盖所有字重，还能实现字重动画（虽然你可能并不需要）。
• 使用度量值匹配的回退字体栈（size-adjust、ascent-override），避免字体替换时重新排版。

默认字体样式的问题

问题	修正方法
同一屏幕上有五种字号	缩减为三种；通过颜色和字重体现层级
到处都是粗体	强调时用 500，默认用 400；每个屏幕只突出一处
按钮使用标题式大小写	改为句首字母大写格式
32px 标题的行高为 1.5	改为 1.1
表格中的数字为比例数字	使用 tabular-nums
两行标题的最后一行只有一个词	使用 text-wrap: balance
灰色文字对比度不足	最浅的颜色仅用于装饰；次要文字的对比度必须达到 4.5:1
小写字母使用字距	移除字距；仅用于全大写等宽文字

来自目录

• Geist — 专为产品 UI 设计的无衬线、等宽和像素字体系列；上面的字阶假设使用类似的字体。
• Google Fonts、Pangram Pangram、Klim、ABC Dinamo — 优质字体系列的来源。
• Modular Scale、Utopia — 一次构建好字阶，不再凭感觉猜测。
• Wakamai Fondue — 查看字体实际支持哪些 OpenType 特性。
• Better Web Type — 阅读字阶的基础知识。
• 更多内容请见 stealth.pm/assets 和 stealth.pm/tools。