排版比例生成器

版式比例指南

版式比例是一组遵循一致数学比例的字体大小。每个步骤都乘以相同的比例，而不是随机选择大小，从而在标题、正文和标题之间创建视觉节奏和层次结构。

选择一个基本尺寸（16px 是浏览器默认值，也是一个可靠的起点），然后选择一个比例。较小的比例（例如 1.125）可为编辑网站创建微妙、优雅的比例；较大的比率（例如 1.618）会为营销页面创建鲜明的对比。

专业提示

• 黄金比例 (1.618) 对于显示标题来说很漂亮，但对于正文较多的网站来说就太激进了。对于长篇阅读，请保持在 1.125 和 1.333 之间。
• 将比例导出为 CSS 自定义属性并在各处引用它们：font-size: var(--font-lg)。稍后更改比例意味着编辑一个文件。

什么是字体层级

字体层级是按同一个数学比率递进的一组字号，每级与下一级保持相同的比例。与其凭感觉挑字号——14、17、22、31……不如先定基准字号，再反复乘（或除）比率：16 × 1.25 = 20，再 × 1.25 = 25，以此类推。结果是层次分明的体系：标题、正文、注释、标签看起来同属一个设计系统，而不是一堆随手捡来的字号。

各比率对比

常用比率的性格不同。1.125 和 1.2 的级差微妙优雅，适合密集、文字量大的界面。1.25 和 1.333 是网页的中坚——层级明显但不夸张，1.333 恰好是古典音乐的纯四度。1.5 给内容站带来大胆跳跃。1.618（黄金比例）醒目但激进：做展示标题和营销页很漂亮，长文阅读通常过猛。

选择基准字号

16px 是浏览器默认值，也是桌面端正文的正确起点：它和纸质书的阅读舒适度相当，对大多数用户可读，也符合无障碍指引。移动端可以从 15px 起，或保持 16px。基准定了以后，一切都从它推导——标题向上乘、注释标签向下除——改一个基准值就能一致地重调整个层级。

行高与垂直节奏

层级不止是字号。行高应随字号变小而增大：正文 1.5–1.6，标题 1.2–1.4。垂直节奏方面，用基准字号乘以层级比率来生成间距台阶——若层级是 16/20/25/31，同样的数字可以当外边距和内边距的增量。当字号和间距共享同一比率，每个元素都对齐到隐形的网格，页面显得是「排」出来的而不是「堆」出来的。

用 clamp() 做响应式排版

字号应在手机和桌面之间平滑流动。现代 CSS 一行搞定：font-size: clamp(1rem, 0.7rem + 1.2vw, 1.75rem)——最小值、流动中间值、最大值。最小和最大值取自你的层级（如 16px 到 28px），视口项负责中间过程——标题在手机上优雅缩小、在大屏上放大，一条媒体查询都不用写。