行間 (行送り) とは、テキストの行と行の間の垂直方向の距離を指します。CSS では line-height プロパティで制御し、フォントサイズに対する倍率 (例: 1.5)、固定値 (例: 24px)、または単位なしの数値で指定できます。行間はテキストの可読性を左右する最も重要なタイポグラフィ要素の一つであり、適切な設定はユーザー体験に直結します。

CSS の line-height には指定方法による挙動の違いがあります。単位なしの数値 (例: line-height: 1.6) は、要素自身のフォントサイズに対する倍率として計算され、子要素にも同じ倍率が継承されます。一方、line-height: 24px のような固定値や line-height: 150% のようなパーセント指定は、計算後の値が子要素に継承されるため、フォントサイズが異なる子要素で意図しない行間になることがあります。実務では単位なしの数値指定が推奨されます。タイポグラフィ基礎の書籍で行間設計の原則を学べます。

適切な行間の値は言語やコンテンツの種類によって異なります。欧文テキストでは本文に 1.5 倍前後、見出しに 1.2〜1.4 倍が一般的です。日本語テキストは漢字やひらがなの字面が大きく、文字の密度が高いため、欧文よりも広い行間が必要で、1.7〜2.0 倍が読みやすいとされています。コードブロックやモノスペースフォントでは 1.4〜1.6 倍が適切です。

行間が狭すぎると行が詰まって読みにくくなり、特に長文では読者の疲労が増します。逆に広すぎると行間に視線が迷い、次の行を見失いやすくなります。WCAG (Web Content Accessibility Guidelines) 2.1 の達成基準 1.4.12 では、行間をフォントサイズの 1.5 倍以上に設定できることが求められており、アクセシビリティの観点からも行間の設計は重要です。

よくある誤解として、行間 (line-height) と行送り (leading) を同一視するケースがあります。伝統的な組版用語の行送りは行のベースラインからベースラインまでの距離を指しますが、CSS の line-height はラインボックスの高さを定義するもので、厳密には異なる概念です。また、line-height: normal のデフォルト値はフォントによって異なり、一般的に 1.0〜1.2 の範囲です。

文字数カウントの観点では、行間の設定は同じ文字数のテキストでも表示面積を大きく変えます。たとえば 1000 文字のテキストを line-height: 1.5 と line-height: 2.0 で表示した場合、後者は約 33% 多くの縦方向スペースを占有します。文字数制限のあるコンテンツ (メタディスクリプション、SNS 投稿など) では、行間の設定によって表示領域内に収まる文字数が変わるため、デザインと文字数の両面から検討する必要があります。Web デザインとタイポグラフィの書籍では実践的な行間設定のガイドラインが紹介されています。