字体比例尺：我如何选择13个层级以及比率为何重要

Robert Bringhurst的《The Elements of Typographic Style》确立了一个观点：和谐的字体关系遵循与音乐相同的数学比率——纯四度（1.333）、纯五度（1.5）和黄金比例（1.618）。我从纯四度开始，最终得到了一个任何标准比率都无法生成的自定义递进方案——因为我的内容结构需要在正文与展示标题之间有特定的层级间距。¹

TL;DR

字体比例尺通过基础字号和数学比率生成一套字号层级体系。在为blakecrosley.com构建排版系统之后——13个层级，从0.75rem（12px）到5rem（80px），完全使用系统字体——我认识到比率本身不如正文与H1之间的层级间距重要。我的比例尺在相邻层级之间大致使用1.18的递进比率，但在内容结构需要视觉分隔的地方会做出刻意的跳跃（从3.875rem到5rem）。下面的交互式对比展示了严格比率与内容驱动调整之间的差异。

我的字体比例尺：13个层级

以下是我网站critical.css中的实际比例尺：

:root {
  --font-size-xs:      0.75rem;   /* 12px — metadata, timestamps */
  --font-size-sm:      0.875rem;  /* 14px — captions, fine print */
  --font-size-base:    1rem;      /* 16px — body text, default */
  --font-size-lg:      1.125rem;  /* 18px — lead paragraphs */
  --font-size-xl:      1.3125rem; /* 21px — large body, section intro */
  --font-size-2xl:     1.5625rem; /* 25px — H4, card titles */
  --font-size-3xl:     1.875rem;  /* 30px — H3 */
  --font-size-4xl:     2.25rem;   /* 36px — H2 */
  --font-size-5xl:     2.7rem;    /* 43.2px — H1 */
  --font-size-6xl:     3.25rem;   /* 52px — large H1 */
  --font-size-7xl:     3.875rem;  /* 62px — page title */
  --font-size-display: 5rem;      /* 80px — hero headline */
}

相邻层级之间的递进并非严格的数学比率。从xs到xl的层级大致遵循1.17-1.18倍。从5xl到display的层级跳跃更为激进（1.20-1.29倍），因为主视觉标题需要与页面级标题形成视觉分隔。²

为何不使用严格比率？

以16px为基础的严格大三度比率（1.25）会产生以下层级：16、20、25、31.25、39.06、48.83、61.04。从正文（16px）到H3（31.25px）的跳跃接近2倍——对于H3频繁出现的内容密集页面来说过于夸张。我的比例尺压缩了中间范围（18、21、25、30、36），使标题与正文保持适当比例，同时扩展了顶部范围（43、52、62、80）以满足展示排版的需求。

是内容结构驱动了比例尺，而非数学公式。我针对真实博客文章内容测试了每一个层级，并在斜视测试失败的地方调整了字号。³

为何选择系统字体

我的字体栈：

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

性能论据

系统字体的加载时间为零毫秒。无需网络请求，没有FOIT（不可见文本闪烁），没有FOUT（无样式文本闪烁）。这一选择为我的Lighthouse满分100做出了贡献。

自定义网络字体通常会因字体文件下载和浏览器渲染决策而增加100-300毫秒的首次内容绘制时间。Google Fonts从CDN加载（至少需要一次DNS查询加一次HTTP请求）。自托管字体消除了DNS查询但仍需下载。系统字体消除了字体加载延迟的所有环节。⁴

设计论据

系统字体与平台保持一致。在macOS上，我的网站使用SF Pro渲染——与macOS系统界面、Apple Mail和Safari浏览器界面使用的字体相同。操作系统与网站之间的视觉连贯性让体验感觉原生，而非品牌化。

Linear、Vercel和Raycast采用了相同的策略。这一模式源于我的16个产品设计研究：优先考虑内容可读性而非品牌表达的产品往往使用系统字体。

何时值得使用自定义字体

自定义字体适用于营销页面、品牌标识和展示排版——在这些场景中，字体本身就是设计。我的网站以内容为先（博客文章、项目描述），排版应该是透明的——读者应该专注于处理内容，而非注意到字体。

字重体系

四种字重满足所有层级需求：

:root {
  --font-weight-normal:   400;  /* Body text */
  --font-weight-medium:   500;  /* Navigation, labels */
  --font-weight-semibold: 600;  /* Subheadings, emphasis */
  --font-weight-bold:     700;  /* Headlines, primary actions */
}

结合13个字号层级和四个透明度层级，我拥有208种潜在组合（13种字号 × 4种字重 × 4种透明度）。实际上，我始终只使用大约15种组合。该系统提供了灵活性，而无需在每个文本实例上都做出决策——大多数文本使用base字号、normal字重、primary透明度。⁵

响应式排版

单一比率的问题

为桌面端设计的字体比例尺会在移动端产生过大的标题。我的display字号80px在1440px视口中效果优美，但在375px的手机屏幕上则显得压迫。我没有使用视口单位缩放整个系统，而是覆盖特定断点：

@media (max-width: 1024px) {
  .hero__title { font-size: var(--font-size-6xl); }  /* 52px */
}

@media (max-width: 768px) {
  .hero__title { font-size: var(--font-size-3xl); }  /* 30px */
}

正文在所有视口中保持16px——正文不需要缩放，因为16px在每个现代屏幕上都保持可读。只有展示字号和标题字号在较小视口中缩小。这种方法比流式排版（clamp()）更简单，并在已知断点处产生可预测的结果。⁶

展示字号的字母间距

大字号需要更紧凑的字距。在80px时，默认字母间距会在字符之间产生明显的间隙：

.hero__title {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

-0.03em的字母间距和1.05的行高产生紧凑、有冲击力的标题。16px的正文使用默认字母间距和宽松的1.7行高以确保可读性。紧凑标题与疏朗正文之间的对比创造了视觉节奏，无需额外装饰。⁷

排版测试

斜视测试

模糊您的视线或远离屏幕。标题层级在每个级别都应保持视觉上的可区分性。如果H3和H4混在一起，说明对于所选字体而言比率过小。

我对我的比例尺应用了斜视测试，发现--font-size-xl（21px）和--font-size-2xl（25px）最初会模糊在一起。通过增加字重差异（xl使用normal 400，2xl使用semibold 600）解决了区分问题，而无需更改字号。字重可以独立于字号提供层级区分。⁸

内容测试

用真实内容填充每个标题级别。占位文本会掩盖层级问题，因为”Lorem Ipsum”缺乏真实语言的视觉重量变化。我针对我最长的博客文章（汉明纠错码，2000+字，包含H2、H3、H4、代码块、表格和脚注）测试每次比例尺调整。如果比例尺适用于最复杂的内容，那么它适用于一切。

核心要点

对于设计师： - 从16px的基础字号开始，在1.15到1.25之间测试比率并对照真实内容验证；严格的数学比率往往需要在极端值处进行内容驱动的调整 - 在最终确定之前使用斜视测试和内容测试；每个标题级别的视觉区分度比数学纯粹性更重要

对于开发者： - 在:root级别将字体比例尺定义为CSS自定义属性；在整个代码库中引用var(--font-size-*)以防止任意字号的积累 - 在使用自定义网络字体之前考虑系统字体；100-300毫秒的字体加载节省在每次页面加载中累积，且系统字体提供平台原生的可读性 - 对展示字号使用断点覆盖而非流式排版，如果在已知宽度下获得可预测的结果比平滑插值更重要的话

参考文献