type

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

type

字体排版

Most interfaces are 90% text. If the text is defaulted, the interface is defaulted, and no amount of colour or motion hides it.

大多数界面 90% 都是文字。如果文字只是默认设置，界面也会显得默认，无论使用多少颜色或动效都无法掩盖。

Choosing the family

选择字体家族

One sans for the interface. One mono for data, code, shortcuts and labels that should read as system. A display face only on marketing pages, and only if the sans cannot carry it.

Pick for the job:

Job	Traits	Reach for
Dense product UI	Neutral, tight apertures, good at 12–14px, tabular figures	Geist, Inter, SF-adjacent grotesks
Reading (docs, articles)	Larger x-height, wider spacing, optical sizing if available	Source-style humanists, or the same sans at 16px+ with looser leading
Data, code, labels	Mono with clear 0/O and 1/l, ligatures optional	Geist Mono, JetBrains Mono, Berkeley Mono
Display	Has an opinion; pairs by contrast with the sans, not similarity	one, chosen against the brand

If the project already has a family, use it. Changing fonts is a redesign, not a fix.

Never: more than two families in product UI; a decorative face for body; a rounded face to "feel friendly".

界面使用一种 sans（无衬线）字体。数据、代码、快捷键，以及应读起来像系统信息的标签，使用一种 mono（等宽）字体。display face（展示字体）只用于营销页面，而且仅在 sans 字体无法胜任时使用。

按用途选择：

用途	特征	可选字体
密集型产品 UI	中性、字腔紧凑、适合 12–14px、支持等宽数字	Geist、Inter、类 SF 的 grotesque 字体
阅读（文档、文章）	更大的 x-height、更宽的字距；如果可用，支持 optical sizing	Source-style humanists（人文主义无衬线字体），或同一款 sans 字体设为 16px 以上并使用更宽松的行高
数据、代码、标签	等宽字体，清楚区分 0/O 和 1/l；连字可选	Geist Mono、JetBrains Mono、Berkeley Mono
展示	有鲜明个性；通过与 sans 字体的对比形成搭配，而不是依靠相似性	根据品牌挑选一款

如果项目已经选定字体家族，就继续使用。更换字体属于重新设计，而不是修复问题。

绝不要：在产品 UI 中使用超过两个字体家族；用装饰字体显示正文；为了“营造友好感”而使用圆体。

Two scales, not one

两套字号体系，而不是一套

Product UI and reading UI want different bases. Pick which the screen is.

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

Product scale (tools, dashboards, admin, lists)

产品字号体系（工具、仪表盘、管理后台、列表）

Role	Size	Weight	Leading	Tracking
Page title	20–22px	500	1.15	−0.02em to −0.03em
Section title	14–15px	500	1.3	−0.015em
Row / body	13px	400	1.45	−0.003em
Secondary	12–12.5px	400	1.5	0
Label, meta, mono	10.5–11px	400–500	1.3	0.04–0.1em if uppercase
Numbers in tables	body size, mono or tabular	400	—	0

Body at 13px is the sweet spot for dense tools when the family is designed for it. Do not go below 10.5px for anything a person must read.

角色	字号	字重	行高	字距
页面标题	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。

Reading scale (docs, articles, settings with long copy)

阅读字号体系（文档、文章、包含长文本的设置页面）

Role	Size	Weight	Leading	Tracking
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
Body	16–17px	400	1.6	0
Small	14px	400	1.5	0

Measure: 55–70 characters. Set

max-width

ch

on the text container, not on the page.

角色	字号	字重	行高	字距
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

，不要对页面设置。

Hierarchy without size

不依赖字号的层级关系

The mistake generated UI makes is making everything a different size. Three sizes are enough for most screens. Get hierarchy from:

Colour: four foreground steps. Primary text, secondary, tertiary, faint. Meta text is a lighter step at the same size, not a smaller size.
Weight: 400 and 500. 600 for a title, rarely. 700 almost never in a UI font: it fills in at small sizes.
Space: a title is separated from what follows by more space than sits between rows.
Case and family: mono uppercase with tracking for a section label reads as a label without being bigger or bolder.

A row can carry a name at 13px/500 in primary colour, a description at 12.5px/400 in secondary, and a domain at 10.5px mono in faint. Three levels, two sizes.

生成式 UI 常见的错误，是让所有内容都采用不同字号。大多数屏幕只需三种字号。可以通过以下方式建立层级：

