一个技术博客最容易被偷工减料的不是内容，是字的排场。代码写多了，会忘记读者读到的第一样东西不是结论，而是字体、间距、明暗——它们在你读到第一个汉字之前，就已经替你把话说完了。
墨栈创刊号回答四个问题：字体从哪里来、间距靠什么统治、颜色敢不敢只用一个、动效如何不喧宾夺主。
第一问：字体从哪里来§
为什么标题是系统无衬线§
标题与正文共用同一套冷中性无衬线栈（Avenir Next / 苹方 / 思源黑体）。不做「文艺衬线标题 + 理性正文」的戏剧对照，是为了让朱红标记与摄影画面先成为视觉主角——字本身退后，成为展墙说明牌。
早期草案曾试过 Fraunces 一类可变衬线体；定稿时拿掉它，是因为中文站点里「个性拉丁标题」往往与系统中文回退打架，也容易抢走墨与朱红的戏。
等宽字体的角色§
正文里的所有「机器语言」——代码、编号、文件路径、日期——归 JetBrains Mono（本地 woff2）。它做三件事：
- 数字等宽，统计栏里的百分比不会左右抖动；
- 字怀宽，小字号下依然可辨；
- 气质冷静，与杂耍般的语法高亮划清界限。
中文字族的回退艺术§
中文不存在可靠的本地 woff2（动辄几 MB 的字重），所以回退链是一门必修课：
--font-display:
"Avenir Next",
"Segoe UI",
"PingFang SC",
"Hiragino Sans GB",
"Source Han Sans SC",
"Noto Sans CJK SC",
"Microsoft YaHei",
system-ui,
sans-serif;原则就一条：标题与正文都走系统无衬线；唯一打包进仓库的字体，是代码用的 JetBrains Mono。字体加载失败时，页面必须依然成立。
第二问：间距靠什么统治§
节奏只认一个单位§
墨栈的节距体系基于 4px 网格，但真正统治页面节奏的是字号的关系，不是像素的倍数。标题用 clamp() 锁定生长区间，要素间距用 em 表达——间距随字号缩放，比例永远成立：
.prose-article {
font-size: 1.02rem;
line-height: 1.95;
}
.prose-article h2 {
margin: 2.7em 0 1.05em;
font-size: clamp(1.45rem, 1.2rem + 1vw, 1.75rem);
}
.prose-article h3 {
margin: 2.2em 0 0.9em;
font-size: 1.28rem;
}Heading 的上边距是下边距的两倍半：空间归属永远是「向下」的，一节文字属于它头顶的标题。
行高是呼吸§
正文 1.95 倍行高在中文里第一眼会觉得「松」。但长文阅读里，松一点意味着眼球换行时少一次定位成本。代码行高 1.78、标题 1.4——三种内容，三种呼吸深度。
| 元素 | 行高 | 字号 | 理由 |
|---|---|---|---|
| 正文 | 1.95 | 1.02rem | 长文换行成本最小化 |
| 标题 | 1.4 | 1.28–1.75rem | 大字不需多余行距 |
| 代码 | 1.78 | 12.5px | 语法高亮需要疏离感 |
| 说明文字 | 1.85 | 0.94rem | 轻声但不出戏 |
第三问：颜色敢不敢只用一个§
主色预算：一种琥珀§
整个站点只有一个主色——琥珀 #f5a83c。它被拆成七个梯度，用在进度、链接、高亮、光晕上；其余颜色全部走中性灰阶。多一个主色，就多一份喧哗。
光，是第二层渐变§
比颜色更高级的是光的预算。墨栈有三处发光：
- 顶部进度条的辉光尾迹；
- 移动端进度圆环的琥珀描边；
- 品牌印章的低饱和琥珀投影。
桌面端的阅读路径不参与这盏灯。它是纸色的折线和一颗圆点，进度靠形状而不是光晕。
它们共享同一色温，像同一盏灯的三个投影。
灰阶与层级：让颜色退后§
灰阶不是「没有颜色」，是一套明度秩序：
--color-paper-100: #ece7da; /* 最高亮文字 */
--color-paper-400: #a49c88; /* 辅助正文 */
--color-paper-700: #5c5545; /* 注解与小字 */
--color-ink-950: #08090b; /* 纸面本身的墨 */纸色偏暖、墨色带蓝，一层微弱的色温差让页面在纯黑之上多出「纸感」。加上一层 5% 不透明度的噪点纹理，屏幕就不再是屏幕，是一张被台灯照着的纸。
第四问：动效如何不喧宾夺主§
缓动曲线是语气§
阅读动效主要用两条曲线：cubic-bezier(0.22, 1, 0.36, 1) 负责「快出慢停」的物理感，线性的 0.14 阻尼负责「永远在追」的诚实感。前者给抽屉和圆环，后者给顶栏进度条。右侧路径另用 cubic-bezier(0.4, 0, 0.2, 1)，300ms 沿折线走到当前标题。
出场的时机：让页面自己长出§
首页的每次进场都带 60–90ms 的节奏差——不是炫技，是视觉引导：kicker 先到，标题随后，正文压轴。阅读路径没有两秒一轮的呼吸节点；路径描边 300ms 走完，抽屉 400ms 落下。超过半秒的，只剩代码预览刷新那下 550ms 的旋转。
舞台灯原则§
让动效照亮内容，而不是照亮自己：一个动画的责任是让人注意到它背后的信息，然后消失。
结语：墨迹未干§
排版不是装饰，是阅读的交通规则。好的版面让读者的眼睛永远在正确的位置着陆，永远不需要为「读到哪了」付认知税。
这四问没有标准答案——无衬线栈可以换成任何端正的系统族，朱红可以换成任何被认真对待的颜色。标准答案只有一个：每一个视觉决定，都要有一个「为什么」。
墨迹未干，下一篇继续。