CSS Baseline Grid - 为什么行高变小而字体大小变大？答案

【问题标题】：CSS Baseline Grid - why do line-heights get smaller while font-sizes get larger?CSS Baseline Grid - 为什么行高变小而字体大小变大？
【发布时间】：2012-03-04 05:40:48
【问题描述】：

尝试从黄金网格系统中调整可缩放的基线网格：https://github.com/jonikorpi/Golden-Grid-System/blob/master/GGS.css

这是相关的 CSS（除非我遗漏了什么）：

/*
*
*   Zoomable baseline grid
*   type size presets
*
*/
body {
  /* 16px / 24px */

  font-size: 1em;
  line-height: 1.5em;
}
.small {
  /* 13px / 18px */

  font-size: 0.8125em;
  line-height: 1.3846153846153846em;
}
.normal, h3 {
  /* 16px / 24px */

  font-size: 1em;
  line-height: 1.5em;
  /* 24 */

}
.large, h2, h1 {
  /* 26 / 36px */

  font-size: 1.625em;
  line-height: 1.3846153846153846em;
}
.huge {
  /* 42px / 48px */

  font-size: 2.625em;
  line-height: 1.1428571428571428em;
}
.massive {
  /* 68px / 72px */

  font-size: 4.25em;
  line-height: 1.0588235294117647em;
}
.gigantic {
  /* 110px / 120px */

  font-size: 6.875em;
  line-height: 1.0909090909090908em;
}

我想不通的是：为什么字体大小变大时行高变小？

我正在尝试制作自己的基线网格，但我似乎无法推断导致这种模式的方程式。

显然字体大小来自经典

目标÷上下文=结果

如果你对字体大小进行数学计算，它就会成功。例如对于 h2：

26px ÷ 16px = 1.625em

但该数学分解为行高。

更奇怪的是为什么 .small 类的 line-height 与 .large、h1、h2 的 line-height 相同……但是，这是我最不关心的问题。

【问题讨论】：

标签： css grid typography em baseline

【解决方案1】：

通过才华横溢的@jonkorpi（Golden Grid System 的创建者）：

“在计算行高时，上下文将成为该元素的字体大小。”

因此，例如，上面示例中 h2 背后的数学分解如下：

.large, h2, h1 {
    /* 
    target font size: 26px
    target line height: 36px

    font-size = 26 ÷ 16 x 1em
    line-height = 36 ÷ 26 x 1em
    */

    font-size: 1.625em;
    line-height: 1.3846153846153846em;
    }

或者，换句话说，计算行高可以使用以下等式：

目标行高÷元素的字体大小=结果

【讨论】：