サイト職人スタッフブログ

現在、インターネットが様々な場所で利用されるようになり、その場で利用される端末も多種多様です。毎日パソコンからインターネットを利用する人もいれば、スマートフォンから利用する人、大きめのタブレット端末からインターネットを利用する人もいます。そのため、今では多種多様な端末に応じた文字サイズというものを考える必要が出てきます。今回は、Webサイトで読みやすいフォントサイズについて解説していきたいと思います。

フォントサイズに正解は存在する？

ターゲットであるユーザーの年代や、ホームページの質やコンテンツの量を考慮すれば必ずしもこのサイズが正解というものはありませんが、GoogleやAppleなどには推奨されるサイズがあります。
まずはGoogle、Android、iOSで推奨されるフォントサイズを見ていきましょう。

Googleのフォントサイズについて

Googleでは、以下のような情報が公開されています。

• 16pxの基本フォントサイズを利用する。
• 基本サイズに対して相対的なサイズを利用して、フォントの拡大縮小を定義する必要がある。
• 一般的には、ブラウザのデフォルトの行の高さ1.2em がおすすめとなる。
• 多種多様な端末でフォントが期待どおりに拡大縮小されるように、ビューポートを設定しておく。

フォントサイズは16px、行間は1.2emというのがGoogleの基本的な推奨サイズのようです。その中で、多様なデバイスに対応が可能なようにCSSを設定するようにとされています。
続いてAndroidのガイドラインについて、ご紹介します。

Androidのフォントサイズについて

Androidのルールは下記に記載する通りです。

• 極小→12sp
• 小→14sp
• 標準→18sp
• 大→22sp

Googleの推奨サイズと単位が違いますが、利用する端末の解像度ごとに表示サイズが異なるのを防ぐために、pxという単位ではなく、spという単位を利用しています。特に行間に関するルールはありませんでした。

iOSのフォントサイズについて

iOSには明確なフォントサイズの指定というものがありませんが、iOSはフォントの読みやすさというものを優先しているため、最低11ptを推奨しています。小さすぎて見づらいという事が無いように、あとはホームページの質やユーザーの事を考えて、適宜フォントサイズを指定すべきだという事でしょう。

読みやすい基本的なフォントサイズについて

このようにそれぞれ推奨サイズが公開されていますが、大事なのはそのサイズに指定するという事ではなく、ユーザーが読みやすいサイズにするという事です。
読みやすいフォントサイズを考えた時、どのようなページを作成したいのか、事前に決定しておく必要があります。例えば、ニュースサイトを作成する場合、誰もが読みやすい文章を作成しなければいけません。そのため、フォントサイズを一般的なサイズよりも大きくしたり、行間にゆとりをもたせることが推奨されています。一方で、ブログページなどを作成する場合、文字を大きくするのではなくて、フォントサイズを小さくすることでスマートに見せるという事もあります。文字というのは、大きくすれば大きくするほど読みやすくなりますが、スマートではなくなります。逆に文字が小さすぎても、非常に読みづらくなってしまいますので、ページに合わせた調節が必要です。

文章の行間を調節する

フォントサイズも文章を読みやすくする大きな要素ですが、もうひとつ大事なのが行間です。
例えば、長い文章をすべて読もうとすると読みづらいと感じることはないでしょうか。一方で、同じような長さの文章でも読みやすいと感じるサイトがあると思います。同じ文章量であるにも関わらず、なぜこのようなことが発生するかというと、行間が大きく関係しています。文章を読む際、非常に読みやすい行間が設定されているため、何も考えることなく文章が頭に入ってくるということです。一方で行間が詰まっていると、文字の間隔がせまく読みづらいということです。フォントサイズを考える際には、行間も一緒に考えていくことで、今までよりも読みやすいWebサイトが完成するでしょう。

最後に

一般的に、インターネットを利用して情報発信をしている人の中で、フォントサイズまで気にして運営している人というのは、それほど多くないでしょう。多くの方が何も考えずに、基本設定のまま利用していると思います。しかしながら、これからは多種多様なデバイスに対応したフォントサイズも考えてWebサイトを運用していくことで、ユーザーを意識した素晴らしいページが完成するでしょう。