CSS の行高と文字間隔

JPKODA 編集部 May 6, 2026

行高（line-height）と文字間隔（letter-spacing）は、テキスト行の垂直方向の間隔と、文字同士の水平方向の間隔を制御するための基本的なCSSプロパティです。

1. 行高（line-height）を理解する

line-height プロパティで指定される行高は、テキスト行間のスペースを決定します。本質的には、各「行ボックス（line box）」の総高さを指します。
適切な行高を設定することで、行同士が密集しすぎたり、逆に離れすぎたりするのを防ぎ、可読性（読みやすさ）を大幅に向上させることができます。

1.1 line-height の値

line-height プロパティは、以下のようないくつかのタイプの値を受け入れます。

Normal (デフォルト)： 通常はフォントサイズの1〜1.2倍程度です。具体的な数値はブラウザに依存します。
Number (数値)： 単位のない数値です。要素のフォントサイズにこの数値を掛けたものが行高になります。フォントサイズに合わせて動的に変化し、予期せぬ計算ミスを防げるため、最も推奨される方法です。例えば、line-height: 1.5 は行高がフォントサイズの1.5倍であることを意味します。
Length (長さ)： px、em、rem、pt などの単位で指定する固定値です。例：line-height: 20px;。
Percentage (百分比)： 要素のフォントサイズに対するパーセンテージです。例：line-height: 150%; は、フォントサイズが変わらなければ line-height: 1.5 と同等です。

示例

p {
  font-size: 16px;
  line-height: 1.5; /* 推奨：フォントサイズの1.5倍 (24px) */
}

h1 {
  font-size: 32px;
  line-height: 48px; /* line-height: 1.5 と同等 */
}

.fixed-line-height {
  font-size: 16px;
  line-height: 20px; /* 固定の行高 20ピクセル */
}

上の例では、段落（p）の行高をフォントサイズ（16px）の1.5倍（24px）に設定しています。.fixed-line-height クラスは固定ピクセル値を使用していますが、これは特定のケースでは有用ですが、相対値ほど柔軟ではありません。

1.2 line-height の継承性

line-height プロパティは継承されます。親要素に line-height を設定すると、その子要素もその値を引き継ぎます。

重要な違い：

単位なしの数値（例：1.5）を使用した場合： 子要素はこの「倍率」を継承します。子要素は自分自身のフォントサイズにその倍率を掛けて行高を再計算します。
単位のある長さやパーセンテージ（例：24px や 150%）を使用した場合： 親要素が計算した最終的な「ピクセル値」を子要素がそのまま継承します。

これが、単位なしの数値が推奨される理由です。

継承の示例：

<div style="font-size: 20px; line-height: 1.6;">
  <h1>タイトル</h1>
  <p style="font-size: 14px;">これは段落です。</p>
</div>

このケースでは：

div の font-size は 20px、line-height は 1.6 です。
h1 は 1.6 という倍率を継承します。ブラウザのデフォルトで h1 が 32px の場合、行高は 32px * 1.6 = 51.2px となります。
段落 p も 1.6 を継承します。行高は 14px * 1.6 = 22.4px です。

もし div の line-height を固定値 32px にしていたら、h1 も p も 32px の行高を継承してしまいます。大きなフォントの h1 にとって 32px は狭すぎ（重なる可能性あり）、小さなフォントの p にとっては広すぎることになります。

1.3 実務における考慮事項

可読性： 本文（ボディテキスト）の line-height は 1.4〜1.7 の間が最適とされています。
見出し： 見出しは通常、行高を少し小さめ（1〜1.2 程度）に設定すると、引き締まって見えます。
長文： 1行の長さが長い場合、視線が次の行にスムーズに移動できるよう、大きめの line-height が必要です。

2. 文字間隔（letter-spacing）を理解する

letter-spacing プロパティは、テキスト内の文字同士の水平方向のスペースを調整します。可読性を微調整したり、デザイン的なエフェクトを加えたりするために使用されます。

2.1 letter-spacing の値

Normal (デフォルト)： 余分なスペースを追加しません。ブラウザがフォントに基づいてデフォルトの間隔を決定します。
Length (長さ)： px、em、rem などで指定する値です。正の数値は間隔を広げ、負の数値は間隔を狭めます（文字が重なることもあります）。

示例

p {
  letter-spacing: 1px; /* 各文字間に 1px のスペースを追加 */
}

h1 {
  letter-spacing: 0.1em; /* 自身のフォントサイズに対して 0.1em のスペースを追加 */
}

.condensed {
  letter-spacing: -0.5px; /* 文字間隔を 0.5px 狭める */
}

2.2 letter-spacing の継承性

letter-spacing プロパティも継承されます。

示例：

<div style="letter-spacing: 2px;">
  <h1>Heading</h1>
  <p>This is a paragraph.</p>
</div>

この場合、h1 と p の両方が div から 2px の文字間隔を継承します。

2.3 実務における考慮事項

微調整に留める： letter-spacing の最も効果的な使い方は微調整です。間隔を広げすぎると単語がバラバラに見え、読みにくくなります。
見出しとディスプレイテキスト： 見出しに適用することで、よりエレガントでモダンな外観を演出できます。
全大文字（All Caps）： 全大文字のテキストは、間隔を空けないと窮屈に見える傾向があります。letter-spacing を増やすことで、全大文字の可読性が著しく向上します。

3. 行高と文字間隔を組み合わせて使う

line-height と letter-spacing は、お互いに補完し合いながら、視覚的に美しく読みやすいテキストを作り出します。

示例：モダンアートギャラリー風スタイル

body {
  font-family: sans-serif;
  font-size: 18px;
  line-height: 1.6; /* 良好な本文の読書体験 */
}

h1, h2 {
  font-family: serif;
  font-weight: normal;
  letter-spacing: 0.1em; /* 見出しにエレガントさを追加 */
  line-height: 1.2; /* 見出しの行間をタイトにする */
}

p {
  letter-spacing: 0.05em; /* 本文の微調整 */
}

.artist-name {
  font-size: 24px;
  letter-spacing: 0.2em; /* 特徴的な広い間隔 */
  text-transform: uppercase; /* すべて大文字に変換 */
}

示例の解析：

body には標準的な line-height を設定し、可読性を確保しています。
見出し（Headings） にはセリフ体（serif）を採用。letter-spacing を少し広げて優雅さを出しつつ、line-height をタイトにしてまとまりを出しています。
段落（Paragraphs） の letter-spacing も僅かに広げています。
.artist-name クラスは、大きなフォントサイズ、広い文字間隔、そして全大文字を組み合わせることで、視覚的にユニークな要素を作り出しています。