フォントサイズのベストな設定は？可読性の高いWEBデザインのポイント

WEBサイト制作の時、色づかいなどのデザインはこだわっていても、テキスト部分は適当になっていませんか？

意外と見落とされがちな、見出しやコンテンツなどのテキスト部分。

特に設定せず、デフォルトのまま制作している人も多いのではないでしょうか。

WEBデザインは情報を伝えることが目的なので、デザイン面はもちろんのこと、文章の読みやすさも大切です。

いくら画像が美しくて文章の中身が良くても、文字が読みにくいとユーザーに内容は伝わりません。

文字の読みやすさの基準は、読者の年齢やサイトの目的・雰囲気によっても異なりますが、フォントサイズなどの文字に関する要素によって大きく左右されるのです。

ここでは、読みやすいサイトをデザインするために必要な、フォントに関する重要ポイントをご紹介します。

このポイントを押さえることで、文章が読みやすく伝わりやすくなるうえ、サイト全体の雰囲気も見違えるように洗練されますよ。

WEBデザインの初心者や、「自分のデザインしたサイトが、なんだか読みにくい……」という方は、ぜひ参考にしてください。

こちらの記事では、フォントのサイズについて説明していきますが、フォントの種類について知りたい方はこちらの記事を参考にしてみてくださいね！

参考記事▼
WEBデザインで誰もが使う定番フォント18選！基礎知識も解説します

▼ ▼ 期間限定で無料プレゼント ▼ ▼

WEBデザインを勉強したいけど、やり方がイマイチわからない、、、。そんな方のためにプロがおすすめする7つの最強勉強法をまとめました。ぜひ手に取って勉強をするときの参考にしてくださいね。

無料のうちに受け取る

WEBデザインに最適なフォントサイズは？

文字が読みやすいサイトをデザインするには、まずは本文テキストのフォントサイズを決めて統一し、それをもとに見出しサイズを調整します。

では、実際にフォントサイズの設定はどうすればいいのか、お伝えしていきますね。

フォントサイズは16pxが基本！

まずは、本文テキストのフォントサイズを決めましょう。

基本となる本文テキストのフォントサイズは16pxがおすすめです。

WEBサイトの文字は大体14〜16pxで作られていますが、その中でも16pxは、一番多くの人が見慣れたサイズで、ブラウザのデフォルトのフォントサイズ設定にも多く見られています。

そのため、読みやすさを意識して作られたWEBサイトはほとんどがこのサイズになります。

Googleが推奨しているのも16pxなので、16px以下だと小さくて読みづらいと判断され、「モバイルフレンドリーではない」とモバイルで使用できないことがあります。

検索順位を下げてしまう可能性もあるため、SEOを意識してWEBサイトを作る場合など、特に注意しましょう。

対象ユーザーによってフォントサイズを調整する

基本は16pxを選択するのがベストですが、対象となるユーザーの年齢層によってはもう少し大き目のフォントに設定したほうがよい場合もあります。

例えば子供向けや高齢者向けのサイトであれば、17px～18pxで設定することがおすすめです。

16pxはあくまでも目安です。これが一番だと固定してしまうのではなく、どのような層に一番読まれるかということも意識してフォントサイズを選ばなくてはいけません。

まず、そのサイトがどういった人を対象としているかについて考えましょう。

それからターゲット層にとっての最適解を考えると、自ずとフォントのユーザビリティを意識したWEBサイト作りができます。

10px以下は小さすぎるのでNG

WEBデザインにおいて、最小のフォントサイトは10pxです。

これ以上小さくしたら文字が読めなくなるため、使わないほうがよいです。

これより小さいととても読みづらくなり、7px以下はモニター上で文字が潰れてしまいます。

ブラウザによって最低ラインは変わりますが、PC版GoogleChromの最小フォントサイズも10pxで、9pxに設定しても自然と10pxに切り替わります。

デザイン性を優先して10pxより小さくしたいという場合でも、必要ある文字が読みづらくなってはWEBサイトとして意味がありません。

