# 字体系统硬规则

> 字号、字重、行高、字距全是数字——没有"审美讨论"，只有**尺度选择**。

---

## 一、模块化字号比例尺（Modular Scale）

所有字号从**一个基础**（base）按固定比例推导。不允许随手拍脑袋。

| 比例 | 名字 | 比值 | 适合 |
|------|------|------|------|
| Minor Second | 小二度 | 1.067 | 超保守，信息密度高 |
| Major Second | 大二度 | 1.125 | 正文内容为主 |
| Minor Third | 小三度 | 1.2 | 常规网页 |
| **Major Third** | **大三度** | **1.25** | **⭐ 默认推荐** |
| **Perfect Fourth** | **纯四度** | **1.333** | **⭐ 展示类（落地页/幻灯片）** |
| Augmented Fourth | 增四度 | 1.414 | 对比强 |
| Perfect Fifth | 纯五度 | 1.5 | 戏剧性 |
| Golden Ratio | 黄金比 | 1.618 | 大标题视觉冲击 |

### 推荐默认（Perfect Fourth, base = 16px）

```css
:root {
  --text-xs:  10px;   /* 辅助 */
  --text-sm:  12px;   /* 标签 */
  --text-base: 16px;  /* 正文 */
  --text-lg:  21px;   /* 段落强调 */
  --text-xl:  28px;   /* 小标题 */
  --text-2xl: 37px;   /* 二级标题 */
  --text-3xl: 50px;   /* 一级标题 */
  --text-4xl: 66px;   /* Hero */
  --text-5xl: 88px;   /* 超大 Hero */
}
```

> 选一个比例，**整个项目都用它**。不要 1.2 和 1.5 混用。

---

## 二、字重层级（只用 2–3 档）

| 角色 | 推荐字重 |
|------|---------|
| 正文 | 400（Regular） |
| 强调 | 500（Medium）或 600（SemiBold） |
| 标题 | 600–700 |
| Display（超大标题） | 700–900 |

**禁止**：同一页面出现 300/400/500/600/700 全档 → 视觉失控。

---

## 三、行高（line-height）

| 场景 | 推荐行高 |
|------|---------|
| 正文段落 | **1.5–1.7** |
| UI 组件（按钮/表单） | 1.2–1.4 |
| 小标题 | 1.2–1.35 |
| 大标题 / Display | 1.0–1.15 |
| 中英混排 | +0.1（比纯英文多 10%） |

规则：**字越小，行高越高；字越大，行高越低。**

---

## 四、字距（letter-spacing）

| 场景 | 推荐 |
|------|------|
| 大标题 | **-0.02em ~ -0.03em**（负值紧凑） |
| 正文 | 0（默认） |
| 小号全大写（ALL CAPS） | +0.05em ~ +0.1em |
| 中文 | 默认 0；极小字（≤10px）可 +0.02em |

---

## 五、字体组合法则

### 成功的组合模式

| 正文 | 标题 | 效果 |
|------|------|------|
| Sans-serif | Serif | 经典编辑类（New Yorker） |
| Serif | Sans-serif | 现代权威（FT） |
| Sans-serif | 同族 Display | 简洁品牌（Stripe） |
| Serif | 同族 Bold | 文学质感 |
| 中文黑体 | 中文宋体 | 内容性强 |

### 失败模式

- ❌ Serif + 另一种 Serif（视觉打架）
- ❌ Sans + 另一种 Sans（除非是同家族的 display 变体）
- ❌ 三种字体家族混用（超过 2 个就开始糊）

---

## 六、推荐字体栈（避开 AI slop）

### 英文

| 场景 | 推荐 |
|------|-----|
| 编辑 / 故事 | GT Alpina, Tiempos Text, Söhne, Untitled Sans |
| 科技 / 工具 | Suisse Int'l, Neue Haas Grotesk, Inter Display（不是 Inter） |
| 艺术 / 情绪 | PP Editorial New, Reckless, Authentic Sans |
| Monospace 点缀 | JetBrains Mono, Berkeley Mono, IBM Plex Mono |

### 中文

| 场景 | 推荐 |
|------|-----|
| 正文阅读 | 思源宋体（Noto Serif SC）、方正宋三 |
| 品牌标题 | 思源黑体 Heavy、AaHeiTi 系列、鸿雷板报体 |
| 手账 / 情绪 | 鸿雷系列、字魂家族的书法体 |

### 禁用清单（AI slop）

- ❌ Inter（过度使用）
- ❌ Roboto（Android 默认）
- ❌ Arial / Helvetica（无特征）
- ❌ system-ui（除非刻意） 
- ❌ Pacifico / Comic Sans（儿戏）

---

## 七、Fallback 栈写法

```css
font-family:
  'Suisse Int\'l',              /* 付费字体 */
  'Neue Haas Grotesk Text Pro', /* 备胎 1 */
  -apple-system, BlinkMacSystemFont,
  'Segoe UI', system-ui,         /* 系统最终 fallback */
  sans-serif;
```

规则：从**付费字体** → **免费字体** → **系统字体** → **通用 sans/serif**。