一次安静的排版实验

让字体回到它该在的位置

写给每一个相信字体是有温度的人。

一、缘起

每一种排版都是一种立场。衬线传递沉稳，无衬线宣告效率，楷体留出呼吸，等宽体提示精确。选择排版，其实是在选择与读者说话的语气。

这篇稿件尝试把 十余种语气 放在同一段文字上。你会看到同一句话被不同的字体、不同的节奏、不同的空气托住，读出完全不同的意思。

好的排版不是装饰，而是一种让内容更容易被理解的谦逊。

1.1 写作者的三重善意

段落之间的留白，是给思考留出的停顿。过密则仓促，过疏则涣散。一个合适的行高、一次恰当的换气、一处恰到好处的强调，都是写作者对读者的 善意。

层级来自对比：字号、字重、色彩、方向。比如 line-height 与段落距离的差，就是一种轻声的暗示——告诉读者「这里是同一段」或「这里是新一段」。

1.1.1 一个更细的分节

四级标题通常用于规范文档、接口清单或长篇论述中的次级小节。它应当比三级标题更克制，不抢风头，但仍然明确。

二、正文与节奏

我们常说「排版好看」，但很少追问它究竟在做什么。

排版的价值，在于它让读者忘了自己在阅读排版。它不该被看见，却必须被感受——像一盏合适的灯，像一把贴合身体的椅子，像一段恰好与你同频的呼吸。

试着读读下面这段话，感受一下 斜体 在中文里的气息变化：

我所谓的排版之美，从不在字形之上，而在字与字之间、行与行之间、意与意之间——那些几乎看不见的距离。

2.1 引用的几种可能

引用不一定要隆重，它可以只是一个轻声的侧注：

排版不是艺术，是手艺。——Matthew Carter

也可以是一个多段的故事：

上世纪八十年代初，一位年轻的设计师在剑桥的雨夜里改了整整一版字稿。

他说：「我只是想让它读起来更安静。」

三、代码与技术细节

3.1 行内代码

工程向的文字经常混入代码，比如我们会写「请把 line-height 调到 1.7」或者「使用 PingFang SC 作为默认中文字体」。行内代码要与正文区分，但不该喧宾夺主。

3.2 代码块

下面是一段 JavaScript，用来演示深色 / 浅色代码块的对比效果：

function render(article, template) {
  const body = template.layout(article);
  return body
    .trim()
    .replace(/\s+/g, ' ')
    .padStart(20, '·');
}

// 使用
const html = render(post, templates.mingchuang);
console.log(html);

再来一段更短的 CSS 片段，展示代码块在不同配色下的观感：

.article h2 {
  font-family: "Source Han Serif SC", serif;
  letter-spacing: 0.02em;
  border-bottom: 1px solid currentColor;
}

四、清单与结构

4.1 无序列表

在这份排版练习中，我们关注的核心维度是：

• 字体：衬线 / 无衬线 / 楷体 / 等宽
• 节奏：行高、字距、段距、留白
• 层级：一到四级标题的辨识度
• 强调：加粗、斜体、高亮、行内代码
• 引用：左竖条、卡片、居中楷体
• 装饰：分割线、列表符号、引号
• 视觉密度：页面宽度与段落长度的关系

4.2 有序列表

一个标准的公众号长文写作流程，通常包含以下步骤：

1. 立意：确定文章要让读者带走什么
2. 骨架：用三到五个二级标题搭出节奏
3. 草稿：不求字字精准，先把气顺下来
4. 引用：查找可以支撑立场的外部声音
5. 节奏：放一夜之后，朗读全文，修掉啰嗦
6. 排版：选择合适的模板与强调方式
7. 发布：在预览模式下再读一遍标题

五、数据与表格

有时候信息需要被整齐地排列，而不是被散文托着。这时候就该交给表格了。

右对齐适合数字，左对齐适合文本，居中通常只留给标题：

六、链接与引用来源

写作离不开对前人的引用。完整的署名是一种礼貌：

• Butterick · Practical Typography
• The Elements of Typographic Style, R. Bringhurst
• 小林章《西文字体》 —— 写给中文读者的入门经典

七、结语

愿你用合适的声音，说出合适的话。

排版不是装饰，它是写作的一部分。当你开始为每一次换行、每一处强调负责，你就已经在用自己的方式，尊重正在读你的那个人。

这是一份演示稿，覆盖标题、段落、强调、引用、代码、列表、表格、图片、链接和分割线，便于在样式调节面板中实时预览各项效果。