📖
font-sizeに合わせてline-heightをオートで設定する
一次関数を利用してfont-sizeによってline-heightを設定する方法です。
二次関数を使用した方がより細かい表現ができるのですが、現在(2025/6 時点)では、標準のcssでフォントサイズの2乗(1em * 1em
や 1em^2
)が計算できない為、二次関数は求められません。sassやjsは二次関数が求められます。
/**
* 一次関数
* (公式)y = ax + b
* x...font-size
* y...line-height
* a...傾き
* b...切片
*
* 傾きと切片求める
* a = (lineHeight1 - lineHeight2) / (fontSize1 - fontSize2)
* b = lineHeight1 / (a * 1em)
*/
/** 例
* lineHeight 1.7(fontSize 14px)
* lineHeight 1.3(fontSize 36px)
* clamp でline-heightの下限上限値を決める
*/
--leading-auto: clamp(1.3, calc(-0.018 * 1em + 1.95px), 1.7);
Discussion