{}JSJSON

行高计算器

基于排版比例计算推荐行高、段间距，生成 CSS 变量

字号
排版比例
基准行高倍数
✓ 计算结果
推荐行高
1.50
行高像素值
24.0px
段落间距
19.2px
标题间距
14.4px

📐 排版比例预览

正文16.0px行高 24.0px
示例文字排版效果
H420.0px行高 28.4px
示例文字排版效果
H325.0px行高 33.5px
示例文字排版效果
H231.3px行高 39.4px
示例文字排版效果
H139.1px行高 46.1px
示例文字排版效果
Display48.8px行高 53.7px
示例文字排版效果

👁️ 实时预览

标题文字示例 Heading

这是一段正文示例文字。行高（line-height）是排版中最重要的属性之一，合适的行高能显著提升阅读体验。 通常建议正文行高为字号的 1.4 到 1.6 倍。

第二段文字用于展示段落间距效果。良好的段落间距可以帮助读者区分不同的内容段落，提高整体可读性。

📋 CSS 变量代码

:root {
  /* Typography Scale (1.25) */
  --font-size-base: 16px;
  --font-size-sm: 12.8px;
  --font-size-base: 16.0px;
  --font-size-h4: 20.0px;
  --font-size-h3: 25.0px;
  --font-size-h2: 31.3px;
  --font-size-h1: 39.1px;
  --font-size-display: 48.8px;
  --line-height-base: 1.50;
  --paragraph-spacing: 19.2px;
  --heading-spacing: 14.4px;
}

行高计算器使用说明

排版比例

  • Minor Second (1.067)：紧凑微调
  • Major Second (1.125)：紧凑型
  • Minor Third (1.2)：适合移动端
  • Major Third (1.25)：通用推荐
  • Perfect Fourth (1.333)：经典比例
  • Augmented Fourth (1.414)：黄金分割
  • Perfect Fifth (1.5)：大比例
  • Golden Ratio (1.618)：黄金比例

使用建议

  • 正文行高建议 1.4 ~ 1.6 倍
  • 标题行高建议 1.1 ~ 1.3 倍
  • 段落间距约等于行高值
  • rem 单位更利于响应式设计