読みやすい行間の決め方｜line-heightの黄金比は1.5〜1.8

結論

一般的な本文なら line-height: 1.6; が最も無難。見出しは少し狭めの 1.2〜1.4 にすると、まとまりが良くなります。

行間が狭すぎるとどうなる？

行間が狭い（1.0〜1.2程度）と、上下の行の文字がくっついて見え、目が滑ってしまいます。特に日本語は画数が多いため、英語よりも広めの行間が必要です。

要素	推奨 line-height
本文（長い文章）	1.6 〜 1.8
大きな見出し	1.2 〜 1.4
UI部品（ボタン等）	1.0 〜 1.2

CSSでの書き方の注意

単位（px等）を付けずに、数値のみで指定するのがベストプラクティスです。

body {
  /* 親のfont-sizeに対する倍率で指定されるため、子要素でフォントサイズが変わっても比率が保たれる */
  line-height: 1.6;
}

単位を付けてしまうと、親要素の計算結果が子要素に継承され、文字サイズが大きな子要素で行が重なる原因になります。常に「単位なし」で書きましょう。

あわせて読むと理解が深まる関連記事をまとめました。

トピック	記事
line-height計算 - 読みやすい行間をフォントサイズから算出	line-height計算 - 読みやすい行間をフォントサイズから算出
Golden Ratio 黄金比	Golden Ratio 黄金比｜レイアウトと typography
CSS Gradient 作り方	CSS Gradient 作り方｜linear・radial の指定
JWT token decode オンライン	JWT token decode オンライン｜ペイロード読み方と改ざん検証
OpenAPI 3.1仕様のCIバリデーション完全ガイド	OpenAPI 3.1仕様のCIバリデーション完全ガイド｜Spectral Lint・Breaking Change検出・GitHub Actions
1フレームは何秒・何ms？ 60fpsと120fpsの計算方法	1フレームは何秒・何ms？ 60fpsと120fpsの計算方法
AIクローラー対応 robots.txt・llms.txt 設定ガイド 2026	AIクローラー対応 robots.txt・llms.txt 設定ガイド 2026｜GPTBot・ClaudeBot・Google-Extended・GEO戦略
APIキャッシュ設計ガイド	APIキャッシュ設計ガイド｜ETag・Cache-Control・304・CDNキャッシュキーの実務
Web APIのエラーハンドリング設計	Web APIのエラーハンドリング設計｜RFC 9457・error_code・400/422/409の使い分け
Web APIのべき等性（Idempotency）設計	Web APIのべき等性（Idempotency）設計｜二重決済を防ぐ実装ガイド
API設計におけるページネーションの使い分け：オフセット型とカーソル型の比較	API設計におけるページネーションの使い分け：オフセット型とカーソル型の比較
APIのレート制限（Rate Limiting）実装ガイド	APIのレート制限（Rate Limiting）実装ガイド｜アルゴリズム選定と429エラーの適切なハンドリング

ツール一覧

読みやすい行間の決め方｜line-heightの黄金比は1.5〜1.8

行間が狭すぎるとどうなる？

おすすめの設定値

🖋️ この場で行間（line-height）を確認する

CSSでの書き方の注意

関連記事