読みやすい記事本文の文字設定(CSS)について

アメブロカスタマイズのわざめーばです。

こんにちは。

先日、記事の読みやすさについて質問をいただきました。

「CSS編集用デザインを使っていますが、そのままでは記事が読みにくいです。記事を読みやすくするには、記事本文の文字をどのようにカスタマイズすればいいですか?」

まず、(ご存知かと思いますが)CSS編集用デザインの初期状態は、↓こんな感じです。

また、参考までに本ブログの記事本文の文字設定と同じようにするには、CSSに↓こんな感じで設定します。

.articleText {
 /* 文字色 */
  color: #000000;
 /* 字体 */
  font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic",Osaka,sans-serif;
 /* 文字サイズ */
  font-size: 14px;
 /* 行の高さ */
  line-height: 1.75;
}

(本ブログの本文が読みやすいと思われる方は参考にして下さいね。ちなみに、背景が白であることを前提に考えています。)

さて、では、どんな設定にすれば最高に読みやすくなるかですが、残念ながら、全ての人にとって読みやすくなる設定というものはありません

読みやすさというものは、読む人によってそれぞれ異なるからです。

例えば、最適な文字サイズ(文字の大きさ)を考えただけでも、

 ・年齢によって見やすい文字の大きさが違います。
 ・同じ年齢でも視力によって違います。
 ・同じ視力でもメガネかコンタクトや裸眼かで違います。
 ・使っているモニターによっても違います。
 ・いつも読んでいる本やサイトなどによっても変わります。
 ・普段どのくらい文字を読むかによっても変わります。

実際、本ブログを読んで下さった方からも、

「とても読みやすいです」

というご意見も、

「読みにくいので何とかして下さい」

というご意見も両方いただきます。

というわけで、読み手にあわせないといけないので、

「これ!」

という普遍的な答えはないんですが、それではつまらないので、一応僕なりの、

「経験上、こうすると読みやすいと思うよ!」

という答えを(若干小難しく)書いてみたいと思いますので、よかったら参考にして下さいね。

背景色は『白』がよい

背景は『白』に限ります。

白は最も明るい色で、背景を白にすると、瞳孔が閉まります。

瞳孔が閉まるとハッキリ見える範囲(奥行き)が広がりますので、文字にピントを合わせやすくなり、結果、疲れにくく、楽に文字を見れるようになって読みやすいと考えられます。

文字色は『黒』がよい

文字は『黒』です。

背景の最も明るい『白』に対して、最も暗い色が『黒』だからです。

このような状態をコントラストが高いと言いますが、コントラストが高いと背景と文字とを見分けることが容易になるため、やはり楽に文字を見れるようになって読みやすいと考えられます。

文字サイズは『14ピクセル以上』がよい

文字サイズが小さいと、画面上で潰れてしまう、あるいは、いくつかの線が省略されてしまう文字が非常に多くなります。

文字が潰れたり省略されると、文字の認識に余計なエネルギーを使ってしまい、何となく読みにくいと感じてしまいます。

もちろん14ピクセルでもそういう文字はありますが、13ピクセル以下と比較すると、ずいぶん少なくなるように思いますので読みやすくなると考えられます。

一行の高さは『2文字分くらい』にするとよい

一行の高さが1.5文字分程度以下だと行間が詰まってしまうため、読んでいる行が変わる時、行頭の位置を捉えるのに目が迷ってしまうことが多く、どうしても読みにくく感じます。

これが、1.75文字~2文字分くらいになってくると、その迷いが軽減され、ずいぶん読みやすくなると考えます。

字体は『メイリオ、ヒラギノ角ゴ』の順にするとよい

現在Windowsに標準で搭載されている『メイリオ』や、Macの『ヒラギノ角ゴ』を、読みやすくてきれいなフォントとして指定する人が増えてきましたが、よく、『ヒラギノ角ゴ、メイリオ』の順に指定されているのを見かけます。

実はこの『ヒラギノ角ゴ』、Macでは非常にきれいに表示されるのですが、僕の経験ではWindowsではあまり美しく表示できませんでした。

なので、Macユーザーが読者の大半を占めることがわかっている場合以外は、メイリオ』を先に書いおくことをお勧めします。

通常はWindowsユーザーが多いと思いますので、Windowsで読みやすくてきれいに表示できるフォントが優先されるようにしておいた方が、読みやすいと感じてもらえる可能性が高いと考えられるからです。

以上、読みやすい記事本文の文字設定について書いてみました。

僕の勝手な思い込みがかなり入っているような気がしますが、よかったら参考にしてみて下さい。

アメブロカスタマイズで人が集まるブログ作り