字体比例
为您的设计生成模块化字体比例。选择基础大小和比率，创建比例完美的标题尺寸。
px
Scale PreviewPreview capped at 72px - CSS below ↓
h1
-
The quick brown fox
h2
-
The quick brown fox
h3
-
The quick brown fox
h4
-
The quick brown fox
h5
-
The quick brown fox
h6
-
The quick brown fox
body
-
The quick brown fox
small
-
The quick brown fox
Generated CSS
什么是模块化字体比例?
模块化字体比例是一组遵循一致数学比率的字体大小，例如大三度(1.25x)或纯四度(1.333x)。从h1到h6，每个层级都比下一级按比例更大，创造出和谐、视觉平衡的排版效果。
如何选择合适的比率
较小的比率如小二度(1.067)适合密集的UI界面。较大的比率如纯四度(1.333)或黄金比例(1.618)适合编辑类网站，创造戏剧性对比。大三度(1.25)是大多数屏幕尺寸的安全默认值。
使用生成的CSS
CSS面板输出:root中的CSS自定义属性(如--text-h1)和每个标题级别的直接选择器。复制粘贴到您的样式表即可。使用rem获得随用户浏览器字体偏好缩放的无障碍大小，或使用px固定尺寸。
字体比例与无障碍性
使用rem而非px使排版随用户系统字体大小偏好缩放，这是重要的无障碍性考虑。WCAG建议文本可以放大到200%而不损失内容或功能。结合rem的模块化比例自动满足此要求。