颜色：四级前景色。主文本、次要文本、三级文本、极弱文本。元信息应使用同字号下更浅的一级，而不是采用更小字号。
字重：400 和 500。标题使用 600，但应少用。UI 字体几乎不要使用 700：在小字号下，笔画会挤满字腔。
空间：标题与后续内容之间的间距，应大于各行之间的间距。
大小写与字体家族：采用 mono 大写字母并增加字距的分区标签，即使不更大或更粗，也能读作标签。

一个行项目可以在主色中以 13px/500 显示名称，在次要色中以 12.5px/400 显示描述，并在极弱色中以 10.5px mono 字体显示域名。三个层级，两种字号。

Leading

行高

Tighter as size grows. Roughly:

10–12px: 1.4–1.5
13–14px: 1.45
16–18px: 1.5–1.6 (reading), 1.4 (UI)
20–24px: 1.2–1.3
28px+: 1.05–1.15

Titles that wrap to two lines are where wrong leading shows first. Set it there, then check the single-line case still sits right.

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

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

标题换成两行时，最先会暴露错误的行高。先在这种情况下设置，再检查单行标题的位置仍然合适。

Tracking

字距

Negative as size grows; slightly positive for small caps and mono labels.

24px+: −0.02em to −0.04em
14–20px: −0.01em to −0.02em
12–14px: 0 to −0.005em
Uppercase labels at 10–11px: +0.06em to +0.1em
Mono at any size: 0

Never track body text positive. Never letter-space a lowercase word.

字号越大，字距越负；小型大写字母和 mono 标签则略微使用正字距。

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

绝不为正文添加正字距。绝不对小写单词添加字距。

Numbers

数字

Any number that sits in a column, changes over time, or is compared to another uses tabular figures:

css

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

Counters, prices, timestamps, row counts, percentages, keyboard shortcuts. Mono is the stronger version of the same signal; use it for values that are identifiers (IDs, hashes, hostnames) and tabular sans for values that are quantities.

Slashed zero (

zero

feature) in mono when 0 and O can be confused.

任何位于列中、会随时间变化或需要与另一个数字比较的数字，都应使用 tabular figures（等宽数字）：

css

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

计数器、价格、时间戳、行数、百分比、键盘快捷键。

mono 字体是同一信号更强烈的表达；用于作为标识符的值（ID、hash、hostname），应使用 mono 字体；对于表示数量的值，则使用支持等宽数字的 sans 字体。

当 0 和 O 容易混淆时，在 mono 字体中使用斜杠零（

zero

特性）。

OpenType

Turn on what the face was designed with, sitewide:

css

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

Common ones worth checking: alternate

and

for a more neutral look,

cv11

single-storey a in Inter and Geist,

ss01

open digits,

case

for punctuation with caps,

tnum

(same as the CSS property above),

calt

for code ligatures if the team wants them.

在整站启用字体本身设计支持的特性：

css

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

值得检查的常见特性包括：备用

和

字形，让整体更中性；Inter 和 Geist 中的

cv11

单层

；

ss01

开放数字；用于大写标点的

case

；

tnum

（与上述 CSS 属性相同）；如果团队需要代码连字，可使用

calt

。

Rendering

渲染

css

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

Antialiased on macOS makes light text on dark backgrounds thinner and cleaner. On light backgrounds it is close to neutral. Set it once, at the root.

css

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

在 macOS 上使用抗锯齿，会让深色背景上的浅色文字更纤细、更干净。在浅色背景上则基本保持中性。应在根节点设置一次。

Wrapping and truncation

换行与截断

Titles and headings:
```
text-wrap: balance
```
. No more orphans.
Paragraphs:
```
text-wrap: pretty
```
where supported.

Rows that must stay one line:

truncate

(

overflow: hidden; text-overflow: ellipsis; white-space: nowrap

) with a

min-width: 0

on the flex child, or it will not truncate.

Descriptions in cards:
```
line-clamp: 2
```
, never 3+; if three lines are needed, the layout is wrong.
Do not truncate anything the user needs to act on (a name they must recognise, an error). Wrap it.
Hyphenate long reading text with
```
hyphens: auto
```
and
```
lang
```
set; never in UI.

标题和各级标题：使用
```
text-wrap: balance
```
。不再出现孤行。
段落：在支持的情况下使用
```
text-wrap: pretty
```
。
必须保持单行的行项目：使用
```
truncate
```
（
```
overflow: hidden; text-overflow: ellipsis; white-space: nowrap
```
），并在 flex 子项上设置
```
min-width: 0
```
，否则无法截断。
卡片中的描述：使用
```
line-clamp: 2
```
，绝不要使用 3 行以上；如果确实需要三行，说明布局有问题。
不要截断任何用户需要据此采取行动的内容（例如必须识别的名称或错误信息），应让其换行。
长篇阅读文本可使用
```
hyphens: auto
```
并设置
```
lang
```
来启用连字符；UI 中绝不使用。

