CSS Baseline Grid - why do line-heights get smaller while font-sizes get larger?

Question

Try to adapt the zoomable baseline grid from the golden grid system: https://github.com/jonikorpi/Golden-Grid-System/blob/master/GGS.css

here's the relevant CSS (unless I'm missing something):

/*
*
*   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;
}

What I can't figure out is: why do the line-heights get smaller as the font-sizes get larger?

I'm trying to make a baseline grid of my own but I can't seem to extrapolate the equation that results in this pattern.

Clearly the font-size results from the classic

target ÷ context = result

if you do that math on the font-size, it works out. e.g. for the h2:

26px ÷ 16px = 1.625em

but that math breaks down for the line-heights.

stranger still is why the line-height for the .small class is the same as the line-height for the .large, h1, h2 ... however, this is the least of my concerns.

Answer 1

via the brilliant @jonkorpi (the creator of the Golden Grid System):

"When calculating a line-height, the context becomes the font-size of that element."

So, for example, the math behind the h2 in the above example would break down like so:

.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;
    }

or, to put it another way, to calculate line-height one can use the following equation:

target line-height ÷ element's font-size = result