Базовая сетка CSS - почему высота строк становится меньше, а размеры шрифта - больше?

Попробуйте адаптировать масштабируемую базовую сетку из системы золотой сетки: 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 такая же, как высота строки для .large, h1, h2 ... однако это меньшая из моих проблем.


css typography grid baseline em
person jon    schedule 12.02.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

через блестящего @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;
    }

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

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

person jon    schedule 12.02.2012