BLOG
CSSのline-heightで読みやすい行間に調整する！
cssで行間を調整する場合、通常line-heightプロパティを使用します。いつも思うんですが、行間の空き具合って、かなり大切ですよね。これはWebもそうなんですが、DTPデザインでは特に、行間によって全く違った印象になったりします。文字を読んでほしい場合に、つまりすぎた行間では読む気がしませんよね。逆に広すぎる行間でもおかしいですよね。ちょうどいい、読みやすい適度な行間にすることが大切なんです。
line-heightプロパティの値
<body>に行間を指定する場合は…
body {
line-height: 1.7;
}
line-heightが1.7なら、行間はフォントサイズの1,.7倍ということです。
おや、emや%などの単位はつけないのでしょうか？実は現在では、単位なしの指定がオススメとされています。emや%だと、親要素で計算された行高が、子要素にそのまま引き継がれてしまうんです。つまり、親要素と子要素のフォントサイズが違う場合、子要素には親要素と同じ行間が適用されてしまうんです。逆に単位なしの場合、子要素のフォントサイズに応じて、行間を計算し直してくれるんです。ということから、単位なしの方が便利なんです。
適度な行間は？
一般にline-heightプロパティに指定する数値は1.5〜1.8程度です。ただし、見出しなどサイズの大きな要素は、それよりやや小さく1.2くらいに指定することもあります。
ちなみに主要ブラウザのline-heightプロパティの初期値は、1.5あたりに設定されているんです。長い文章では、行間によって読みやすさも大きく変わってくるので、注意が必要なんです。下のサンプルは、行間は広すぎても狭すぎても読みにくいという例です。
See the Pen
line-heightのサンプル by DeRize (@derize)
on CodePen.
私は1.7が好きですね。1.8もよく指定します。割と余白をとるデザインなので、それくらいが好みです。大切なのは、読みやすい行間にすることなんですね。
