CSSで文字サイズや行間を調整して視認性・可読性を高める

公開日: 2014年01月19日
最終更新日: 2014年02月16日

眼精疲労の男性

ブログ運営において、視認性や可読性を高めるのは非常に重要ですよね!ブログを訪問した瞬間、もしも文章が異常に読みにくかった場合、ユーザーはそのまま離脱してしまうかもしれません。そうならないために、CSSで見やすい文章にしましょう。

もくじ

はじめに

ブログを運営していく上で、視認性や可読性を高めるというのは非常に重要ですよね!

inosh blogが現在インストールしてあるテーマ「賢威」はそういった点も考慮した上で開発されてあるのですが、賢威がデフォルトで設定してある14pxだと少し小さく感じてしまう場合もあります。

【賢威デフォルトスタイル】
font-size:14px; line-height:1.5
フォントサイズは14pxで行間は21px(14px × 1.5)
これが賢威のデフォルトスタイル。
文章の読みやすさには様々な要因が絡むむむむむ。

上の表示例は、賢威のデフォルトのスタイルです。

全然読めるのですが、もし長文が続くとなると、少し圧迫感を感じてしまうかもしれないな~と感じます。(主観)

ということで、CSSでフォントサイズや行間などを調整して、読みやすくカスタマイズしていきたいと思います。

inosh blogに適用したフォントサイズと行間

inosh blogでは、フォントサイズを16pxにして、行間はその1.8倍に指定しています。
ついでに、サイドバーのフォントサイズは12pxになっていたため、14pxにしました。

スタイルシートへは、以下のように記述しています。

mystyle.css

#main-contents{
     font-size:16px;
     line-height:1.8;
}

.sub-column{
     font-size:14px;
}

このスタイルを適用した上で、賢威のデフォルトと比較すると以下のようになります。

【賢威デフォルトスタイル】
font-size:14px; line-height:1.5
フォントサイズは14pxで行間は21px(14px × 1.5)
これが賢威のデフォルトスタイル。
文章の読みやすさには様々な要因が絡むむむむむ。

【inosh blogのスタイル】
font-size:16px; line-height:1.8
フォントサイズは16pxで行間は28.8px(16px × 1.8)
これがinosh blogのスタイル。
文章の読みやすさには様々な要因が絡むむむむむ。

どうでしょうか?
どっちが良いというのは人それぞれなのですが、個人的には少し読みやすくなったように思います。

その他、読みやすいブログにするためには、文字サイズや行間以外に以下のような点にも注意しないといけません。

チェックポイント

  1. 背景色と文字色の相性
  2. 段落を適当な場所で区切る
  3. 段落に適当な余白をつける
  4. 文章(コンテンツ)部分の横幅
  5. 長文になる場合は適当な場所に見出しをつける
  6. 句読点をテンポよく使う
  7. 無駄に文字を装飾しない

特によく見かけるのは、アメブロなどで無駄に文字を装飾しているブログです。

強調したいことがありすぎちゃうのか、太字にしたりフォントを大きくしたり赤字にしたり二重線をひいたり背景色をつけたり。。。

それはもう華やかなブログをよく見かけます。

今なら入会金無料!!とか、20%OFFとか、年末セール中とか、女性の方にはポケットティッシュプレゼントなどなど。

さらにアメブロの場合はアイコン(絵文字?)のようなものも使えるので、目をパチパチさせるような絵文字や、どんぐり頭の可愛い絵文字などを使用し、これでもか!っていうくらい装飾されてたりします。

そうなると、個人的にはかなり読みにくく感じますし、本当に強調したいことが伝わらず曖昧になってしまうような気もします。

どれくらいが最適ということもないのですが、あまり極端に装飾するのだけは避けておきたいところですね。

最後に

読みやすい文字サイズというのは、実際にはかなり個人差があります。

勝手な印象ですが、IT関係の職業に携わっている方などは小さな文字を好む傾向にあるような気がします。

特に、プログラマーさんなどエンジニアの方が運営しているブログだと、小さなサイズ(12pxや13pxくらい)に設定してあるのをときどき見かけます。

もしボーダーラインを設けるとするならば、一般的に12px以下になると文字が小さいと感じる方がかなり増えてくるのではないかな~と私は思っています。

ちなみに私は日々色んなブログを見ていますが、大体の方が14px~16pxにしているようですので、そのあたりに設定しておくと無難かもしれません。

もちろん最適な文字サイズというのは、それぞれのWebサイト・コンテンツ要素・ユーザー層など、状況に応じて変わってくると思います。

ただ、結局はブログを訪問した方の好みにもよりますので、正解はないんですよね^^;

簡単なのは、沢山のブログを見て、自分自身が1番読みやすいと思うブログの文字サイズや行間等を真似するのが、1番早いと思います^^

正解がないとは言っても、記事の視認性・可読性を高めることはブログ運営をするにあたりとっても重要なことですので、妥協せずに突き詰めていきたいところですね。

\(^o^)/ ぼっけぇシェア \(^o^)/

コメントを残す

サブコンテンツ
ページトップへ戻る ページエンドへ進む