実行できるCSSドキュメント: CSS 行間

Q: line-height に単位は付けるべきですか？

ふつうは付けません。1.5 のような単位なしの値は要素ごとの文字サイズに掛けられるので、サイズの違う子要素でも比率が保たれます。単位付きの値は一度だけ計算され、固定の長さとして継承されます。

Q: HTML で行間を変えるには？

HTML には行間の属性はありません。CSS のプロパティを使います。たとえば行間を 2 倍にするなら です。

line-height の働き

line-height はテキストの各行の高さを指定します。その高さとフォント自体に必要な高さの差は半分ずつ文字の上下に加えられるので、行と行の間隔はこれで調整します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line height</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 16px; color: #111827; }
    .row { display: flex; gap: 16px; align-items: flex-start; }
    p { margin: 0; width: 200px; padding: 8px; background: #e5e7eb; }
    .tight { line-height: 1; }
    .comfy { line-height: 1.5; }
    .double { line-height: 2; }
  </style>
</head>
<body>
  <div class="row">
    <p class="tight">line-height: 1. Lines touch and long text is hard to follow.</p>
    <p class="comfy">line-height: 1.5. Comfortable spacing for a paragraph.</p>
    <p class="double">line-height: 2. Double spacing, like a draft.</p>
  </div>
</body>
</html>

3 つの段落はどれも 16px のフォントです。行の高さはそれぞれ 16px、24px、32px です。

値: 単位なし、長さ、パーセント、normal

値	例	16px の文字での行の高さ	子要素への継承のされ方
数値	`1.5`	24px	数値 (1.5) のまま。要素ごとに再計算
長さ	`24px`, `1.5em`, `1.5rem`	24px	計算後の長さ (24px)
パーセント	`150%`	24px	計算後の長さ (24px)
`normal`	`normal`	フォント次第。多くは約 1.2	`normal`

1 つの要素では 1 行目と 2 行目は同じに見えます。違いが出るのは子要素の文字サイズが違うときで、それが次のセクションです。

単位なしが基本の選択である理由

1.5em や 150% の行の高さは親でピクセルに変換され、子はそのピクセル値を継承します。すると文字の大きい子では、行の高さが文字より低くなります。単位なしの 1.5 は数値そのものとして継承され、子ごとの文字サイズに掛けられます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unitless vs em</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; color: #111827; }
    .box { width: 220px; padding: 8px; margin-bottom: 12px; background: #e5e7eb; }
    .em { line-height: 1.5em; }       /* 21px, inherited as 21px */
    .unitless { line-height: 1.5; }   /* inherited as 1.5 */
    h2 { font-size: 32px; margin: 0; }
  </style>
</head>
<body>
  <div class="box em">
    <!-- line-height: 1.5em -->
    <h2 id="em-h">A heading that wraps</h2>
  </div>
  <div class="box unitless">
    <h2 id="num-h">A heading that wraps</h2>
  </div>
  <p id="out"></p>
  <script>
    const lh = (id) => getComputedStyle(document.getElementById(id)).lineHeight;
    document.getElementById('out').textContent =
      'em box heading: ' + lh('em-h') + ', unitless box heading: ' + lh('num-h');
  </script>
</body>
</html>

どちらの見出しも 2 行に折り返します。1 つ目は 32px の文字に 21px の行の高さを継承するので、行が重なります。2 つ目の行の高さは 32 × 1.5 = 48px です。body に数値で line-height を一度指定すれば、ほとんどのページではそれ以上指定する必要はありません。

値を試してみる

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line height tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { width: 320px; margin-top: 12px; padding: 8px; background: #e5e7eb; }
  </style>
</head>
<body>
  <label>line-height: <input id="val" value="1.5" size="12"></label>
  <p id="sample">Line height changes the space between the lines of this paragraph. Type a number, a length or a percentage and watch the gaps change.</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.lineHeight = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).lineHeight;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

1、2、30px、200%、normal を試してみてください。Chrome は normal をピクセル値ではなく単語のまま表示します。サイズがフォントから決まるからです。

読みやすいテキストの値

本文: 1.4 から 1.6。1 行が長いほど、目が次の行の頭を見つけやすいよう行間を広げます。
見出し: 1.1 から 1.3。大きな文字に 1.5 の行間を付けると、1 つの見出しではなく別々の行に見えます。
ボタンや 1 行のラベル: 1 から 1.25 にし、高さは padding で作ります。

アクセシビリティについては、WCAG の達成基準 1.4.12 が、読み手が行の高さを文字サイズの 1.5 倍にしてもページが使えることを求めています。テキストを切り取ってしまう固定の高さは避けましょう。

1 行のテキストを縦方向の中央に置く

ボックスにちょうど 1 行だけ入る場合、ボックスの高さと同じ line-height を指定すると、余白が上下に均等に分けられるので、テキストが縦方向の中央に来ます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Single line centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      height: 40px;
      line-height: 40px;
      padding: 0 16px;
      width: max-content;
      background: #2563eb;
      color: white;
      border-radius: 20px;
    }
  </style>
</head>
<body>
  <div class="badge" id="badge">One line, centered</div>
</body>
</html>

テキストが 2 行に折り返した途端に崩れます。各行が 40px の高さになるからです。折り返す可能性があるものは、div を中央寄せするページのように flexbox で中央に寄せましょう。

font のショートハンド

font のショートハンドでは、スラッシュを使ってサイズと行の高さを一緒に指定できます:

body {
  font: 16px/1.5 system-ui, sans-serif; /* size 16px, line-height 1.5 */
}

ショートハンドは書かなかったすべてのフォント関連プロパティをリセットします (スラッシュの部分を省略すると line-height も normal に戻ります)。個別の font-* のルールより前に書きましょう。

よくある間違い

コンテナに em や % を使う。 子要素は固定の長さを継承します。単位なしの数値を使いましょう。
テキストのボックスに固定の height。 テキストが折り返したり、読み手が行間を広げたりするとあふれます。高さは内容に任せましょう。
本文の行間が狭すぎる。 line-height: 1 の段落は読みにくくなります。1.5 から始めましょう。
line-height で段落の間が空くと思う。 それは段落の margin の役割です。
normal に頼る。 フォントごとに変わるので、フォントを変えるとレイアウトがずれます。

よくある質問

CSS の line-height は何をしますか？

テキストの各行ボックスの高さを指定します。フォント自体の高さを超える分の余白は文字の上下に均等に分けられるので、line-height を大きくするほど行間が広がります。

line-height に単位は付けるべきですか？

ふつうは付けません。1.5 のような単位なしの値は要素ごとの文字サイズに掛けられるので、サイズの違う子要素でも比率が保たれます。単位付きの値は一度だけ計算され、固定の長さとして継承されます。

本文に適した line-height はいくつですか？

段落なら 1.4 から 1.6、大きな見出しなら 1.1 から 1.3 くらいです。WCAG の AAA のガイドラインでは、段落に 1.5 以上を求めています。

line-height: normal とは何ですか？

初期値です。ブラウザはフォント自身の寸法情報の値を使います。ふつうは 1.2 前後ですがフォントごとに違うので、フォントが変わると予測できません。

HTML で行間を変えるには？

HTML には行間の属性はありません。CSS のプロパティを使います。たとえば行間を 2 倍にするなら <p style="line-height: 2;"> です。

CSS line-height で行間を調整: 単位なしの値、px、em