【CSS】line-heightと行送りの関係
問題
HTML/CSSの勉強中、
- なぜ、line-heightを求める計算式が「行送り ÷ フォントサイズ」なのか
について気になったので、
- 行送りの仕組み
- line-heightの仕組み
について、調べてみました。
結論
- 行の文字の重なりを起こさないように、行間に空白を設けたい
- そのために、フォントサイズを基にした行ボックスで余白を追加する
- この余白の割合が「行送り ÷ フォントサイズ 」
行送りの仕組み
Adobeでは以下のように説明されています。
Adobe (行送りについて)
垂直方向の行の間隔を行送りといいます。行送りとは、1 つのテキスト行のベースラインから、その上の行のベースラインまでの距離を示します。ベースラインとは、ディセンダラインのない文字を揃えるための基準となる目には見えないラインのことです。
ここで言われるベースラインは、欧文組版 (英語とか)とアジア言語 (日本語とか)で違います。
英語の行送り：
日本語の行送り：
行送りは行間と違い、フォントサイズを含めた次のベースラインまでの間隔を指しています。
line-heightの仕組み
MDNには以下のような記述があります。
MDN (line-height)
line-heightは CSS のプロパティで、行ボックスの高さを設定します。これは主にテキストの行間を設定するために使用します。ブロックレベル要素では、要素に含まれる行ボックスの最小の高さを指定します。非置換インライン要素では、行ボックスの高さの計算に使われる高さを指定します。
line-heightは行ボックスの高さを指定するプロパティです。
行ボックスのイメージとしては、以下の図です。
この図のように行ボックスは、文字の大きさと上下の余白を含めた高さのことです。
行ボックス = Font-size × line-height で求められます。
ここまでをまとめると、
- 行送り：フォントサイズを含めた次のベースラインまでの間隔
- line-height：行ボックスを設定するプロパティ
ただ、ここまでだと、そもそもフォントサイズを基に計算せずとも
- 行送りをそのままpxで指定してもいいのでは？
という疑問が生まれます。
line-height で行送りの値をそのままpxで指定した場合
上記の画像から分かる通り、フォントサイズの変更によって、文字が重なってしまいます。
line-heightを割合で指定する方が、自然な行間を保ち、バグが少なくなります。
結論：行送りとline-heightの関係
それぞれをまとめると
- 行送り：フォントサイズを含めた次のベースラインまでの間隔
- line-height：フォントサイズに対してどれくらいの余白を持たせるべきかを設定するプロパティ
- 行送りをpxで求めることもできるが、フォントサイズの変更で、文字の重なりが起きてしまう。
以上のことから、
- 行の文字の重なりを起こさないように、行間に空白を設けたい
- そのために、フォントサイズを基にした行ボックスで余白を追加する
- この余白の割合が「行送り ÷ フォントサイズ 」
補足：line-heightでなぜ単位を使わないのか
【CSS】CSSのline-heightで単位を指定しない理由
によれば、単位がある場合(em や %)、親要素で計算された値が、子要素や子孫要素にまで継承されるとのこと
参考資料
Discussion