尝试从黄金网格系统中调整可缩放的基线网格: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类的行高与.orge、h1、h2。。。然而,这是我最不关心的问题。
通过Jon Korpi(黄金网格系统的创建者):
计算线条高度时,上下文将变为该元素的字体大小。
因此,例如,上面例子中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;
}
或者,换言之,要计算线的高度,可以使用以下公式:
目标行高度÷元素的字体大小=结果