Webにおいての理想的な行間とは?

eye-catch

おはようございます。お久しぶりです。GWもあっという間に終わり…いつもの忙しい日常が帰ってきましたね…。これから梅雨という少し憂鬱な季節がやって参りますが、適度にゆるーく乗り切りましょう!

今日は行間についての記事です。Webでは、行間のとり方ひとつで読みやすさが全く変わります。ですので、文章を配置する際は、それぞれのフォントサイズに適正な行間を与えてあげることが重要となってきます。

一般的な行間のとり方

一般的には、文字が小さいほど行間を広くとるのが読みやすく、逆に大きな文字は行間が狭くても読みやすいと言われています。それには、下記のような理由が挙げられます。

小さい文字の時に行間が狭いと、一度に複数の行が視界に入ってきてしまうため、とても読みづらくなります。

大きい文字の場合は、文字そのものが大きいので視界に入る行は比較的少なくなります。

そのため、多少行間が狭くても読みやすさに問題はありません。

理想的な行間

文字数の多い場合の行間は、文字サイズの半分から一文字分までの間で調節するのが理想的です。

Webサイトは、1.5倍~1.7倍の行間で構成されているものが多いかと思います。しかし、Webに関しては、全てがこれに従えばいいというわけではありません。

結局のところ正しい行間とは?

Webでは紙と違い、より読みやすさを重視します。

このように文字サイズ関係なく、文字数の少ない見出し、キャプションは行間が狭いです。文字量の多い本文は広めにとっています。こうすることにより、文字サイズの大きい見出しは2行になってもばらばらにならず、一つの塊に見えます。下部のキャプション部分も同じように一つの塊に見えます。すると、自然とこのような3つのブロックに分かれ、情報が見やすく整理されます。

ここで注意しなければいけないのは、行間を広くとった文章は一行が長ければ長いほど、次の行を見失いやすくなるということです。レイアウトのバランスもとても悪いです。

その場合は、このように幅を短くしてあげるととても読みやすくなります。

読んでいてストレスを感じません。(短くする場合、一行が10文字以下だと逆に読みづらくなると言われています。)

・・・・・・・

要するに理想的な行間とは、レイアウトにあわせて常に変化するもの、ということになってきます。

出来るだけ最小限の目の動きで済むような、ストレスの感じないレイアウトと行間がWebにおいては重要ですね。