WEBデザインにおいて推奨されるフォントサイズと最小フォントサイズ

 

WEBデザインにて推奨されるフォントサイズの基準は16px~14pxで、この基準はGoogleやAppleが推奨するフォントサイズです。 ユーザーのことを考えて読みやすい文字や重要な文字のフォントサイズを考えると日本語・英数字とも12px~18pxが基準・適切と言えるでしょう。webデザインにおける最小フォントサイズは10pxが最低ラインのようです。フォントサイズ10px以下で使用したい場合は、CSSを使って縮小が可能。またブラウザ毎に最小フォントサイズが違うようなので、ご参照くださいね。

 

Webデザインにて推奨されるフォントサイズ基準


webデザインの基準フォントは16px~14pxで、この基準はGoogleやAppleが推奨するフォントサイズです。ブラウザのデフォルトのフォントサイズが16pxが多いことも理由の一つと言えるでしょう。ユーザーのことを考えて読ませる文字や重要な文字のフォントサイズ基準は12px以上が理想です。

webサイトにおいて、最近はフォントサイズが小さなWEBサイトが数多く見られますが、フォントサイズの最小基準は10pxと心得えておきましょう。文字サイズが小さすぎると読めなくなってしまいます。モニターでは7pxあたりから文字が潰れてよく見えなくなってしまいます。

ユーザビリティを高める為には、ある程度のフォントサイズは必要で12px以上が好ましいです。近年PCの標準スペックがグレードアップし、大容量の画像や写真が使用できるようになったことで、将来的にフォントサイズは下がる傾向にあるでしょう。

読みやすいフォントサイズがある

webデザイン制作時にユーザビリティを考えた、読みやすい・見やすい文字や重要な文字は12px~18pxが基準ととらえて良いでしょう。
日本語も英語もこのフォントサイズが適していると思います。 GoogleやAppleが推奨するフォントサイズも16px~14pxです。

 

今後フォントサイズ基準は変化していく??

WEBデザインの役割は「多く情報を簡潔に伝える」事が重要であるが、これまではPCを検索してもらうユーザーに読んでもらうことが主流でしたが、近年PCの標準スペックがグレードアップし、大容量の画像や写真が使用できるようになり、文字を読まずして見て伝えることが可能となった為、必然的にベースとなるフォントサイズが下がる傾向にあるでしょう。しかしながら、読んでもらいたい文字や重要な文字のフォントサイズ基準は12px以上が理想です。

 

フォントサイズはSEOに影響する?

皆さんのWEBサイトのフォントサイズは適切ですか?
SEO(Search Engine Optimization:検索エンジン最適化)を考えるならば16px以上を目安にしましょう。フォントサイズが適切かどうかをGoogleはチェックしています。文字のサイズが小さくて読みづらい場合、そのページは「モバイルフレンドリーではない」と判定されてしまうのです。 検索ランキングにおいての要因の一つで、マイナス評価となってしまいます。 Google Search Console(グーグル サーチ コンソール)Google検索エンジンの評価を下げてしまいます。Googleが推奨するフォントサイズは16pxです。

 

Webデザインの最小フォントサイズは?

Google Chromeの最小フォントサイズは10pxです。
webデザインにおいて最小フォントサイズは10pxが最低ラインで、スタイルシートで指定できるフォントサイズの最小値です。ユーザビリティを考えると、基本的にはフォントサイズは10px以上をおすすめします。GoogleChrome(PC版のみ)では9px以下の文字サイズを設定しても10pxに表示が切り替わります。

ユーザーが読みやすいように考えるとフォントサイズは12px以上が理想だと思います。日本語も英語も12px~18pxが基準・適切でしょう。webデザインサイトにおいて最近は、フォントサイズが小さなWEBサイトが数多く見られますが、文字サイズが小さすぎると読めなくなってしまいますので、フォントサイズの最小基準は10pxと心得えておきましょう。

 

最小フォントサイズは10px

Google Chromeは最小フォントサイズが10pxです。 webデザインにおいて最小フォントサイズは10pxが最低ラインで、スタイルシートで指定できるフォントサイズの最小値です。 ユーザビリティを考えると、基本的にはフォントサイズは10px以上をおすすめします。 GoogleChrome(PC版のみ)では9px以下の文字サイズを設定しても10pxに表示が切り替わります。 ユーザーが読みやすいように考えるとフォントサイズは12px以上が理想だと思います。 世界共通12px~18pxが基準・適切と言えるでしょう。

 

ブラウザ毎に最小のフォントサイズが違う?

ブラウザ毎の最小フォントサイズは様々のようですね。
PCでシェア率の高いブラウザ上位(↓以下)を見てみましょう。

    1. Google Chrome
    2. Firefox
    3. Internet Explorer
    4. Edge
    5. Safari

ブラウザ毎の最小フォントサイズは…Google Chromeは10pxで、その他は1pxでした。意外にも1pxまで表示できるとは…。
GoogleChromeのPC版のみ9px以下のフォントは10pxに置き換わります。

 

もしもフォントサイズを最小サイズ10px以下にしたいなら方法はある

CSSにてtransform: scale(0.5);などで縮小は可能です。
しかしモニターでは7pxあたりから文字が潰れてよく見えなくなってしまいますので注意が必要です。
参考までに、あの小さいと感じるFacebookのいいねボタンですら11pxみたいです。
小さくする方法はありますが、あくまで見やすい文字のフォントサイズは12px以上で、webデザインのフォントサイズは、
GoogleやAppleが推奨する16px~14pxが適切な良いフォントサイズであることをお忘れなく。。。

 

【 ま と め 】

  • webデザインの基本フォントは14px~16px。これは2015年からGoogleが推奨するフォントサイズ。
  • 読ませる文字・重要な文字(日本語・英語)は12px~18pxを基準にしよう。
  • webデザイン制作においての最小フォントサイズは10px。
  • 最小フォントサイズはブラウザ毎にあった。PCでシェア率の高いブラウザ上位を確認すると、意外にもGoogle Chromeは10px。その他は1pxであった。
  • フォントサイズ10px以下のフォントを使用したい場合は、CSSを使って縮小可能。