ユーザーに読んでもらうための記事や重要な情報であれば、最低でも12px以上に設定しましょう。

フォントサイズを決めるときのポイント

特に文章を「読んでもらう」ためのサイトでは、読みやすさに適したサイズのものを使う必要があります。

ただ、全て同じサイズにしてしまうとどこからどこまでが本文なのか、見出しなどと区別がつかなくなってしまいますよね。

そのため、本文のフォントサイズを決めたあとで見出しの大きさも設定する必要があります。

ここでは、よく耳にする「ジャンプ率」とは？パソコンとスマホではフォントサイズを変えるかなどの疑問に対してもお答えしていきます。

初心者が間違えがちな「px」と「pt」の違いについても覚えて、フォントサイズ選びのポイントをマスターしましょう。

読みやすさを優先する

フォントは、読みやすい大きさに設定することが最も大切です。

デザイン性を優先しているサイトの場合は基本サイズが14pxのものもありますが、人によっては読みにくいと感じます。

また、昔のWEBデザインは、12pxくらいのフォントサイズが主流でした。

以前はパソコン画面のサイズが小さく、なるべく文字を小さくして画面上に多くの文字を表示させるという考えだったからです。

現在は大きいモニターが普及しているので、文字は小さいサイズにする必要はありません。

読みやすさを優先させ、特別な場合をのぞいては16px〜18pxの間で調整しましょう。

タイトルの文字サイズは「ジャンプ率」を意識する

本文のフォントサイズを設定したら、それに合わせて見出しのサイズを設定します。

小見出し・中見出し・大見出しの順に、フォントサイズは大きくします。

それぞれ情報の優先度に応じて、適切な大きさに設定しましょう。

ここでポイントとなるのは「ジャンプ率」です。

ジャンプ率とは、要素の大きさの差のことです。

この場合、本文サイズに対しての見出しサイズの比率になります。

本文と見出しの大きさの差が大きいと「ジャンプ率が高い」と表現され、差が小さいと「ジャンプ率が低い」と表現されます。

ジャンプ率によって、印象が大きく異なります。

こちらの画像を見てください。

ジャンプ率が高いと、メリハリがつき、レイアウト次第ではダイナミックで躍動感溢れる印象を与えることもできます。

若い人向けのサイトなどでは、ジャンプ率を高めにしてメリハリをつけたデザインもよく見かけます。

インパクトが強くなるので、読者の視線は本文よりも見出しに集中します。

見出し以外にも明確に伝えたいポイントとなる箇所がある場合、ジャンプ率を高くすると訴求力が高くなるので使ってみてください。

ジャンプ率が低いと、落ち着いた上品な印象になります。

また、安心感や信頼といった印象を与えるので、法律関係や医療関係のサイトはジャンプ率が低めに設定されています。

見出しだけにかたよらずに全体に視線が向くので、本文の内容を細かくじっくり伝えたい場合は、ジャンプ率を低くするのがおすすめです。

サイトの雰囲気と内容に応じた適切なサイズの見出しになるように、ジャンプ率を意識してみてください。

16px~18pxの場合はデバイスを気にする必要ない

パソコンと、スマートフォンやタブレットなどのモバイルではそれぞれ画面の大きさが異なりますよね。

しかし、デバイスごとにフォントサイズを変える必要はありません。

先程基本のフォントサイズとしてご紹介した16px~18pxの場合、パソコン上だけではなく、スマートフォンやタブレットで見ても読みやすいサイズだからです。

ただ、見出しの場合はデバイスの違いを意識する必要があります。

本文に対して見出しが大きいと、パソコン上では違和感なく見れても、スマートフォンなどの画面の小さいデバイスで見た場合、大きくなりすぎて見づらくなる可能性があります。

先ほど解説したジャンプ率などを控えめに作成することを意識しましょう。

フォントサイズがptで設定されていないか注意する

