排版比例生成器

排版比例生成器 是什么？

排版比例生成器将一个基准字号和一个模块化比例，转换成一套完整、数学上一致的字号比例，可按需生成任意数量的更大标题级别和更小说明级别。除了原始字号外，它还为每一级推导匹配的行高与字距，并可选生成在移动端与桌面端视口之间插值的流式 clamp() 表达式，其中移动端使用单独的比例。设计师和前端开发者用它来搭建设计系统的字号令牌、保持尺寸一致，并粘贴现成的 CSS、Sass、Tailwind 或 JSON。输入任意自定义比例或选择经典比例，设置基准字号和单位（px 或 rem），用你自己的 font-family 预览，再复制所需格式。

如何使用 排版比例生成器

1. 在比例字段中输入任意自定义比例，或从设置中的预设下拉框选择经典比例，如纯四度（1.333）。
2. 设置基准字号；它将成为正文字号和整个比例的锚点。
3. 在设置中选择要生成多少个更大和更小的级别；更小的级别位于基准之下，用于说明文字与细则。
4. 调整基准行高、紧凑行高以及大字号字距，并输入 font-family 以用你自己的字体预览比例。
5. 如需响应式字号，设置最小与最大视口宽度以及移动端比例，构建流式 clamp() 比例。
6. 在 CSS 变量、流式 clamp()、Sass、Tailwind 配置和 JSON 之间切换输出格式，然后复制代码或任意单级的字号。

示例

比例 1.333，基准 16px，上 5 / 下 1

--font-size-2xl: 37.897px; --line-height-2xl: 1.27; --letter-spacing-2xl: -0.017em;

基准 16px，比例 1.333，移动端比例 1.2，320-1240px

--font-size-2xl: clamp(27.648px, 24.083px + 1.114vw, 37.897px);

任意比例，Tailwind 导出

fontSize: { base: ['16px', { lineHeight: '1.5', letterSpacing: '0em' }] }

常见问题

可以使用自定义比例而不仅是预设吗？

可以。在比例字段中输入任意数字，例如 1.2、1.5、1.618，或像 1.45 这样的非标准值。设置中的预设下拉框只是填入同一字段的快捷方式，选择与预设不匹配的值时会显示为“自定义”。

更小的（负向）级别如何工作？

比例以基准字号为锚点（第 0 级）。更大的级别将基准乘以比例，更小的级别则除以比例，从而在基准之下生成 sm、xs 等说明文字与细则字号。在设置中设定更大和更小级别的数量即可。

行高和字距是如何计算的？

行高从正文处的基准值出发，随字号增大逐渐趋向更紧凑的值；字距从基准处的零出发，逐渐趋向你设定的大字号值，因此大号展示文字略紧、小号文字略松。两条曲线都可在设置中调整。

什么是流式 clamp() 比例？

它为每一级生成一个 font-size: clamp()，在最小和最大视口宽度之间平滑增长，最大宽度处使用你的主比例，最小宽度处使用单独的移动端比例。选择 CSS clamp() 输出格式即可导出。

我的数据会被发送到服务器吗？

不会。整套比例，包括字号、行高、字距以及流式 clamp() 值，都在你的浏览器本地用简单数学计算。任何内容都不会被上传，因此该工具可离线使用并为你的设置保密。