字体排印是内容的"声音"——同样的文字，字号、行高、字距不同，读起来的气质完全不一样。很多新手把排版当成"选个字体"，却忽略了字号阶、行高、字距这些更影响阅读的变量。这一节我们把排印拆成字号阶、行高、字距、对比、中英文混排五个维度，每个都给出可落地的 CSS。

字号阶

字号阶（type scale）是排版的骨架。随手给标题定 24 像素、正文 14 像素，看着没问题，但一放到多级标题里就会乱。正确做法是用一个固定的比例（如 1.25 大三度）生成阶，让 h1 到 body 之间形成匀速递减。尧图用的是 12、14、16、18、22、30、42 这一组，相邻字号比例约 1.2 到 1.4，既区分明显又不过度跳跃。

:root {
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-base: 16px;
  --fs-lg:  18px;
  --fs-xl:  22px;
  --fs-2xl: 30px;
  --fs-3xl: 42px;
}
h1 { font-size: var(--fs-3xl); line-height: 1.3; }
h2 { font-size: var(--fs-2xl); line-height: 1.35; }
h3 { font-size: var(--fs-xl);  line-height: 1.4; }
p  { font-size: var(--fs-base); line-height: 1.8; }

行高

行高是阅读舒适度的关键。正文行高 1.7 到 1.9 最舒服，行距太窄眼睛会跳行，太宽则失去成行感。标题行高要收紧到 1.2 到 1.4，因为字号大、行距自然显宽。长文阅读可以放到 2.0，但短标签和按钮文字行高 1.2 到 1.5 就够，否则按钮会被撑高。一个简单的原则：字号越大，行高越小。

.body-text { line-height: 1.8; }
.long-read { line-height: 2; }
.caption   { line-height: 1.5; }
h1, h2, h3 { line-height: 1.35; }

字距

字距（letter-spacing）是最容易被忽略的细节。中文正文一般不加字距，但大号标题加 0.5 到 1 像素会更透气；英文小写标签加大字距（2 到 3 像素）并配合 uppercase，是经典的"小标签"质感。字距别加太多，否则字与字之间像断了联系。尧图的小标签 eyebrow 就是用 3 像素字距加 uppercase 营造出精致感。

h1 { letter-spacing: 0.5px; }
.eyebrow {
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 12px;
}

对比

对比不只是颜色深浅，还包括字号、字重、字距的组合。标题用大字号加重字重加紧字距，正文用小字号加常规字重加标准行高，两者自然形成层级。一个常见错误是把所有文字都用同一字重，只靠字号区分——结果层级模糊，用户扫描吃力。给标题加 font-weight 700，正文 400，辅助文字 500，层级立刻清晰。

• 标题 700、正文 400、辅助 500，字重也要分层。
• 正文颜色不要用纯黑 #000，用 #2A3328 这种带绿调的墨色更柔和。
• 辅助文字用 muted 灰，但对比度别低于 4.5:1。
• 字号、字重、颜色三者协同，层级才稳。

中英文混排

中文页面几乎必然混排英文和数字。中文用 PingFang SC，英文和数字最好落到 Helvetica Neue 或等宽字体，否则英文会显得"糊"。字体栈里把中文字体放后面、英文放前面，浏览器会优先用英文字体渲染拉丁字符，中文回退到中文字体。等宽代码用 SF Mono 或 Fira Code，与正文拉开区分。

body {
  font-family: "PingFang SC", "Microsoft YaHei",
               "Helvetica Neue", Arial, sans-serif;
}
code, pre {
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  font-size: 0.92em;
}