行間 (行送り) とは、テキストの行と行の間の垂直方向の距離を指します。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 倍程度で足りることが多く、行番号やインデントとの整合を優先します。いずれの場合も、後述するアクセシビリティ要件との衝突を避けるため、本文の行間は 1.5 倍を下限として設計しておくと安全です。

行間が狭すぎると行が詰まって読みにくくなり、特に長文では読者の疲労が増します。逆に広すぎると行間に視線が迷い、次の行を見失いやすくなります。WCAG (Web Content Accessibility Guidelines) 2.1 で追加された達成基準 1.4.12「テキストの間隔」(適合レベル AA) は、利用者が行間をフォントサイズの 1.5 倍以上へ変更しても、コンテンツや機能が失われないことを求めています。同じ基準は段落の後ろの間隔を 2 倍以上、文字間を 0.12 倍以上、単語間を 0.16 倍以上に変更した場合も対象としています。ここで押さえておきたいのは、これが「1.5 倍で組め」という指定ではなく「利用者が広げても壊れないこと」の要件だという点です。高さを固定した要素に overflow: hidden を併用していると、利用者が行間を広げた瞬間に文末が切れて基準を満たせなくなります。

よくある誤解として、行間 (line-height) と行送り (leading) を同一視するケースがあります。伝統的な組版用語の行送りは行のベースラインからベースラインまでの距離を指しますが、CSS の line-height はラインボックスの高さを定義するもので、厳密には異なる概念です。また、初期値である line-height: normal の実際の値はユーザーエージェントとフォントに依存し、主なブラウザでは font-family に応じて 1.2 前後になります。フォント側が持つ行の高さの情報を使うため、書体を差し替えるだけで行の高さが変わる点に注意してください。もう 1 つ実務で効いてくるのが、line-height とフォントサイズの差の配分です。この差はテキストの上下へ半分ずつ振り分けられるため、1 行しかない要素でも文字の上下に見えない余白が生まれます。ボタンや見出しで「文字が上に寄って見える」「padding を揃えたのに中心がずれる」と感じる原因はここにあり、余白の指定ではなく行間の指定を見直すべき場面です。

文字数カウントの観点では、行間の設定は同じ文字数のテキストでも表示面積を大きく変えます。たとえば 1000 文字のテキストを line-height: 1.5 と line-height: 2.0 で表示した場合、後者は約 33% 多くの縦方向スペースを占有します。具体的に計算してみましょう。フォントサイズ 16px で 1 行あたり 40 文字入る幅なら、1000 文字は 25 行です。line-height: 1.5 なら 1 行 24px で合計 600px、2.0 なら 1 行 32px で合計 800px となり、その差は 200px に達します。逆算する場合は「収まる文字数 = 表示領域の高さ ÷ (フォントサイズ × 行間) × 1 行の文字数」で概算できます。文字数制限のあるコンテンツ (メタディスクリプション、SNS 投稿など) では、行間の設定によって表示領域内に収まる文字数が変わるため、デザインと文字数の両面から検討する必要があります。-webkit-line-clamp で「3 行まで表示」のように省略する実装も、行数から高さを求める過程で行間に依存します。行間だけを後から変えると省略位置が動くため、文字数の目安を決めたときの行間の値も併せて記録しておくと安全です。