本文の行間を単位なしで指定する：子要素の文字サイズで比べよう

文字サイズを大きくしたのに、行の間隔が前のままで窮屈に見える。本文の行間を単位なしで指定する方法を、親要素から子要素へ値を引き継ぐ場面で確かめます。今回は横書きの短い案内文に範囲を絞ります。

練習の題材は架空の散策会です。文章を二行以上へ折り返し、文字サイズが違う二つの段落を比べます。数値は違いを観察するための設定で、あらゆる文章に最適な行間を示すものではありません。

文字の大きさと、一行の高さを分けて見る

font-sizeは文字サイズ、line-heightは行ボックスの高さに関わる指定です。「行間」という言葉から文字の下の余白だけを想像しがちですが、line-heightに書くのは、その空白だけの寸法ではありません。

たとえば16pxの文字に1.75を指定すると、計算上の行の高さは28pxです。字形や書体によって見える空白は変わるため、数字だけで読みやすさを決めず、文章を実際に並べて比べます。段落同士を離したい場合は、段落の余白も別に調べましょう。

まず固定した値を、文字の大きい段落へ引き継ぐ

次のHTMLはbody内へ置く断片です。CSSと組み合わせ、他のスタイルを付けていない練習ページで使います。

<div class="walk-note">
  <p>川沿いの道を歩き、橋の手前で折り返します。歩きやすい靴でお越しください。</p>
  <p class="large">川沿いの道を歩き、橋の手前で折り返します。歩きやすい靴でお越しください。</p>
</div>

.walk-note {
  max-width: 24rem;
  font-size: 16px;
  line-height: 28px;
}
.walk-note .large { font-size: 24px; }

この状態では、どちらの段落も親から28pxのline-heightを引き継ぎます。下の段落は文字だけが大きくなるため、文字サイズに対する行の高さの比率が変わります。大きい段落で行が必ず重なるという意味ではなく、比率の違いを観察する例です。

28pxを1.75へ替え、子要素での計算を比べる

先ほどのCSSのline-heightだけを1.75へ書き換えます。新しい規則を追加せず、元の一行を置き換えてください。上の段落は16×1.75で28px、下は24×1.75で42pxとなる条件です。

MDNのline-heightの説明では、単位なしの数値を使うと、要素自身の文字サイズに掛けて使われることを確認できます。親で計算した長さを引き継ぐ指定との違いが、今回の比較点です。

1.75emや175%へ変えても、継承のされ方まで同じにはなりません。この練習では単位を付けない1.75を使い、開発者ツールの計算済みスタイルで二つの段落の値を見ます。別のCSSが段落自身のline-heightを指定していないかも確認してください。

文字を拡大しても、行が重ならず読めるか

変更前後の文字サイズとline-heightをメモに残し、まず同じ幅で読み比べます。その後で画面幅を狭め、折り返しが増えても文章を追えるか確かめます。一度に文字サイズと幅と書体を変えると、どの変更が原因か判断しづらくなります。

見出しと本文の大きさ自体に迷ったら、文字の役割を整理する記事で先に役割を決めましょう。今回は親からの継承を調べる練習なので、サイト中の見出しへ同じ比率を一括で当てはめる必要はありません。

仕上げにブラウザーで表示を拡大し、文章が枠から欠けないか確認します。無料レッスンのページでも、固定の高さを持つ枠に長い文を入れていないか併せて見直し、比率の計算と画面の結果を一組で記録してください。