ホームページのフォントで使えるものと使えないものはあるの？どのようなフォントが一般的なの？など、WEBデザイン初心者の方でも一目でわかる。ホームページで使いやすいフォントをまとめてみました。
デザイン性の高いものという見方だけでなく、いかに読みやすいかも重要視されるのがWEBフォント。
よく使われる定番フォントには、誰もが読みやすいという優れた面があります。
では、早速紹介していきましょう。
ホームページで使われるフォントには２種類あります
①システムフォント
システムフォントとは、閲覧者が利用しているデバイスに最初からインストールされているフォントのことです。
閲覧者のパソコンやスマートフォンに入っているフォントですので、表示される速度が早いのが特徴です。
②webフォント
webフォントとはwebフォントサービスの事業者がサーバーなどに置いているフォントを読み込み表示させるものです。ライセンス購入を行いフォントを利用しています。
●システムフォントの種類をご紹介
①遊ゴシック
Windows（8以降）・macOSに標準搭載されているフォントであるため、使用頻度が高いフォントです。読みやすさに重点を置いたデザインなので、文章などに利用されることが多いフォントです。
ホームページの本文などに利用されている割合も高いでしょう。
②游明朝
WindowsとMacに標準搭載されています。「時代小説が組めるような明朝体」をキーワードに、単行本や文庫などで小説を組むことを目的に開発した游明朝体 Rを核とした明朝体ファミリーです。縦組みに重点をおかれています。
③ヒラギノ
読みやすさも存在感も両立した幅広いバリエーションをもつフォントです。CM、ポスター、書籍など様々なシーンで目にすることが多いフォントです。
MacおよびiOSに標準搭載されているフォントです。
④メイリオ
WindowsとMacに標準搭載されています。丸みを帯びた形がディスプレイでの視認性が優れており、もともとはWindowsシリーズ用フォントでした。名前は日本語の「明瞭（めいりょう）」から来ています。
●webフォントの種類をご紹介
①Googleフォント
Googleフォントはプログラミングインタフェースとして利用可能な、完全無料のフォントサービスです。Cssから読み込ませることもダウンロードして利用することもできます。日本語フォントもそろっており、デザインフォントとして利用できるクオリティのものも無料で利用することができます。
②Noto Sans JP
和文Google Fontsにおいて最も使われているwebフォントの一つです。見た目が美しく、大きな特徴があるわけではないため使いやすいため、利用頻度は高いでしょう。
③Adobe Fonts
無料で使える上に利用可能範囲が広く、Adobeアプリケーション上からアクティベートしてすぐに利用する事もできるため非常に便利。Adobe IDに登録するだけで無料で使える（6,000フォント以上）上に、Adobe製品のサブスクリプションをどれか1つでも使っていればAdobe Fontsの15,000以上のフォントが無料で利用できます。
システムフォント・WEBフォントのメリットデメリット
システムフォントのメリットは表示速度が速いことでしょう。閲覧者のデバイスにあるフォントを利用しているため、フォントデータを読み込む必要がないためです。
デメリットは、こちらが指定したフォントデータが閲覧者の端末に入っていない場合、別のフォントが代わりに表示されてしまいます。
つまり、デバイスによって表示されるフォントがバラバラになってしまうリスクがあるのです。
WEBフォントのメリットはデザイン性が高いことにあります。好みのフォントを探すことができ、デザインを助けてくれる良いフォントと出合うことが多いとお思います。
デメリットは読み込む時間がかかり、ホームページ自体の表示を遅らせる可能性があることです。
システムフォントやWEBフォントの使用量などは、ホームページの表示速度や全体のデザインを見ながらデザイナーが上手に判断していく必要があるのです。
まとめ
フォントには大きく分けて2種類あり、それぞれにメリット・デメリットがあります。それらを理解した上で、自分好みのフォント、用途によって選ぶべきフォント、ブランディング要素を考えたフォントなど、デザインや速度と照らし合わせながら選んでいくことが大切だと思われます。