📐 排版比例计算器
免费在线排版比例计算器，基于模块化比例（Modular Scale）生成字体大小层级，支持多种比例（黄金比例/音阶等），实时预览排版效果，生成CSS变量，无需注册。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用在线排版比例计算 - 模块化比例生成字体层级，实时预览排版效果
⚙️ 基础设置
Minor Second (1.067)
Major Second (1.125)
Minor Third (1.200)
Major Third (1.250)
Perfect Fourth (1.333)
Augmented Fourth (1.414)
Perfect Fifth (1.500)
Golden Ratio (1.618)
📊 排版层级
| 层级 | 名称 | 大小 (px) | 大小 (rem) | 预览 |
|---|
📦 CSS代码
常见问题
Q1: 什么是模块化比例（Modular Scale）？
模块化比例是一种排版设计方法，基于数学比例关系生成字体大小层级。每个层级的大小是前一个层级乘以固定比例值。这种方法确保了字体大小之间的和谐关系，常见比例包括黄金比例(1.618)、完美五度(1.5)等。
Q2: 应该选择哪个比例？
选择取决于设计风格：黄金比例(1.618)适合戏剧性对比，完美五度(1.5)适合中等对比，完美四度(1.333)适合微妙对比。移动端建议用较小比例(1.125-1.25)，桌面端可用较大比例(1.333-1.618)。
Q3: 如何在项目中使用？
将生成的CSS变量复制到项目根样式中，然后在组件中引用变量名（如font-size: var(--step-3)）。这样修改比例时只需更改变量值，所有引用处自动更新。