• 教程
• 文档

排版是网页设计的基石，而排版比例尺（typographic scale）则是一套用数学比例统一字号与行高的方法，它能让标题、正文、注释等元素在尺寸上形成连贯、自然的递进关系。本指南基于 30-seconds-of-code 仓库中的 typographic-scale-basics.md 一文，完整讲解「字体族 + 起始字号 + 缩放比例」三大核心要素的选取思路、黄金比例1.618的向上/向下缩放方法，以及如何用字重（font-weight）补足视觉强调，最终交付一份可直接复制运行的 CSS 实现，并辅以仓库源码与兄弟文章作纵深佐证。

排版比例尺的三个起点

搭建一套排版比例尺并不困难，关键在于先确定三个基础变量：

1. 字体族（font family）：决定整体字形的气质与可读性。
2. 起始字号（starting font size）：正文的基础字号，比例尺中所有其他尺寸都从它派生。
3. 缩放比例（ratio / scaling factor）：相邻层级之间的倍数关系。

原文档给出的经典取值组合是：

• 字体族：Roboto——其丰富的字重（font weights）让同一套字形可以承担标题、正文、强调等不同角色；
• 起始字号：18px——作为正文的舒适阅读尺寸；
• 缩放比例：1.618——即著名的黄金比例（golden ratio）。

黄金比例之所以受欢迎，是因为它天然具备数学上的自洽性：用它的幂次生成的序列（0.618、1.618、2.618、4.236……）在视觉上既差异化明显，又保持着整体协调，不会出现某个层级突兀地「跳出来」。

基础行高：让文本"呼吸"

基于上述取值，比例尺的基石是一个同时设置了font-size与line-height的基础元素：

/* 基础正文 */ font-size: 18px; line-height: 1.618;

关键点在于行高同样使用1.618这个比例值。这带来两个好处：

• 更宽松的行距：文本行与行之间有了更多留白，长段落读起来不累；
• 一致的垂直韵律（vertical rhythm）：行高与字号同源同比例，页面上每一行占据的垂直空间彼此相关，形成稳定的节奏感。

值得注意的是，这里的line-height: 1.618是一个无单位值。为什么应该使用无单位行高？仓库中的 unitless-line-height.md 给出了底层解释：line-height是继承属性，无单位值会以「倍数」的形式被继承，浏览器会针对每个元素自身的font-size重新计算实际行高；而带单位（如1.5em）的取值只计算一次，然后以固定值被继承。一旦基础行高声明在body这类祖先元素上，两种写法的差异会被无限放大。因此，把基础line-height定义为无单位值，既能最小化重复，又能保证每个字号层级都获得成比例的行距。

向上缩放：生成标题层级

确定基础值后，接下来就是把比例应用到字号上，向上或向下缩放。向上缩放即乘以1.618的若干次幂，用于生成视觉上更重要的元素：

可以看到，1.618的二次幂约等于2.618，三次幂约等于4.236，这些数值正是后文 CSS 示例中2.618rem、4.236rem的来源——它们是黄金比例的连续幂次，而不是随意取的值。

向下缩放：弱化次要元素

与向上缩放相对，向下缩放就是除以比例值，用于降低元素的视觉重要性。原文档给出的例子是脚注（footnotes）：

18px ÷ 1.618 ≈ 11px

1/1.618 ≈ 0.618，这正是后文示例中0.618rem的来源。这种小一号的字号把脚注、批注、版权信息等内容从正文中「退后」一步，读者扫视时能立刻分辨主次。

用字重补足视觉强调

单纯靠字号缩放，有些元素的视觉分量可能仍然不够。此时可以借助**字重（font weight）**来增加或减少元素的强调程度，而无需改动字号：

• 标题加粗：让标题在字号基础上进一步凸显重要性；
• 脚注轻微加粗：脚注字号很小、容易被忽略，适度加粗（如font-weight: 500）能在不放大字号的前提下提醒读者它的存在。

这一技巧的另一个优势是：字号（尺寸）与字重（分量）是两个正交的调节维度，组合使用时视觉层级的表达能力几乎翻倍。

完整实现：一份可直接运行的 CSS

将以上所有原则落到代码上，就得到了原文档给出的完整示例。它借助CSS 自定义属性（CSS variables）把基础值集中定义在:root中，再在各层级上覆写--font-size与--font-weight：

