Typography for the Web: The First 6 Decisions

网页字体排印：前 6 个决定

Typography is the single most impactful thing on a web page, and almost nobody gets paid to think about it. It is invisible when it works and unbearable when it does not. Users do not say "I love the way this site set its line height" — they say "this site feels good" or "this site feels cheap". The decisions that produce the first feeling and avoid the second come down to six fundamental choices. None of them require a design degree. All of them repay the small effort to make them deliberately rather than by default.

排版是网页上影响最大的元素，却几乎没人专门为它领薪水。排版做得好时是隐形的，做得差时让人抓狂。用户不会说"我喜欢这个站点的行高"，他们只会说"这个站感觉好"或"这个站感觉廉价"。决定前者、避免后者的，就是那六个基础选择。这些都不需要设计学位，只需要把"随便默认"换成"刻意而为"，那份小小的心思就会得到回报。

Decision 1: typeface family

决定一：字体家族

CSS recognizes five generic font families. The first four are universally useful:

CSS 识别五种通用字体家族。前四种在所有场景下都很有用：

• serif — letters have finishing strokes. Conveys tradition, editorial, trustworthy. Good for long-form reading in print; works on the web with careful selection.
• serif（衬线体） —— 字母有装饰性收笔。传达传统、编辑感、可信。印刷长文阅读的好选择；在 Web 上需要细心挑选。
• sans-serif — clean, modern, neutral. The default for UI and most websites today. Excellent legibility at small sizes on screens.
• sans-serif（无衬线体） —— 干净、现代、中性。今天 UI 和大多数站点的默认选择，在小字号屏幕上有出色的可读性。
• monospace — every character the same width. Use for code, technical data, anywhere alignment matters more than reading speed.
• monospace（等宽体） —— 每个字符宽度相同。代码、技术数据、任何"对齐比阅读速度更重要"的地方使用。
• cursive — script-like; almost never a good idea for body text. Useful for accents and brand voice only.
• cursive（手写体） —— 类似手写；几乎从来不适合正文。只在点缀和品牌语气上偶尔使用。

The fifth, fantasy, is best avoided. For body text, choose one of the first two. Most modern UIs are sans-serif, but a well-set serif (Source Serif, Lora, Charter, Iowan Old Style) can be equally legible and far warmer. The trap is using "Web 2.0" defaults like the original Trebuchet, Verdana, or Tahoma because they "look safe" — they are dated, and there are better-designed options today.

第五种 fantasy 最好避免。正文只用前两种之一。多数现代 UI 选无衬线体，但设置得当的衬线体（Source Serif、Lora、Charter、Iowan Old Style）同样可读，且更有温度。一个常见陷阱是"Web 2.0 时代默认" —— 早期的 Trebuchet、Verdana、Tahoma，因为"看起来保险"而继续使用；它们已经过时，今天有更好的设计选择。

Decision 2: size scale

决定二：字号阶梯

A type scale is a sequence of font sizes that relate to each other by a fixed ratio. Five ratios cover 95% of web needs: 1.2 (minor second, gentle), 1.25 (major third, common in compact UIs), 1.333 (perfect fourth, the most popular choice), 1.414 (augmented fourth, dramatic), and 1.5 (perfect fifth, very dramatic). Pick one and use it consistently.

字号阶梯是按一个固定比例相互关联的一组字号。五个比例就能覆盖 95% 的 Web 场景：1.2（小二度，温和）、1.25（大三度，紧凑 UI 常见）、1.333（纯四度，最流行）、1.414（增四度，戏剧感强）、1.5（纯五度，非常戏剧）。选一个，并保持一致。

With 1.333 and a 16-px body, the scale is: 16 (body), 21, 28, 37, 50, 67 (display). That is six sizes — enough for almost any interface. The advantage of a scale is that contrast between sizes is regular. A 21-px heading and a 28-px heading feel related; a 16-px body and a 28-px heading feel distinct. Without a scale, designers pick arbitrary values and the result feels accidental even when it is not.

用 1.333、正文 16 像素时，阶梯为：16（正文）、21、28、37、50、67（展示）。六个尺寸 —— 足够几乎任何界面。比例的价值在于：不同尺寸之间的"对比"是有规律的。21 像素标题与 28 像素标题感觉相关；16 像素正文与 28 像素标题感觉有别。没有比例，设计师会挑出随意的值，结果即便不是"随便"，也会让人感觉"随便"。

Decision 3: line-height, line length, and spacing

决定三：行高、行长、间距

Line-height for body text should sit between 1.4 and 1.6 of the font size; 1.5 is a safe default and the value cited in WCAG for readability. Headings want tighter leading (1.1–1.3) because the line is already visually tall. The interaction with font size matters: a 16-px line at 1.5 leading is 24 px; a 48-px line at 1.1 leading is 53 px — that scale makes sense and stays in the 8-pt grid.