Links in text

正文中的链接

Underline, with

text-underline-offset: 3px

and

text-decoration-color

at the faint step, brightening on hover. Colour alone is not a link. In lists of items, the whole row is the link and it is not underlined.

使用下划线，设置

text-underline-offset: 3px

，并将

text-decoration-color

设为最浅一级，悬停时再提亮。不能只靠颜色来标识链接。在条目列表中，整个行项目都是链接，因此不加下划线。

Labels, buttons, inputs

标签、按钮与输入框

Sentence case everywhere. "Save changes", not "Save Changes". The only uppercase is small mono section labels.
Button text: 13px/500 in product UI, same as the row name. Never smaller than the body around it.
Input text: 16px on touch devices or the browser zooms the page. Use the same size on desktop or the field will change size between them; 14–15px is a workable compromise with a media query for touch.
Placeholder: tertiary colour, never as the only label.

所有地方都使用 sentence case。使用“Save changes”，而不是“Save Changes”。唯一允许全大写的是小型 mono 分区标签。
按钮文字：产品 UI 中使用 13px/500，与行项目名称相同。绝不能小于周围正文。
输入框文字：在触摸设备上使用 16px，否则浏览器会缩放页面。桌面端也使用相同字号，否则输入框在两者之间会改变尺寸；14–15px 是可接受的折中方案，可通过媒体查询为触摸设备调整。
Placeholder：使用三级文字颜色，绝不能将其作为唯一标签。

Loading fonts

加载字体

Self-host or use the framework's font loader; both give
```
font-display: swap
```
and no layout shift when combined with size-adjust.
Preload only the weights you use above the fold. Two weights, not six.
Variable font when the family offers one: one file, all weights, and animated weight if you ever want it (you probably do not).
Fallback stack that matches metrics (
```
size-adjust
```
,
```
ascent-override
```
) so the swap does not reflow.

自行托管字体，或使用框架的 font loader；两者都可以使用
```
font-display: swap
```
，并在与
```
size-adjust
```
配合时避免布局偏移。
只预加载首屏内实际使用的字重。使用两个字重，而不是六个。
如果字体家族提供 variable font，使用一个文件覆盖所有字重；如果以后需要，还能做字重动画（但大概率不需要）。
回退字体栈应匹配度量指标（
```
size-adjust
```
、
```
ascent-override
```
），避免字体切换时发生重排。

Marks of defaulted type

字体排版沿用默认设置的迹象

Sign	Fix
Five font sizes on one screen	Collapse to three; move hierarchy to colour and weight
Bold everywhere	500 for emphasis, 400 default; bold is for one thing per screen
Title case buttons	Sentence case
1.5 line-height on a 32px heading	1.1
Proportional digits in a table	`tabular-nums`
Orphan on a two-line title	`text-wrap: balance`
Grey text that fails contrast	Faint step is for decoration only; secondary text must pass 4.5:1
Letter-spaced lowercase	Remove tracking; reserve it for uppercase mono

迹象	修复方式
同一屏幕上有五种字号	缩减为三种；将层级转移到颜色和字重上
到处都是粗体	用 500 强调，400 作为默认；粗体每屏只用于一个重点
按钮使用 Title Case	改用 sentence case
32px 标题使用 1.5 行高	改为 1.1
表格中使用比例数字	使用 `tabular-nums`
两行标题出现孤行	使用 `text-wrap: balance`
灰色文字未达到对比度要求	极弱一级仅用于装饰；次要文字必须达到 4.5:1
小写文字添加了字距	移除字距；仅将其用于大写 mono 文字

From the catalogue

字体目录

Geist — sans, mono and pixel families designed for product UI; the scale above assumes something like it.
Google Fonts, Pangram Pangram, Klim, ABC Dinamo — where good families come from.
Modular Scale, Utopia — build a scale once instead of guessing.
Wakamai Fondue — see which OpenType features a font actually has.
Better Web Type — the reading-scale fundamentals.
More at stealth.pm/assets and stealth.pm/tools.

Geist — 为产品 UI 设计的 sans、mono 和 pixel 字体家族；上述字号体系以类似它的字体为前提。
Google Fonts、Pangram Pangram、Klim、ABC Dinamo — 优质字体家族的来源。
Modular Scale、Utopia — 一次建立字号体系，而不是反复猜测。
Wakamai Fondue — 查看字体实际支持哪些 OpenType 特性。
Better Web Type — 阅读字号体系的基本原则。
更多内容见 stealth.pm/assets 和 stealth.pm/tools。