三重県名張市伊賀市のホームページ制作/グラフィックデザイン

Web Studio DeRize(ディーライズ)

BLOG

CSSのline-heightで読みやすい行間に調整する!

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もよく指定します。割と余白をとるデザインなので、それくらいが好みです。大切なのは、読みやすい行間にすることなんですね。


関連するエントリー
ご相談・お見積り

制作のご相談・お見積り(無料)を
受け付けています。

制作についての不安や疑問など、どんなことでもお気軽にご相談ください。 制作会社様からの制作外注依頼もお待ちしております。

電話番号