正文的行高应在字号的 1.4 到 1.6 倍之间；1.5 是稳妥默认值，也是 WCAG 在可读性上推荐的值。标题需要更紧的行距（1.1–1.3），因为视觉行高本身已经很高。行高与字号的交互值得注意：16 像素文字乘以 1.5 行距等于 24 像素；48 像素标题乘以 1.1 行距等于 53 像素 —— 这种比例自然落在八点网格上。

Line length is the most underrated typographic decision on the web. The classic measure is 60–75 characters per line for body text in a serif, and 50–70 for sans-serif on screens. Anything longer and the eye loses its place returning to the start of the next line. Anything shorter and the page fragments into a staccato of short lines. The single most effective change to a hard-to-read blog post is usually to narrow the content column, not to enlarge the text.

行长是 Web 排版里最被低估的决策。经典度量是衬线体正文每行 60–75 个字符，屏幕上的无衬线体每行 50–70。更长，眼睛回到下一行起点时会丢失位置；更短，页面会碎成一连串短促的短行。改善难读博客最有效的办法，往往是把内容栏变窄，而不是把字号调大。

Spacing — paragraph margins, list indentation, the gap between a heading and what follows — is the fourth decision. Two paragraphs separated by a blank line read as a continuous flow; separated by indented first lines and tighter spacing, they read as a single document. The choice is rhetorical as well as visual. Most modern interfaces favor whitespace separators over first-line indents because they scan better on screens.

间距 —— 段间距、列表缩进、标题与下文之间的空隙 —— 是第四个决定。两个段落之间用空行分隔，读起来是连续的流动；用首行缩进和更紧的间距，读起来是一份文档。这种选择既是修辞上的，也是视觉上的。现代界面更倾向用"空白分隔"而非"首行缩进"，因为屏幕上的扫读体验更好。

Decision 4: color and contrast

决定四：颜色与对比度

Type on a screen needs a minimum contrast ratio to be readable: 4.5:1 for body text (WCAG AA), 3:1 for large text (above ~18 px regular or 14 px bold). Anything below that, and users with low vision, glare, bright sunlight, or aging eyes will struggle. A surprising number of "soft gray on white" designs fail this test without anyone noticing — until the readers do.

屏幕上的文字需要最小对比度才能阅读：正文 4.5:1（WCAG AA），大号文字（18 像素以上常规字重或 14 像素以上粗体）3:1。低于这个比例，低视力、强光、阳光直射或视力衰退的用户就会读得吃力。大量"浅灰配白"的界面默默达不到这个标准 —— 直到读者自己察觉。