:root { --font-family: 'Roboto', sans-serif; --font-size: 18px; --font-weight: 300; --line-height: 1.618; } * { font-family: var(--font-family); font-size: var(--font-size); font-weight: var(--font-weight); line-height: var(--line-height); } .sub-heading { --font-size: 1.618rem; --font-weight: 600; } .heading { --font-size: 2.618rem; --font-weight: 400; } .large-heading { --font-size: 4.236rem; --font-weight: 500; } .footnote { --font-size: 0.618rem; --font-weight: 500; }

这段实现体现了两个值得注意的设计细节：

1. CSS 变量驱动的比例体系：基础变量集中在:root一处，改起始字号或比例时只需改动顶部变量，所有层级自动按比例联动。仓库中的 variables.md 详细讲解了自定义属性的语法（双横线前缀--、通过var()取值）、继承与覆写机制，以及var()的 fallback 用法，可作为理解这段代码的配套阅读。
2. rem 相对单位：示例中层级字号采用rem（相对根元素字号），使得整条比例尺跟随根字号缩放，实现成本更低；line-height: 1.618保持无单位，确保每个层级按自身字号计算行距。

实际使用时可以灵活调整：若根元素字号为16px，则1.618rem约等于25.9px；也可以直接把各层级的rem值换算为与基础字号严格对齐的像素值。原文档特意强调：这只是一个非常简单的起点，完全可以根据你的设计需求调整起始值、替换比例、微调字重组合，实验出最适合自身项目的效果。

下图展示了基于该原理生成的排版比例尺效果，可以直观看到从脚注到大标题的尺寸与分量递进关系：

仓库实况：设计 token 中的比例思维

这套「以比例驱动字号与行高」的思想，在 30-seconds-of-code 仓库自身的样式体系中也得到了印证。在 src/astro/styles/_tokens.scss 中，设计 token 被集中定义在:root下：

• 字号 token（基于 16px 基础计算）：--font-xs: 0.8125rem、--font-sm: 1rem、--font-md: 1.125rem、--font-lg: 1.3125rem、--font-xl: 1.625rem、--font-x2: 2rem、--font-x3: 2.25rem；
• 字重 token：--font-weight-normal: 400、--font-weight-medium: 500、--font-weight-strong: 600；
• 行高 token：--line-height-loose: 1.75、--line-height-normal: 1.5、--line-height-tight: 1.25。

从源码结构可以推断，该仓库把「字号、字重、行高」三类排版变量拆成独立 token 并在组件样式中复用（例如 _code.scss 中的font-size: var(--font-sm)与line-height: var(--line-height-normal)），这本质上是把排版比例尺思想工程化：先定义一套成比例的变量，再让所有组件消费同一套变量，从而保证全站垂直节奏一致。这与本指南「集中定义 + 按比例派生」的方法一脉相承，也说明比例尺并非只能用于小范围页面，而是可以上升到设计系统层面。

从静态比例到响应式：下一步探索

比例尺解决的是「层级之间如何协调」，而屏幕宽度变化时文字如何伸缩则是另一个问题。仓库中的 fluid-typography.md 介绍了用clamp()让文字随视口宽度平滑缩放的流体排版技术，并特别指出：手工打磨的排版比例尺往往比纯流体排版更精致——这恰好与本指南的立场互补。若你希望页面在不同设备上既保持比例层级、又避免文字过小或过大，可以将两者结合：以本指南的比例尺定义各层级基准值，再用clamp()约束其在极端视口下的上下限。

此外，基础行高的落地也常与样式初始化配合。仓库中的 reset.md 提供了包含line-height: 1.75、font-size: 1.25em的整页重置方案，可作为构建完整排版系统的另一块拼图。

小结：把排版从"感觉"变成"系统"

回顾整个方法，排版比例尺的价值在于用一条数学规律取代逐层拍脑袋的取色取号：

1. 选定字体族、起始字号、缩放比例三个起点（如 Roboto +18px+1.618）；
2. 将比例同时应用于字号与行高，保持垂直节奏一致；
3. 用比例的幂次向上缩放生成标题层级，用倒数向下缩放弱化脚注等次要元素；
4. 以字重作为独立维度补充视觉强调；
5. 通过CSS 变量集中管理基础值，让整套比例可维护、可实验、可复用。

原文档强调的正是这种「简单的起点 + 自由的调优」：比例尺没有唯一正确答案，黄金比例也并非唯一选择，但掌握了这套变量化的搭建思路，你就拥有了快速生成自然、协调、有层次感的视觉层级的能力。

• 教程
• 文档