line-heightの最適値を探る｜狭すぎたときに何が起きるか

:::note ※行間で悩んでいる人向けの「判断用」記事です :::

結論（私の判断基準）

💡 実際に試したい → Font Preview で目視確認

/* ❌ Bootstrap のデフォルト */
body {
  line-height: 1.5;
}

英語サイトでは読みやすい。日本語だと窮屈で、長文を読む気が失せる。

クライアントから「なんか詰まってる感じがする」と言われて、1.8 に変えたら解決した。

日本語サイトで海外の数値をそのまま使わない。これは絶対。

/* ❌ 全部同じ */
h1, h2, h3, p {
  line-height: 1.8;
}

本文は読みやすかった。でも大きな見出しがバラバラに見えた。

行間を詰めすぎると、デザインしている本人だけが満足する状態になる。読者は静かに離脱する。

見出しは 1.2〜1.3。本文とは分ける。

「line-height 1.8」を覚えて、どのサイトでも使っていた。

でも游ゴシックとNoto Sans JPでは、同じ 1.8 でも印象が違う。游ゴシックは繊細なので、1.8 だと広すぎに感じることがある。

数値を覚えるのではなく、目で見て確認する。

言語	推奨値	理由
欧文	1.4〜1.6	x-heightが基準、アセンダー/ディセンダーを考慮しても狭くてOK
日本語	1.7〜2.0	文字が正方形に近く、漢字・ひらがな・カタカナが混在

欧文は文字の「高さ」にバラつきがある（bとoで高さが違う）。日本語は全部同じ高さ。

だから日本語は「行と行の間」が視覚的に狭く感じやすい。

同じ数値でもフォントで印象が変わる。

モバイルでは画面が小さい分、やや広めにした方が読みやすい。

.article-body {
  line-height: 1.8;
}

@media (max-width: 640px) {
  .article-body {
    line-height: 2.0;
  }
}

私はこのパターンを必ず使っている。PCで見ると「少し広いかな」と思っても、スマホで読むとちょうどいい。

/* ✅ 単位なし（推奨） */
line-height: 1.8;

/* ❌ 固定値（文字サイズ変更時に追従しない） */
line-height: 24px;

/* ❌ パーセント（計算値が継承される） */
line-height: 150%;

単位なしで指定すると、子要素のフォントサイズが変わっても比率で計算される。

**迷ったら 1.7。**少なくとも破綻することはない。

迷ったら 1.7。それで破綻したことはない。