読みやすいテキスト環境を5STEPで考える(PC編)

2020年2月10日

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

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

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

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

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

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

そこで、

・Googleの検索一覧ページ
・Yahoo! Japanの検索一覧ページ
・Amazonの商品詳細ページ
・Twitter
・Wikipedia
・アメーバブログ(カスタマイズされていなさそうな物)

以上のフォント環境を調べてみました。

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

Google

  font-size font-weight line-height font-color
テキスト 14px 400 22px
(157%)
#3c4043
中見出し 20px 400 26px
(130%)
#222222

Amazon

  font-size font-weight line-height font-color
テキスト 13px 400 19px
(146%)
#111111
商品名 19px 400 25px
(132%)
#111111
小見出し 16px 700 21px
(131%)
#cc6600

Yahoo! Japan

  font-size font-weight line-height font-color
テキスト 15px 400 24px
(160%)
#333333
タイトル 24px 700 34px
(142%)
#333333
中見出し 18px 700 27px
(150%)
#222222

Twitter

  font-size font-weight line-height font-color
テキスト 14px 400 20px
(143%)
#14171a
見出し 18px 700 18px
(100%)
#14171a
アカウント 21px 700 28px
(133%)
#14171a

次に、各項目の内容について考えてみたいと思います。

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

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

テキスト

font-sizeは14~16pxくらい。
font-weightは400(normal)。
line-heightは145~160くらい。比較的160前後が多い印象。
colorはタイトルと同じ色か、若干黒を抑えた感じ。

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

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

タイトル

font-sizeは24px、26px、29pxあたり。
font-weightは400(normal)。フォントサイズが大きいので400でもそれなりに目立つ。
line-heightは130前後。上下余白はline-heightよりもmarginあるいはpaddingで調整しているのではないか?(以下見出しも同様)

中見出し

font-sizeは20~24pxくらい。
font-weightはnomarlでも目立つ。

小見出し

font-sizeはテキストを16pxで設定した場合、18~20pxがバランスが良さそう。
font-weightは700(bold)。

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

/*テキスト*/
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;
}

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

平家物語【h1:タイトル】

祇園精舎【h2:中見出し】

本文【h3:小見出し】

祇園精舍の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらはす。奢れる人も久しからず、ただ春の夜の夢のごとし。猛き者もつひにはほろびぬ、ひとへに風の前の塵に同じ。
遠く異朝をとぶらえば、秦の趙高、漢の王莽、梁の朱忌、唐の祿山、これらは皆舊主先皇の政にもしたがはず、樂しみをきはめ、諌めをも思ひ入れず、天下の亂れん事を悟らずして、民間の愁ふるところを知らざつしかば、久しからずして、亡じにし者どもなり。テキスト

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

字間を調整してみる

字間(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になりました。

ちなみに、このコンテンツ幅がちょうど680pxで設定しています(PC環境)。

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

段落間を空けてみる

テキストが多い場合、段落と段落の間が詰まっていると読みにくくなります。そのため、私は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;
}

実際の文章がコチラ

平家物語【h1:タイトル】

祇園精舎【h2:中見出し】

本文【h3:小見出し】

祇園精舍の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらはす。奢れる人も久しからず、ただ春の夜の夢のごとし。猛き者もつひにはほろびぬ、ひとへに風の前の塵に同じ。

遠く異朝をとぶらえば、秦の趙高、漢の王莽、梁の朱忌、唐の祿山、これらは皆舊主先皇の政にもしたがはず、樂しみをきはめ、諌めをも思ひ入れず、天下の亂れん事を悟らずして、民間の愁ふるところを知らざつしかば、久しからずして、亡じにし者どもなりテキスト

という訳で、当サイトではテキスト環境を上記にpaddingで上下余白を調整した物で設定しています。
これが正解かどうかは分かりませんが、少しでも参考になれば幸いです。