line-height
テキストの行間を制御する基本的なタイポグラフィプロパティです。適切な行間の設定は可読性に直結し、本文では1.5〜1.8、見出しでは1.1〜1.3程度が一般的です。単位なしの数値で指定するとフォントサイズに対する倍率として計算され、継承時の問題を回避できます。
概要
テキストの行間を制御する基本的なタイポグラフィプロパティです。適切な行間の設定は可読性に直結し、本文では1.5〜1.8、見出しでは1.1〜1.3程度が一般的です。単位なしの数値で指定するとフォントサイズに対する倍率として計算され、継承時の問題を回避できます。
対応ブラウザ
デスクトップ
Chrome 1+
Edge 12+
Safari 1+
Firefox 1+
モバイル
Chrome Android 18+
Safari iOS 1+
Firefox Android 4+
基本構文
CSS
body {
line-height: 1.6;
}
h1 {
line-height: 1.2;
} 実務での使いどころ
-
本文テキストの可読性向上
body要素にline-height: 1.6を設定し、日本語テキストの可読性を確保して長文でも読みやすいレイアウトを作ります。
注意点
- line-heightに単位付きの値(px、emなど)を指定すると、子要素で予期しない行間になる場合があります。単位なしの数値を推奨します。
アクセシビリティ
- WCAGでは行間を少なくともフォントサイズの1.5倍にすることが推奨されています。十分な行間を確保し、読みやすさを向上させてください。