2015/11/1050 Shares

ブログの行間とフォントサイズをCSSで調整して読みやすいデザインにしよう

メジャー

読みやすいブログデザインを目指すなら、余白と配色がポイントです。

以前、ブログ記事本文の横幅と左右の余白 に関してご紹介しましたが、今回は横ではなく縦の余白に着目してみましょう。つまり、1 行目と 2 行目の行間、段落ごとの余白ですね。

また、この設定に深く関わってくる文字のサイズや色をどのようにすれば読みやすくなるのか、サンプルとあわせてご覧ください。

なぜ余白が必要なのか

読者の側に立つと、ブログを小説のように一字一句逃さないよう読むことは少ないと思います。

よほど文才があってぐいぐい引き込まれる記事、または惚れこんでいるブログなら別ですが、たいていはざーっと流し読み。そのなかで、またあとから読もうと思ったものは Pocket したり SNS でシェア、という感じじゃないでしょうか。

流し読みするときは目と脳が自然とキーワードを拾っていきますが、たとえばこのように始めから終わりまで文章がつらなっていたらどうでしょう。

私は今日初めてこの学習院というものの中に這入りました。もっとも以前から学習院は多分この見当だろうぐらいに考えていたには相違ありませんが、はっきりとは存じませんでした。中へ這入ったのは無論今日が初めてでございます。さきほど岡田さんが紹介かたがたちょっとお話になった通りこの春何か講演をというご注文でありましたが、その当時は何か差支があって、――岡田さんの方が当人の私よりよくご記憶と見えてあなたがたにご納得のできるようにただいまご説明がありましたが、とにかくひとまずお断りを致さなければならん事になりました。しかしただお断りを致すのもあまり失礼と存じまして、この次には参りますからという条件をつけ加えておきました。

夏目漱石 私の個人主義

文字のかたまりが目に飛び込んできて、キーワードが拾いづらいですね。どこが重要なポイントなのかわかりづらく、一瞬で「読みづらい」と思われるかもしれません。

では、改行を入れて行間も少し調整してみましょう。

私は今日初めてこの学習院というものの中に這入りました。もっとも以前から学習院は多分この見当だろうぐらいに考えていたには相違ありませんが、はっきりとは存じませんでした。中へ這入ったのは無論今日が初めてでございます。

さきほど岡田さんが紹介かたがたちょっとお話になった通りこの春何か講演をというご注文でありましたが、その当時は何か差支があって、――岡田さんの方が当人の私よりよくご記憶と見えてあなたがたにご納得のできるようにただいまご説明がありましたが、とにかくひとまずお断りを致さなければならん事になりました。

しかしただお断りを致すのもあまり失礼と存じまして、この次には参りますからという条件をつけ加えておきました。

先ほどのギュウギュウづめの文章よりは、いくぶん読みやすいと感じるはずです。

読みやすさというのは正解がなくて、主観的な話になってしまいます。ブログの場合はテンプレート制作者の意図が反映されていますが、まずは自分自身が読みやすいと思う設定にしてみましょう。

余白や配色は CSS で簡単に変更することができます。

余白や配色に関わる CSS プロパティ

おもに以下の CSS プロパティを使って調整していきます。

font-size 文字の大きさ
color 文字の色
margin 段落間の余白
line-height 行の高さ

たとえば、<p> に対してそれぞれこのように指定してみましょうか。

そうすると、記事本文はこのようになります。

私は今日初めてこの学習院というものの中に這入りました。もっとも以前から学習院は多分この見当だろうぐらいに考えていたには相違ありませんが、はっきりとは存じませんでした。中へ這入ったのは無論今日が初めてでございます。

さきほど岡田さんが紹介かたがたちょっとお話になった通りこの春何か講演をというご注文でありましたが、その当時は何か差支があって、――岡田さんの方が当人の私よりよくご記憶と見えてあなたがたにご納得のできるようにただいまご説明がありましたが、とにかくひとまずお断りを致さなければならん事になりました。

しかしただお断りを致すのもあまり失礼と存じまして、この次には参りますからという条件をつけ加えておきました。

イメージにするとこんな感じ。

CSS設定例

margin

文字の大きさが 15px となっており、これを基準として margin と line-height が調整されます。

「em」という単位は、font-size の値を 1 として相対的に計算されます。つまり 2em なら文字の大きさの 2 倍になる、ということですね。

上の例では margin が 2em となっているので、段落の下に 15px の 2 倍となる 30px が余白として反映されます。

margin

15 (px) × 2 (em) = 30 (px)

line-height

line-height は 1.7 となっていますが、これは 1.7em と同じ意味です。

ということは、行の高さが 15px の 1.7 倍で 25.5px として反映されるわけです。

line-height

15 (px) × 1.7 = 25.5 (px)

指定する「値」には他にもいろいろな単位が使えますが、ここでは割愛します。

まずは現在使っているテンプレートでどのような設定がされているのか調べて、単位を変えず数値だけ変えてみてください。

