line-heightの1.5と24pxは同じ？文字を大きくして行の高さを比べよう

文字サイズが16pxのとき、line-height:1.5と24pxは、どちらも24pxの行の高さになる。でも、子の文字だけを大きくすると違いが出るよ。

このページでは、単位なしの指定とpxの指定が継承される場面を比べる。継承は、親の要素の指定を子が受け継ぐ仕組み。準備はブラウザだけで大丈夫。

行の高さと、文字そのものの大きさ

font-sizeは文字サイズの指定、line-heightは行の箱の高さに関わる指定。文字の形や、実際に見える余白が、数字だけで一律に決まるわけではないよ。

単位なしの1.5は、その要素の文字サイズに対する倍率として使われる。pxの24pxは、長さとして指定する。

.parent-a { font-size: 16px; line-height: 1.5; }
.parent-b { font-size: 16px; line-height: 24px; }
.child { font-size: 28px; }

この条件で子が行の高さを受け継ぐと、単位なしの側は28×1.5で42px。固定の側は24pxを受け継ぐ。親が同じ見た目でも、子の結果まで同じとは限らないんだ。

動かしてみよう

記事下の作例は、同じ三行の文章を二つ並べる。親の文字サイズは16pxのままで、子の文字サイズだけ切り替えられる。

28pxへ切り替え、結果欄の行の高さと、三行の文章の見え方を比べよう。リセットで16pxへ戻る。

数字だけで読みやすさを決めない

行の高さが文字サイズより小さくなると、行同士が近付き、字形によって重なって見えることもある。一方、大きければ必ず読みやすいとも限らない。本文の長さ、フォント、画面幅も合わせて確認しよう。

固定pxを使う場面をすべて否定するものではないよ。大きさが変わる本文では、とくに子の文字や拡大表示まで見たいところ。

うまく変わらないとき

子に別のline-heightが付いていないか、どの親の指定を受けているかを確認する。作例は比較の条件を絞っているので、実サイトのCSSすべてを再現するものではないよ。

文字サイズの単位はrem・em・px、読者が間隔を変える確認は行間と字間のレイアウトへ。

参照した公式資料

• MDN：line-height

確認日：2026年10月24日。