Web’Notes

読みやすい行間と文字サイズ

Books By: Rodrigo Galindez

ブラウザのデフォルト設定だと、行間隔が詰まりすぎたり、文字が大きい、または小さいすぎるなど、やや読みづらいものとなってしまいます。

文字のサイズや行と行の間隔を適切なものにするだけで、文章を読みやすさを格段にUPできます。

今回は、「文字サイズ」「行間」「文字間隔」の3つに焦点を当てて、どういった設定が読みやすいかを調べてみましたので紹介します。

1. 読みやすい文字サイズ
2. 文字サイズの指定方法
3. 読みやすい行間
4. 読みやすい文字間隔

• Webで文章を書くときに最初にやっておくCSSの設定
• 見やすいフォントとは・・・

読みやすい文字サイズ

文字サイズを決める前にどうゆうサイトなのかをはっきりさせておく必要があります。

例えばニュース系のサイトでは、大き目の文字を使用し、ブログなどのややレイアウトを重視するサイトでは、小さめの文字を使用しています。
具体的には、大体16pxあたりがニュース系で良く利用され、14pxあたりがブログなどで使用されています。

• 文字サイズ：16pxの文字
• 文字サイズ：15pxの文字
• 文字サイズ：14pxの文字
• 文字サイズ：13pxの文字

文字が大きいと「可読性」は上がりますが全体的にのっぺりとした印象となります。
逆に文字サイズを小さくした場合は、「可読性」は下がりますが全体としてスマートな引き締まった印象になります。

文章に特化させたいにであれば、大きめの16,15pxを全体の見栄えも考えるならば、小さめの14,13pxが理想的です。

Yahoo ニュース

伝わるデザイン, weboxe blog

文字サイズの指定方法

文字サイズの指定でよく利用される単位には2つあります。

絶対指定のpxと相対指定のemです。
pxは、どの環境でも同じサイズとなりますが、emは環境により、サイズに違いが出ます。

1emは一文字分の大きさを表し、デフォルトでは16px相当に当たります。

ただし、ブラウザの設定で文字サイズをの大小を変更すると、1文字分のサイズが12pxや18pxに変わってしまいます。
ページの作成者はデフォルトのサイズのみ指定し、後はユーザごとに見やすい文字サイズに変更できるのがemの強みです。

pxは逆に文字の大小を指定しても文字サイズの変更はされません。
そのため、タイトルやサイト名などのレイアウトの一部として使用する文字はpx指定にし、文章はem指定にするのが理想的です。

見やすい行間

見やすい行間は、一般的に文字の半分から、1文字分くらいが良いとされています。

多少好みはあると思いますが、個人的には半分程度が読みやすいと思います。

読みやすい文字間隔

当サイトでは、「0.8pt」の文字間隔を指定しています。文字間隔を指定することで文字と文字の間の空け読みやすい文章にすることができます。

以下の例が文字間隔のデフォルト設定と指定を行った場合の見本です。

デフォルト設定だと文字が詰まり過ぎて、やや見ずらく感じます。「0.8pt」～「1.6pt」の間くらいが文字が開きすぎず、詰まり過ぎないちょうど良い間隔だと思います。

もし、自分のWebサイトの文章が読みずらいと感じたら「行間隔」「文字間隔」を変更してみると、ガラッと文章の読みやすさが変化するかもしれません。「行間隔」「文字間隔」の設定自体は簡単なので一度、試してみて下さい。

Design Design, Web, デザイン