行間を空けてテキストを読みやすくする

|

文章を読みやすくする1つの方法に「行間を空ける」があります。だいたい、行間を文字の0.4個分から0.8個くらい空けると見やすいです。1文字以上空けてしまうと逆に段落がわかりにくくなってしまうので注意です。

行間の指定には「line-height」プロパティを使います。

例えば、1文字分というのは「1em」(大文字のMの高さを基準)で表したり、pxでフォントサイズを指定している場合は「12px」などとフォントサイズと同じ数値を指定すればよいのですが、段落の中でフォントサイズを変更している場合は、文字が重なって表示されてしまう可能性があります。

よって、単位はあえて指定しないほうが無難です。そうすれば、フォントサイズの異なるテキストが段落内で混在していてもテキストが重なることなく、最も大きなフォントサイズを基準に、指定した行間の高さで表示されます。

CSSコード

p {line-height:1.8;}

最近のブログ記事