Pure black (#000) on pure white (#FFF) is too contrasty for long reading — the slight halation of bright pixels against dark pixels tires the eye. Most professional designs use a "near-black" (something like #1a1a1a or #222) on a "near-white" (#fafafa or #fff). The result is just as crisp on screen, gentler to read, and friendlier in dark mode. Pair this with a body color (often a desaturated dark blue or warm gray) and an accent for links, and you have a system.

纯黑（#000）配纯白（#FFF）对长文阅读来说对比过强 —— 亮像素与暗像素之间的轻微光晕会累眼睛。多数专业设计采用"近黑"（类似 #1a1a1a 或 #222）配"近白"（#fafafa 或 #fff）。屏幕上同样清晰，更柔和，在暗色模式下也更友好。再配一种正文色（通常是一种去饱和的深蓝或暖灰）和一种链接强调色，你就拥有了一套系统。

Decision 5: system fonts vs webfonts

决定五：系统字体 vs Web 字体

System fonts (the ones already on the user's device) are free, instant, and perfectly tuned to the OS. Apple publishes San Francisco, Google publishes Roboto and Noto, Microsoft publishes Segoe UI. Using font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; gives you a clean, native feel with no network request at all. The downside is no consistent brand expression across platforms.

系统字体（用户设备上自带的字体）免费、即时、与操作系统完美适配。苹果有 San Francisco，谷歌有 Roboto 和 Noto，微软有 Segoe UI。用 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 可以获得干净、原生的观感，完全不发起网络请求。代价是跨平台没有统一的品牌表达。

Webfonts let you express a brand, but introduce tradeoffs. The first is the loading experience: FOIT (Flash of Invisible Text — text is hidden until the font loads) is bad for perceived performance; FOUT (Flash of Unstyled Text — fallback font shows first, then swaps) is better but causes a reflow. FOFT (Flash of Faux Text — fallback is sized to match the webfont's metrics) is the modern best practice. font-display: swap in your @font-face rule triggers this behavior.

Web 字体让你能表达品牌，但也带来权衡。第一个是加载体验：FOIT（无样式文字闪烁 —— 文字在字体加载完前不可见）会损害感知性能；FOUT（无样式文字闪烁 —— 先用后备字体，再切换）好一些，但会导致回流；FOFT（伪文字闪烁 —— 把后备字体调整到与 Web 字体度量接近）是现代的最佳实践。在 @font-face 规则中加 font-display: swap 就能触发这种行为。

The second tradeoff is privacy and performance. Google Fonts, the most popular service, makes a network request to Google for every page view — a privacy concern in some jurisdictions, a performance concern on slow networks. Self-hosting the font files (downloading them, putting them on your own CDN, serving them with Access-Control-Allow-Origin) eliminates both. Variable fonts (single file that contains a continuous range of weights, widths, and other axes) are an even better modern approach: one file replaces five or six static files, with smaller total payload and finer control.

第二个权衡是隐私与性能。最流行的 Google Fonts 每次页面访问都会向 Google 发起请求 —— 在某些司法管辖区是隐私问题，在慢速网络下是性能问题。自托管字体文件（下载下来放到自己的 CDN，配上 Access-Control-Allow-Origin）同时解决这两个问题。可变字体（一个文件包含连续的多种字重、字宽等坐标轴）则是更现代的方案：一个文件替代五到六个静态文件，总体积更小，控制更精细。

Decision 6: pairing and testing

决定六：搭配与测试

Pairing two typefaces is one of the hardest design decisions and one of the most formulaic. The rule is simple: contrast plus harmony. Pair a serif with a sans-serif (Charter for body, Inter for UI). Pair a humanist with a geometric (Source Serif with Futura). Never pair two serifs that look similar (Garamond with Caslon) — the eye cannot tell them apart and the result feels accidentally mismatched. Never pair the same family in two weights and call it a "system" — that is not contrast, that is just one typeface.

搭配两种字体是最难的设计决定之一，也是最套路化的之一。规则很简单：对比加和谐。衬线配无衬线（正文 Charter，UI Inter），人文体配几何体（Source Serif 配 Futura）。千万不要用两种看起来相似的衬线（Garamond 配 Caslon）—— 眼睛分不出它们，结果会显得"不小心撞上"。也千万不要把同一字族的两种字重当成"系统" —— 那不是对比，那只是一种字体。

Test in the browser, not the design file. The web is where the type lives, and the web has its own constraints: subpixel rendering, font fallback, OS-specific metrics. Extensions like WhatFont and Fontface Ninja let you identify any font on any page. Cross-browser testing tools — Browserling, BrowserStack, LambdaTest — let you confirm a typeface loads and renders correctly on Windows, macOS, Linux, iOS, and Android. What looks elegant on a 5K display with Inter installed may render as a different face entirely on a budget Android with a stale system font.

在浏览器里测试，而不是设计文件里。Web 才是字体真正生活的地方，Web 有它自己的约束：子像素渲染、字体回退、操作系统特有的度量。WhatFont、Fontface Ninja 之类的扩展能让你识别任何页面上的字体。跨浏览器测试工具 —— Browserling、BrowserStack、LambdaTest —— 让你确认字体在 Windows、macOS、Linux、iOS、Android 上都能正确加载和渲染。在 5K 显示器上、本就装着 Inter 的机器上看起来优雅的字体，在一台过时的预算 Android 上，可能会渲染成完全不同的脸。

Finally, accessibility. The single biggest improvement to readability for users with dyslexia is line-height of 1.5, slightly looser letter-spacing, and avoiding justified text (which creates uneven word spacing). WCAG 2.2 also now asks for text spacing overrides to be respected: if a user increases line-height, letter-spacing, word-spacing, or paragraph spacing via user styles, your layout should not break. Test with the browser's "Accessibility > Text Size" tools and with tools like ANDI or Axe DevTools.

最后是无障碍。对阅读障碍用户来说，可读性最大的提升是 1.5 倍行高、稍宽的字距，以及避免两端对齐（会产生不均匀的词距）。WCAG 2.2 还要求尊重用户的文字间距覆盖：如果用户通过自定义样式增大行高、字距、词距或段间距，你的布局不应该因此崩溃。用浏览器的"无障碍 > 文字大小"工具和 ANDI、Axe DevTools 等工具来测试。

Try the tools

试试这些工具

Test color contrast for your type with the color picker. Preview body text at different cases and tracking with the text case tool. See how a line will fit in a column with the word counter. Everything runs in your browser; no upload, no tracking.

用颜色选择器测试文字的对比度；用文本大小写工具预览不同大小写与字距下的正文；用字数统计看一行在栏宽里能容纳多少字。所有处理都在你的浏览器中完成，不上传、不追踪。