読みやすい行間の決め方｜line-heightの黄金比は1.5〜1.8
デザイン CSS UI タイポグラフィ
結論
一般的な本文なら 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 |
🖋️ この場で行間（line-height）を確認する
line-height（倍率） —
CSS —
CSSでの書き方の注意
単位（px等）を付けずに、数値のみで指定するのがベストプラクティスです。
body {
/* 親のfont-sizeに対する倍率で指定されるため、子要素でフォントサイズが変わっても比率が保たれる */
line-height: 1.6;
}単位を付けてしまうと、親要素の計算結果が子要素に継承され、文字サイズが大きな子要素で行が重なる原因になります。常に「単位なし」で書きましょう。