📖

font-sizeに合わせてline-heightをオートで設定する

に公開

一次関数を利用してfont-sizeによってline-heightを設定する方法です。
二次関数を使用した方がより細かい表現ができるのですが、現在(2025/6 時点)では、標準のcssでフォントサイズの2乗(1em * 1em1em^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