CSS は各ブラウザの専用ツールを使えばすぐに調べることができます。

参考ブログカスタマイズで重宝するブラウザ開発ツールの使い方

ブログでよく使われている設定

いくら読みやすさが主観であるといっても、やっぱり標準的な値に近づけておきたいところ。

というわけで、以下のプロパティに関して目安となる数値をご紹介します。

  • フォントサイズ
  • フォントカラー
  • 行の高さ
  • 段落と段落の余白

※以下、僕がよく読んでいるブログからランダムに 10 個ほど抽出して、PC 表示の最低値と最高値・平均値を調べています。

フォントサイズは14~16px

まずフォントサイズですが、どのブログも 15px 前後としているようです。

何も指定してない場合、または font-size:100% で指定した場合、ブラウザは基本的に 16px で表示してくれます。

ユーザーが任意で文字の大きさを調整していることもありますが、14 ~ 16px が一応の目安といえるでしょう。

Sample

12px にするとちょっと小さすぎますね。注釈やコメントを付け加えるなら良いかもしれませんが、本文にはどうかなと思います。わざと小さくして読ませようとする高等テクニックもありますが…

やはり標準値である 16px ぐらいが一番読みやすいかなと思います。ただ、1 行あたりの文字数も関わってくるので、一概にはなんとも言えません。フォントの種類にもよりますね。

20px になるとちょっと大きすぎるかもしれません。インパクトはあるのですが、文字が大きいとそれだけスクロールする量が増えることも覚えておきましょう。

ちなみに font-size には小数点以下を指定することもできます(IE は小数点第二位まで)。

フォントカラーは濃いグレー

文字の色は黒(#000000)ではなく、濃いグレーが使われていることが多いですね。

白い背景に黒い文字では、コントラスト比が高すぎてあまり目に優しくありません。薄くしすぎても視認性が悪いので、ちょっとだけ薄くするのがポイントです。

このブログでは color を #333 としていますが、ほかにも #434343 や #383838 などが使われていました。


#434343 の色


#383838 の色


#333333 の色


#000000 の色

こう比べると、黒はハッキリしすぎていますね。

通常の文字はグレーで、タイトルや見出し、強調文字を黒にするとメリハリが出るかもしれません。

参考文字色と背景色のバランスが狂うと読みづらい

行の高さは文字の1.7~2倍

各行の高さはフォントサイズに対して 1.7 ~ 2 倍としているブログが多いようです。文字が 16px なら 27.2px ~ 32px ということですね。

前項で触れたとおり line-height の値につけられる単位はいろいろありますが、「単位をつけない」のが一般的です。理由は、親要素で計算された値が子要素にも継承されるから。

難しそうな話ですが、こちらを見るとなんとなく理解できると思います。

【CSS】CSSのline-heightで単位を指定しない理由

単位を px で固定しているブログもありますが、文章の途中で文字の大きさを変えることがあるならちょっと注意が必要です。

サンプルを 2 つご覧ください。

行送りを px で固定

line-height を 16px に固定します。このまま文章を書いていくならよいですが、強調したいところなどで文字を大きくするとどうなるでしょう。あれ、かぶってしまいますね。

行送りに単位をつけず指定

line-height を 1 で指定します。px で固定すると文字がかぶってしまいましたが、この指定では文字を大きくしてもブラウザが計算してくれるのでかぶりませんね。

単位をつけない指定に変更したほうが、全体のバランスをとりやすくなると思います。

段落間の余白は1~2文字ぶん

段落と段落のあいだはおもに margin で調整しますが、padding を使っているブログもありました。

単位は、px で指定しているブログが半分、em で指定しているブログが半分、といった感じですね。いずれの場合も、1 文字から 2 文字ぶん空けるように調整しているところが多いようです。

行の高さとのバランスがポイントなので、セットで考えたほうがよいでしょう。適当に指定すると、どこからどこまでがひとつの段落なのか、というのがわかりづらくなります。

Sample

たとえばフォントを 16px として line-height を 2 にします。
ここまでひとつの段落です。

ここから次の段落ですが、よく見ないと区別がつきませんね…。
margin は 0.5em です。

Sample

フォントサイズを変えずに line-height を 1.5 にしました。
ここまでひとつの段落です。

ここから次の段落です。
margin は 2em にしました。

Sample

文字の色と大きさを変えるとまた印象も変わります。
ここまでひとつの段落です。

ここから次の段落です。
line-height は 1.5 で margin は 2em です。

好みがわかれるところかもしれませんが、個人的には段落ごとに大きめの余白をとっているほうが読みやすいです。

まとめ

各プロパティの目安を表にまとめてみます。

文字の大きさ 14px ~ 16px
文字の色 #333 など濃いグレー
行の高さ 1.7 ~ 2 倍
段落間の余白 1 文字から 2 文字ぶん

Naifix の設定はこんな感じです。

段落だけではなく、見出しや画像とのバランスも考えて調整してみてください。

まずは自分が読みやすいと思うブログのマネをすることから始めてみましょう!

それでは、また。