読者です 読者をやめる 読者になる 読者になる

CSSでline-heightによる行間の比較

CSSのline-heightで段落などの行間を設定できますが、このブログでは1.7が設定されています。(PCの場合。スマホだと1.8)

すっかりこの表示に慣れてしまったので、改めて見え方を比較してみることにしました。以下はダミーの文章で、line-heightの数値だけを変更しています。

<p style="line-height: 1.0">
本文
</p>

1.0

この段落はline-heightが1.0に設定されています。行間の読みやすさを比較するためのダミー文章です。OSやブラウザ、PC、スマホなど、条件によって見え方は異なると思いますが、行間は適度に空いてる方が読みやすいです。

1.1

この段落はline-heightが1.1に設定されています。行間の読みやすさを比較するためのダミー文章です。OSやブラウザ、PC、スマホなど、条件によって見え方は異なると思いますが、行間は適度に空いてる方が読みやすいです。

1.2

この段落はline-heightが1.2に設定されています。行間の読みやすさを比較するためのダミー文章です。OSやブラウザ、PC、スマホなど、条件によって見え方は異なると思いますが、行間は適度に空いてる方が読みやすいです。

1.3

この段落はline-heightが1.3に設定されています。行間の読みやすさを比較するためのダミー文章です。OSやブラウザ、PC、スマホなど、条件によって見え方は異なると思いますが、行間は適度に空いてる方が読みやすいです。

1.4

この段落はline-heightが1.4に設定されています。行間の読みやすさを比較するためのダミー文章です。OSやブラウザ、PC、スマホなど、条件によって見え方は異なると思いますが、行間は適度に空いてる方が読みやすいです。

1.5

この段落はline-heightが1.5に設定されています。行間の読みやすさを比較するためのダミー文章です。OSやブラウザ、PC、スマホなど、条件によって見え方は異なると思いますが、行間は適度に空いてる方が読みやすいです。

1.6

この段落はline-heightが1.6に設定されています。行間の読みやすさを比較するためのダミー文章です。OSやブラウザ、PC、スマホなど、条件によって見え方は異なると思いますが、行間は適度に空いてる方が読みやすいです。

1.7

この段落はline-heightが1.7に設定されています。行間の読みやすさを比較するためのダミー文章です。OSやブラウザ、PC、スマホなど、条件によって見え方は異なると思いますが、行間は適度に空いてる方が読みやすいです。

1.8

この段落はline-heightが1.8に設定されています。行間の読みやすさを比較するためのダミー文章です。OSやブラウザ、PC、スマホなど、条件によって見え方は異なると思いますが、行間は適度に空いてる方が読みやすいです。

ダミーの文章にも書いている通り、条件によって見え方は異なるので一概には決められませんが、自分の好みとしては1.4~1.7くらいです。こうして見ると1.7でも少し広いかなという気がしてきたので、そのうち1.6か1.5に変更するかもしれません。

www.lucky-bag.com