字体与排版

是什么

排版决定页面的「质感」。同样一个页面，字号阶梯清晰、行高舒适、行宽克制，看起来就专业；反之再好的配色也救不回来。好消息：排版是最容易规则化的设计能力。

字号阶梯（用比例，不拍脑袋）

定一个基准字号（网页正文通常 16px），乘固定比例得到整套阶梯。推荐 1.25（大三度）：

层级	计算	结果	用途
xs	16 ÷ 1.25	12.8 ≈ 13px	辅助说明、时间戳
sm	14px	固定	次要文字、标签
base	16px	16px	正文
lg	16 × 1.25	20px	小标题
xl	16 × 1.25²	25px	标题
2xl	16 × 1.25³	31px	页面主标题

:root {
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5625rem;
  --text-2xl: 1.9531rem;
}

阶梯之间要「跳级」用

标题用 xl 就别用 lg——相邻两级放一起等于没层级。层级感来自明显的跳跃。

行高与行宽

• 正文行高 1.6-1.75，中文取偏大值（汉字方块感强，需要更多呼吸空间）；标题 1.2-1.3
• 每行 30-45 个汉字。太长眼睛找不到下一行开头，太短频繁换行累

.prose {
  font-size: 1rem;
  line-height: 1.75;
  max-width: 42em; /* 约 40 个汉字 */
}

字重：最多两种

只用 regular（400） 和 bold（600/700）。medium/semibold/light 混着用会让页面发糊。层级靠字号和颜色深浅做，不靠加字重档位。

中文字体栈

不要引 webfont（中文字体动辄几 MB），用系统字体栈就够：

font-family:
  -apple-system, BlinkMacSystemFont, 'Segoe UI',
  'PingFang SC',        /* macOS 中文 */
  'Hiragino Sans GB',   /* macOS 旧版 */
  'Microsoft YaHei',    /* Windows 中文 */
  sans-serif;

代码用等宽字体栈：Consolas, 'JetBrains Mono', monospace。

数字与表格的对齐

数字列表、金额、表格数值列用等宽数字，个位才能对齐：

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

排版自查清单

• 字号种类 ≤ 6 级，且都来自同一个比例阶梯？
• 正文行高 ≥ 1.6，行宽 ≤ 45 字？
• 字重只有 regular 和 bold 两种？
• 没有引中文 webfont？
• 表格里的数字开了 tabular-nums？