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に変更するかもしれません。
