无需登录 数据私有 本地保存

排版比例预览器 - 模块化比例尺生成

前端设计 教育工具 字体 排版 比例
98
0
0
0
px
6
Major Third · 大三度
比例尺可视化
条形宽度与字号成正比，相邻层级比例 = 1.25
文字层级实时预览
CSS 自定义属性输出
提示：rem 转换基于根字号 16px。切换开关可在 px 和 rem 之间切换。
常见问题与知识点
什么是排版比例尺（Type Scale）？
排版比例尺是一组按特定数学比例递增或递减的字号序列。它类似于音乐中的音阶，确保页面中所有文字层级之间保持和谐的比例关系。常见的比例尺基于音乐音程（如纯五度 1.5、大三度 1.25）或数学常数（如黄金比例 φ≈1.618、√2≈1.414）。使用比例尺可以让排版更加有序、专业且富有节奏感。
黄金比例（1.618）为什么在设计中如此受欢迎？
黄金比例 φ（约等于 1.618）在自然界、建筑和艺术中广泛存在，被认为具有天然的美学和谐感。在排版中，使用 1.618 作为比例系数可以创造出既对比鲜明又视觉舒适的层级关系。例如，正文 16px 搭配 16×1.618≈25.9px 的标题，比例优雅。不过黄金比例产生的跳跃较大，更适合标题与正文对比强烈的场景（如博客、杂志），对于信息密集的仪表盘界面，1.25 或 1.2 可能更合适。
如何为网页选择合适的排版比例？
选择比例需考虑内容类型和设计风格：
• 1.067–1.125（小二度/大二度）：适合信息密集的后台系统、数据表格，层级变化微妙。
• 1.2–1.25（小三度/大三度）：最通用的范围，适合大多数网站和Web应用，Mac系统默认使用1.2。
• 1.333–1.414（纯四度/增四度）：适合内容型网站、博客，层级对比明显。
• 1.5–1.618（纯五度/黄金比例）：适合强调标题的营销页面、作品集，视觉效果强烈。
• 2.0（八度）：产生极大的对比，适合极简设计或特殊创意场景。
什么是模块化比例（Modular Scale）？
模块化比例是由设计师 Tim Brown 推广的一套排版方法论。它使用一个或多个比例系数（如 1.25 和 1.5）从基准字号出发生成整个字号体系。与固定字号不同，模块化比例确保每个层级之间保持一致的乘法关系，使排版具有数学上的和谐性。例如，以 16px 为基准、1.25 为比例，可以得到：10.24px → 12.8px → 16px → 20px → 25px → 31.25px → 39.06px，相邻层级始终是 1.25 倍关系。
如何在响应式设计中使用排版比例？
在响应式设计中，可以采用以下策略：
• 保持比例不变：在小屏幕上使用相同的比例系数，但降低基准字号（如移动端 14px、桌面端 16px）。
• 使用 CSS clamp()：结合最小字号、首选字号和最大字号，实现流畅缩放。例如：font-size: clamp(1rem, 0.8rem + 1vw, 1.25rem);
• 调整比例系数：在大屏幕上使用更大的比例（如 1.5），小屏幕上使用更紧凑的比例（如 1.2），以优化空间利用。
• 层级缩减：移动端可以减少显示的层级数量，避免字号过大或过小。
px 和 rem 在排版比例中如何选择？
px（像素）是绝对单位，精确可控，适合固定布局。但在响应式设计中，使用 px 意味着需要为每个断点重新定义字号。
rem（根元素倍数）是相对单位，相对于 <html> 元素的 font-size（默认为 16px）。使用 rem 可以轻松实现全局缩放——只需调整根字号，所有使用 rem 的元素都会按比例缩放。这对于无障碍访问（用户调整浏览器默认字号）非常友好。
现代最佳实践：CSS 自定义属性中定义 rem 值，同时保留 px 作为回退。本工具支持一键切换输出单位。
排版比例与音乐音程的对应关系
排版比例常借用音乐术语命名，因为它们都基于频率比值：
• 小二度 (Minor Second)：16:15 ≈ 1.067
• 大二度 (Major Second)：9:8 = 1.125
• 小三度 (Minor Third)：6:5 = 1.2
• 大三度 (Major Third)：5:4 = 1.25
• 纯四度 (Perfect Fourth)：4:3 ≈ 1.333
• 增四度 (Augmented Fourth)：√2 ≈ 1.414
• 纯五度 (Perfect Fifth)：3:2 = 1.5
• 大六度 (Major Sixth)：5:3 ≈ 1.667
• 八度 (Octave)：2:1 = 2.0
这种对应让设计师可以像作曲一样"谱写"排版层次。
如何判断我的排版比例是否合适？
可以通过以下方法验证：
1. 视觉测试：在本工具的预览区观察，确保最小文字可读、最大标题有足够冲击力。
2. 层级区分度：相邻层级至少应有 15-20% 的差异，否则难以区分。
3. 实际内容测试：将比例应用到真实内容中，检查长文本、标题、标签等场景。
4. 对比度检查：小字号文字需保证足够的颜色对比度（WCAG 标准：至少 4.5:1）。
5. 设备测试：在实际设备上查看，确保移动端和桌面端都表现良好。
🔧 相关工具