初心者が陥りがちな間違いとして、px（ピクセル）とpt(ポイント）を混同することです。

どちらもフォントサイズの指定で最もよく使われる単位ですが、それぞれ異なるので注意が必要です。

パソコンの画面は小さな点の集合体によって表示されていますが、pxはその点1つを表す単位です。16pxであれば、点が16個集まっているということです。

WEBデザインではレイアウトや画像をpx指定で行いますが、フォントサイズ指定もこちらの単位を使います。

対して、ptは1/72インチ相当で、現実的な長さのことを指します。紙媒体など、制作物を印刷するDTPではこちらの単位が用いられます。

使用するモニタの解像度によって画面解像度（dpi）が異なるため、WEBデザインでptを指定してしまうと、指定したpt通りの大きさに表示されなくなることがあります。

その結果、狙い通りのレイアウトに収まらなくなることも。

これまでこのページで解説してきたフォントサイズは全てpx単位で、WEBデザインをpt指定で行うことはまずありません。

間違えないように、この２つの違いを理解しておきましょう。

フォントサイズの検討に役立つ無料ツール

WEBデザインを始めた最初はどの大きさの見出しがベストなのか悩むものです。本文とのバランスが難しく、イメージを掴みづらいという人もいますよね。

そんな人におすすめなのが、最適なフォントサイズを決める際に役立つ無料ツール「type scale」です。

使い方はとても簡単。本文などベースとなるフォントサイズと比率を入力するだけで自動的に計算され、瞬時に実際の大きさのプレビューを表示します。

実際に本文を入力してプレビューで確認できるので、本文と見出しがどのようなバランスになるのか一目でわかり便利ですよ。

色々比率を変えて試して、そのWEBサイトにふさわしい黄金比率を見つけてください。

＞＞＞「type Scale」はこちら

WEBデザインでの一行あたりの文字数とコンテンツ幅について

読者が目で追いやすく快適に読めるデザインにするためには、１行あたりの文字数とコンテンツの幅も重要なポイントとなります。

一行あたりの文字数の基準は35文字〜50文字

1行あたりの文字数は、35文字〜50文字になるように設定しましょう。

読者の視線の移動にかかるストレスが少なく、快適に読み進められるからです。

1行の文字数があまりに多いと、横への視線移動が大きく負担になりますし、次の行を見失いやすくなるため、読みにくく感じてしまいます。

反対に文字の量が少なすぎると、改行が多くなるため内容が頭に入りにくくなります。

参考に、利用者が多いサービスの１行あたりの文字数を実際に調べてみたところ、以下のようになりました。

Twitter：36文字
Facebook：50文字
note：35文字

どのサービスも読みやすく設計されており、世間の人は見慣れた文字数です。

このことからも、1行あたりの文字数は、35文字〜50文字が最適だということがわかりますね。

コンテンツの幅は640px〜900pxが目安

画像などは画面の幅いっぱいに使うこともありますが、文章の場合はあまりに横に長すぎると読みにくくなります。

読みやすい文章コンテンツの幅は、640pxを目安に設定しましょう。

このサイズは、読者が視線移動するときに目や脳にストレスがかからず読み進めやすいサイズとなります。

また、基準となるフォントサイズに対してちょうど良い文字数にもなるのがこの幅です。

フォントサイズを16pxに設定した場合、640pxのコンテンツ幅に入る最大文字数は640÷16＝40文字です。

文字の間隔を考慮すると実際は35文字くらいとなり、読みやすい文字数になります。

フォントサイズが18pxであれば、最適なコンテンツ幅はもう少し広めになります。

ただし、あまり広すぎると視線移動が大きくるため、最大900pxあたりを目安に考えてください。

WEBデザインでは適切な行間・文字間隔・余白をつけよう

行間や文字の間隔・周囲の余白の取り方によっても、文章の読みやすさは異なります。

見やすい行間は1.5~2.0

WEB上の文章の行間は、1.5〜2.0に設定するのがおすすめです。

行間が狭すぎると、びっしりと文字が並ぶので目が疲れてしまいますし、次に読む行を見失ってしまいそうになりますよね。

かといって行間が広すぎると、読者の視線は縦の移動の幅が大きく、目や脳に負担がかかります。

また改行の度に文章が途切れて見えてしまうので、内容が頭に入りにくくなります。

適切な行間（1.5〜2.0）を設定することで、1行のラインがわかりやすく、読者の目や脳にストレスをかけない快適な読みやすい文章デザインになるのです。

文字の間隔を適切に

文字と文字の間隔にも注意しましょう。

間隔が狭いとキリッとした印象が生まれますが、狭すぎると文字が密集して読みにくくなります。

逆に文字間隔が広いと1文字1文字は見やすくなりますが、広すぎると間延びして内容が伝わりにくくなります。

WEB上で最適な文字間隔の目安としては、文字サイズの5%~10%です。

フォントサイズによって、読みやすくなるように多少の調整をしてください。

なお、WEB上の文章は読者の環境によって改行位置が変わります。

「うまく1行に収めたい」などの理由で、特定の箇所だけ文字間隔を変更しないように注意しましょう。

文章の区切りや周囲には余白をつける

デザインにおいて、余白はとても大切です。

余白の取り方によって、見た目の美しさはもちろん、文章の読みやすさも大きく異なります。

それぞれの見出しや文章のかたまりの周囲に余白があることで、ここまでは関連した情報、それ以外は別の情報だというふうに、区切りがわかりやすくなります。

また、重要な情報を目立たせるために余白を調整することもあります。

そして、余白があることで読者は自然に脳を休められるため、内容を理解しやすくなるのです。

もし、コンテンツの間に余白がなくびっしりが並んでいたなら、読者は目が疲れるうえに混乱してしまいます。

見やすく・わかりやすく・読者に優しいサイトをデザインするためには、適切な余白をとることが大切です。

その他、WEBデザインの文字の見やすさに関わること

その他、読みやすいサイトにするために気を付けるべきポイントをご紹介します。

文字の色はコントラストに注意

サイト内のテキストでよく使われている色というと、「黒」を思い浮かべますよね。

ですが黒といっても実は「ソフトな黒」や「濃いグレー」が使われていることが多く、「真っ黒」はあまり使われていません。

白い背景に真っ黒の文字はコントラストが強く、目に負担がかかりストレスとなります。

なので、少しソフトな黒や濃いグレーを使い、コントラストを弱めて負担を軽減しているんです。

見出しなどの目立たせたい部分はコントラストを強く、本文の長い文章はコントラストを和らげる色を使うと読みやすくなります。
関連記事はコチラ▼
初心者でもわかる！WEBデザインで色を選ぶ基本のポイント

太字を効果的に使う

本文や見出しの中で強調したいものがある場合、太字にするとメリハリがつきます。

フォントの種類やサイズを変えずとも、その部分を目立たせることができ、印象も変わります。

ただし、太字が多いと目が疲れるので、長文は通常の太さのほうが読みやすくなります。

なので、太字は部分的に使うのがおすすめです。

フォントサイズや行間などは本文と見出しそれぞれで統一することが、整然と美しく読みやすいデザインにするコツです。

重要な部分には太字を使うことで、フォントサイズや行間を変えずとも効果的に目立たせることができるので、ぜひ使ってみてください。

フォントサイズをマスターして、美しく伝わるWEBデザインに

適切なフォントサイズの選び方とポイント、注意すべき点などをご紹介しました。

まずは、リードや本文など基本のフォントサイズを決めてから、次に見出しなど他の部分を決めると、バランスよく決まりますよ。

初心者の人は特に

などに注意すると、失敗を防ぐことができます。

フォントサイズ選びのポイントをマスターすれば、WEBサイトに統一感が出たり、ブランドイメージを方向づけすることができます。

適切な大きさの文字を選んで読みやすくし、「読んでもらえる」サイトづくりを目指してください。