CSS Baseline Grid - почему высоты линий уменьшаются, а размеры шрифтов увеличиваются?

Question

Попробуйте адаптировать масштабируемую базовую сетку из системы золотой сетки: 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;
}

Чего я не могу понять, так это : почему высота строк уменьшается при увеличении размеров шрифта?

Я пытаюсь создать собственную базовую сетку, но я не могу экстраполировать уравнение, которое приводит к этому шаблону.

Очевидно, что размер шрифта является результатом классического

target ÷ context = result

Если вы сделаете эту математику для размера шрифта, это сработает например для h2:

26 пикселей ÷ 16 пикселей = 1,625em

но эта математика ломается для высот строк.

По-прежнему странно, почему высота строки для класса .small такая же, как и высота строки для .large, h1, h2 ... однако это меньше всего меня беспокоит.

Answer 1

через блестящего @jonkorpi (создателя Системы Золотой Решетки):

"При вычислении высоты строки контекст становится размером шрифта этого элемента."

Так, например, математика за 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;
    }

или, другими словами, для вычисления высоты строки можно использовать следующее уравнение:

целевая высота строки ÷ размер шрифта элемента = результат