はじめに

WEBサイトを制作する際、デザインやレイアウト等いろいろと考えます。
それにあわせて、以前からサイト制作をする際に悩んでいたのがテキスト環境です。

一口にテキスト環境と言っても、ォントサイズ、字間、行間などがあります。

「字が小さすぎる」「行間が詰まりすぎる」等では、良い文章だったとしても非常にもったいないです。

そこで、「読みやすいテキスト環境とは何か」について、私なりに5STEPで考えてみました。

目次

有名サイトのフォントスタイルを確認してみる

読みやすいフォント環境とは何かを考える上で、まず思いついたのがアクセス数の多いテキスト主体のサイトはどうしているのか？です。

そこで、下記サイトのフォント環境を調べてみました。

その結果が以下になります。

Google

Amazon

Yahoo! Japan

Twitter

次に、調べた情報をまとめ、各項目の内容について考えてみたいと思います。

フォントスタイルの設定を考えてみる

各項目の大まかな傾向は以下のような感じです。

テキスト

パソコンの閲覧環境がデスクトップパソコンの場合、以前に比べモニターが大型化しているのでfont-sizeは16pxくらいでも良いかと感じました。

一方ノートパソコンは小型の物もあるので、14pxくらいの方が良いかもしれません。デスクトップとノート（小型）をレスポンシブでサイズを変えるのもアリかな、と思いましたが実際にそのようにしているのでしょうか？

タイトル

中見出し

小見出し

以上を踏まえて、テキスト環境は次のように設定してみました。

/*テキスト*/
p {
　font-size:16px;
　font-weight:400;
　line-height:160%;
　color:#444;
}
/*タイトル*/
h1 {
　font-size:26px;
　font-weight:400;
　line-height:130%;
　color:#222;
}
/*中見出し*/
h2 {
　font-size:22px;
　font-weight:400;
　line-height:130%;
　color:#222;
}
/*小見出し*/
h3 {
　font-size:18px
　font-weight:700;
　line-height:130;
　color:#333;
}

実際に記述したものコチラ。

次に字間を調整してみます。

字間を調整してみる

字間（letter-spacing）については、文字サイズの5～10%の字間を設定すれば、文章が読みやすいとされています。
「字間なし（0％）」「字間5％」「字間10％」でそれぞれ設定したテキストが以下です。

字間なし（letter-spacing:0;）

字間5％（letter-spacing:5%;）

字間10％（letter-spacing:10%;）

5％でも10％でもいずれも読みやすさに大きな差はなさそうですが、個人的には10％の方がより読みやすいのではないかと思います。

次に、1行に入れる文字数を考えます。

読みやすい1行の文字数を考える

1行の文字数については、一般的に全角40字程度が読みやすい文字数と言われているようです。

p {
　font-size:16px;
　font-weight:400;
　letter-spacing:10%;
}

上記でテキストを設定した場合、コンテンツの横幅を680pxの場合で1行に入る文字数が40文字になりました。

ちなみに、このサイトではPCで見た場合の幅を680pxで設定しています。枠内のpaddingによる余白の関係で、1行に37文字が入るよう設定しています。

最後に、私がよくやっている段落の設定を行ってみます。

段落間を空けてみる

テキストが多い場合、段落と段落の間が詰まっていると読みにくくなります。そのため、私は1段落ごとにスペースを空けるようにしています。

スペースを空けるにはpタグを以下のように設定します。

p {
　margin-bottom:2rem;
}

ただし、これだけだと最終段落にも下にスペースができてしまいます。
枠で囲った中にテキストを表示させると、最終段落の下にだけ余計な空白が生まれてしまいバランスが悪いです。

それを回避するために、最終段落だけは空白を作らないようにmargin-bottomを以下のように調整します。

p {
　margin-bottom:2rem;
}
p:last-child {
　margin-bottom:0;
}

これでひととおりのテキスト環境が整いました。

まとめ

以上を踏まえて設定したテキスト環境が以下になります。

/*テキスト*/
p {
　font-size:16px;
　font-weight:400;
　line-height:160%;
　color:#444;
　margin-bottom:2rem;
}
p:last-child {
  margin-bottom:0;
}
/*タイトル*/
h1 {
　font-size:26px;
　font-weight:400;
　line-height:130%;
　color:#222;
}
/*中見出し*/
h2 {
　font-size:22px;
　font-weight:400;
　line-height:130%;
　color:#222;
}
/*小見出し*/
h3 {
　font-size:18px;
　font-weight:700;
　line-height:130%;
　color:#333;
}

実際の文章がコチラ

という訳で、当サイトではテキスト環境を上記を基に余白等を調整して設定しましたが、表示するフォントを変えても環境は変わってくると思います。

これが正解かどうかは分かりませんが、少しでも参考になれば幸いです。