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

Books By: Rodrigo Galindez

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

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

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

読みやすい行間と文字サイズ
  1. 読みやすい文字サイズ
  2. 文字サイズの指定方法
  3. 読みやすい行間
  4. 読みやすい文字間隔
関連リンク

読みやすい文字サイズ

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

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

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

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

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

大きめの文字のサイト

Yahoo ニュース

小さめの文字のサイト

伝わるデザイン, weboxe blog

文字サイズの指定方法

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

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

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

pxem
13px0.81em
14px0.88em
15px0.94em
16px1em
17px1.06em

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

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

見やすい行間

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

line-height:1.5em(文字の半分)
WWW ではドキュメント(ウェブページ)の記述には主にHTMLやXHTMLといったハイパーテキスト記述言語が使用される。ハイパーテキストとは、ドキュメントに別のドキュメントのURLへの参照を埋め込むことで(これをハイパーリンクと呼ぶ)インターネット上に散在するドキュメント同士を相互に参照可能にするシステムである。
line-height:1.8em
WWW ではドキュメント(ウェブページ)の記述には主にHTMLやXHTMLといったハイパーテキスト記述言語が使用される。ハイパーテキストとは、ドキュメントに別のドキュメントのURLへの参照を埋め込むことで(これをハイパーリンクと呼ぶ)インターネット上に散在するドキュメント同士を相互に参照可能にするシステムである。
line-height:2.0em(1文字分)
WWW ではドキュメント(ウェブページ)の記述には主にHTMLやXHTMLといったハイパーテキスト記述言語が使用される。ハイパーテキストとは、ドキュメントに別のドキュメントのURLへの参照を埋め込むことで(これをハイパーリンクと呼ぶ)インターネット上に散在するドキュメント同士を相互に参照可能にするシステムである。

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

読みやすい文字間隔

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

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

letter-spacing:normal(ブラウザのデフォルト設定)
WWW ではドキュメント(ウェブページ)の記述には主にHTMLやXHTMLといったハイパーテキスト記述言語が使用される。ハイパーテキストとは、ドキュメントに別のドキュメントのURLへの参照を埋め込むことで(これをハイパーリンクと呼ぶ)インターネット上に散在するドキュメント同士を相互に参照可能にするシステムである。
letter-spacing:0.8pt(当サイトの設定)
WWW ではドキュメント(ウェブページ)の記述には主にHTMLやXHTMLといったハイパーテキスト記述言語が使用される。ハイパーテキストとは、ドキュメントに別のドキュメントのURLへの参照を埋め込むことで(これをハイパーリンクと呼ぶ)インターネット上に散在するドキュメント同士を相互に参照可能にするシステムである。
letter-spacing:1.6pt
WWW ではドキュメント(ウェブページ)の記述には主にHTMLやXHTMLといったハイパーテキスト記述言語が使用される。ハイパーテキストとは、ドキュメントに別のドキュメントのURLへの参照を埋め込むことで(これをハイパーリンクと呼ぶ)インターネット上に散在するドキュメント同士を相互に参照可能にするシステムである。

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

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

divider

Trackback URL

http://webnonotes.com/design/word/trackback/

Comments

  • FenderWest より:

    授業でサイト制作中です。とても参考になりました。有難うございました。

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>