taste-typography

taste-typography

字体是人们最先注意到、最后才能说出名字的东西。这项技能确保字体真正承担起设计的职责。

1. 字体搭配（最多两种字体，各有目的）

选择两种结构上形成对比的字体——绝不要选两种相似的字体：

展示字体	正文字体	适用场景
有个性的衬线体（Fraunces、Newsreader）	中性无衬线体，或同一款衬线体	编辑风格、奢华、沉静
粗重的 grotesk 字体（Archivo、Bricolage）	同一字体，字重为 400	大胆、活泼、粗野主义
中性的 grotesk 字体（Space Grotesk、system）	同一字体	暗色科技风、开发者工具
等宽字体（仅用于标签／元数据）	Grotesk 正文字体	技术、终端

• 三种字体就是一锅杂烩。一种中性无衬线字体就是模板。
• 等宽字体是标签的语气，不是正文的语气。等宽字体仅适用于数据表和终端中的正文。
• 如果品牌指定了字体，就围绕它进行搭配——第二种字体应来自同一类别（同一位设计师设计的衬线体和无衬线体是稳妥的搭配）。

2. 字号阶梯（两套阶梯，始终如一地应用）

展示字号阶梯（营销页面、主视觉）：64 / 48 / 32 / 24 / 18 / 16 — 使用 clamp() 实现流动字号：clamp(2rem, 5vw, 4rem)。

UI 字号阶梯（产品、仪表板）：13 / 14 / 15 / 16 / 20 / 24 — UI 界面中字号不得小于 12px，也不得大于 24px。

层级规则：

• 每个版块只用一种展示字号。如果页面上两个标题一样大，那它们都不算标题。
• 字重：展示文本使用一种字重（体现字体的自然风格：衬线体用 400，grotesk 字体用 700–900），正文用 400，强调用 500–600。每页最多使用三种字重。
• 小字号（≤ 12px）必须搭配 ≥ 0.02em 的 letter-spacing，否则渲染会显得模糊；但除非数据表场景有充分理由，否则字号不得小于 10px。

3. 字宽、行距、节奏（具体数值）

• **行长：**正文每行 45–75 个字符。主视觉副标题每行 ≤ 40 个字符，标题每行 ≤ 24 个字符（主动提前换行，而不是碰运气）。
• **行距：**标题为 0.95–1.08（衬线体取低值），正文为 1.55–1.7，标签为 1.2–1.4。
• **字距：**全大写标签为 0.08–0.2em；小写展示文本为 −0.02em；正文为 0。除非是刻意采用的编辑风格，否则 16px 以上的小写正文绝不应用字距调整。
• **垂直节奏：**所有文本块都对齐到 4px 基线网格。如拿不准，line-height 设为 4 的倍数：20/24/28/32px。
• **段落：**营销文案中每段最多约 3 行。卡片里出现 6 行段落，说明是布局失败，而不是文案失败。

4. 文本布局（让人感觉“经过设计”的细节）

• 正文绝不铺满整行——将文本限制在 32–40em 宽的栏中，宽屏上也不例外（尤其如此）。
• **有意安排标题换行：**在重要位置通过手动分行控制词语换行（“准确了解 / 用户的行为”）。
• **标题 + 副标题 + 正文段落：**每一层的字号和字重都应明显减小，而不只是其中一项。
• 禁止两端对齐，但带连字符、每行 ≥ 60 个字符的印刷风格编辑栏除外。其他场景一律左对齐。
• **参差边缘很重要：**标题不得出现孤行（末行只有一个词）——通过调整分行或字号解决。
• **伪造样式：**不得伪造斜体（使用该字体真正的斜体字形），不得伪造粗体（仅提供 400 字重的字体绝不使用 font-weight: 700）。
• **流动字号：**所有文本都使用带 rem 的 clamp()，而不是 px。未设置 rem 最小值时绝不使用 vw 单位。

5. 无障碍底线（不可妥协）

• 营销页面的正文字号 ≥ 16px，UI 中 ≥ 14px；小于此值时，仅元数据可以使用，且对比度须达到 4.5:1。
• 所有正文的对比度 ≥ 4.5:1，大号展示文本（≥ 24px／粗体 ≥ 18.66px）的对比度 ≥ 3:1。
• 展示文本使用 text-rendering: optimizeLegibility；不得使用 -webkit-text-stroke（小字号下会出问题）。
• 字体加载：使用 font-display: swap；预加载展示字体；绝不让文本在等待字体时保持不可见。

6. 检查清单（出现以下情况时页面不合格……）

• 全部工作都使用同一种中性字体。
• 使用的字体系列超过两种。
• 标题小于 20px，旁边的正文却是 16px（没有层级）。
• 正文宽度超过 75 个字符。
• 出现小于 10px 的文字。
• 使用的字重超过三种。
• 卡片或侧边栏内有 6 行的段落。
• 未提供断字支持却使用两端对齐的文本。

如果排版得当，人们会说这个网站“很有质感”，却说不出原因。这就是目标。