设计/免费工具
字体比例调试工具
预览可调整基数大小、比例、字体和行高的模块式打字尺度。 导出 CSS 文字大小和六个标题级别。
类型 CSS
typography.css
:root {
--type-font: "Inter", sans-serif;
--type-line-height: 1.5;
--type-small: 12.8px;
--type-body: 16px;
--type-h6: 20px;
--type-h5: 25px;
--type-h4: 31.25px;
--type-h3: 39.06px;
--type-h2: 48.83px;
--type-h1: 61.04px;
}
body { font-family: var(--type-font); font-size: var(--type-body); line-height: var(--type-line-height); }
h1 { font-size: var(--type-h1); line-height: 1.15; }
h2 { font-size: var(--type-h2); line-height: 1.15; }
h3 { font-size: var(--type-h3); line-height: 1.15; }
h4 { font-size: var(--type-h4); line-height: 1.15; }
h5 { font-size: var(--type-h5); line-height: 1.15; }
h6 { font-size: var(--type-h6); line-height: 1.15; }字数: 75回到细节上
导出文本保留英文格式；您输入的内容保持不变。
没有注册。 没有AI的信用。 此工具将您在浏览器中的输出组装 。
从一个想法到有用的东西。
- 01
选择字体、基数大小和模块化比例。
- 02
检查标题大小和段落间隔。
- 03
下载 CSS 变量。
有点背景
一个模块化的缩放将一个基字体大小乘以一个重复的比例. 这个游乐场计算出一个六级的领衔阶梯加上身体和小文字. 大小是一个起始点的显式像素值;在生产中使用它们之前,审查反应行为并缩放.
问得好
是否为 CSS 装入选中的字体 ?
没有。 它命名了字体和补给的倒背家庭. 在应用程序中装入或自宿所选字体 。
这些尺寸有反应吗?
导出包含固定大小. 在测试了实际内容后, 将它们适应您的断点或流体类型系统 。