Webデザインにおいてline-heightは文字の可読性や行間の余白を調整する重要なプロパティです。しかし単位の指定や継承の仕組みを理解していないと、思った通りに余白が調整できなかったり、デバイスごとに見え方が崩れることがあります。ここではline-heightの正しい使い方と注意点を解説します。
line-heightの基本
line-heightは行の高さを指定するプロパティで、文字の上下に余白を作り可読性を高めます。指定方法には数値・長さ・パーセント・normalがあります。
p {
line-height: 1.6; /* 単位なし（推奨） */
line-height: 24px; /* 絶対値 */
line-height: 160%; /* パーセント */
line-height: normal; /* ブラウザの既定値 */
}
単位なし指定を推奨する理由
line-heightを単位なしの数値で指定すると「フォントサイズ × 指定値」で計算されます。この場合は子要素にも数値そのままが継承され、可読性を保ちやすくなります。pxや%で指定すると、親のフォントサイズに依存して予期せぬ余白になることがあるため注意が必要です。
body {
font-size: 16px;
line-height: 1.6; /* 子要素も1.6倍で継承 */
}
行間調整の実例
見出しと本文では適切なline-heightが異なります。大きな文字には狭め、小さな文字には広めの行間を設定すると読みやすくなります。
h1 {
font-size: 32px;
line-height: 1.2; /* 詰めて迫力を出す */
}
p {
font-size: 16px;
line-height: 1.6; /* ゆとりを持たせて読みやすく */
}
vertical-alignとの関係
inline要素の上下位置はline-heightに影響を受けます。アイコンフォントやインライン画像がずれる場合は、line-heightの指定やvertical-alignで調整すると安定します。
button {
font-size: 14px;
line-height: 1; /* 行高を詰める */
}
button img {
vertical-align: middle;
}
レスポンシブ対応での注意点
レスポンシブデザインではフォントサイズが可変になることがありますが、line-heightを単位なしで指定すれば比率で自動的に調整されます。メディアクエリでフォントサイズを変更しても、可読性を保ちながらスケーリングされるのが利点です。
よくある誤解
– pxでline-heightを固定すると、異なるフォントサイズでの見え方が不自然になる
– %指定は親要素のline-height基準となるため、意図しない余白が生じやすい
– normalはブラウザ依存で数値が変わるため、統一したい場合は明示的に指定する
まとめ
line-heightは「単位なしの数値」で指定するのがベストプラクティスです。見出しや本文ごとに適切な値を使い分けることで可読性が向上し、レスポンシブ環境でも安定した余白が得られます。特に本文は1.5〜1.8程度を目安に設定すると、デバイスを問わず読みやすいレイアウトを実現できます。
