font-familyはメイリオがオススメな理由【よく使われる3つのフォントと比較】

CSSではfont-familyでフォントを指定できます。
でも、フォントってたくさんあって、ホームページやブログでは何を使うのが一番いいの!?

私は地方でWebデザイナーを9年ほどやっているものです。
これまでたくさんのサイトを作りいろいろなfont-familyを指定してきました。

そのうえでfont-familyはメイリオを指定することをオススメします。
メイリオはこの文字であり、当サイトでもメイリオを使っています。

font-familyはメイリオがオススメである理由を、Webサイトでよく使われる3つのフォントと比較しながら解説します。

　

比較するフォントは以下の4種です。

Webフォントは表示が遅い

上記はGoogleのWebフォント「Noto Sans JP」です。太さが細かく指定でき、Webフォントの中では一番読みやすくオススメできるフォントです。

「Noto Sans JP」以外にもWebフォントはたくさんあります。Webフォントの登場により利用できるフォントの数は飛躍的に増えました。

　

一方でWebフォントには弱点があります。

フォントファイルのダウンロードが必要ということです。

Webフォントファイルのダウンロードが完了するまで文字が表示されません。記事が真っ白になり何も表示されない状態になります。

1,2秒で表示されるとはいえ、Webではその1,2秒の表示遅延が命取りです。
短気な人だと即直帰してしまうでしょう。

せっかく素晴らしい記事を書いているのに読み込みが遅いという理由だけであなたの記事が読まれなくなります。

ただ、Webフォントを軽くする方法もあります。

　

容量が大きくても一度読み込まれればキャッシュが効くので次回からは文字がすぐ表示されます。　

つまり、PVを集めるサイトではWebサイトは向かない、リピーター向けのサイトではWebサイトでもOKということです。

　

ただし、これから5Gが当たり前になり、表示速度が向上されるとWebフォントのほうが優勢になるかもしれません。

5G…ざっくりいうとすごく早い通信。2時間の映画の動画が3秒でダウンロードできるという。

游ゴシックはchromeで細く読みづらい

上記は游ゴシックです。chromeで見てみてください。

游ゴシックはパソコンに標準インストールされている比較的新しいフォントです。

問題点としてchromeで細くなってしまいます。

特に目の悪い方にとっては非常に読みづらくなってしまいます。

明朝体はパソコンでの長文に向かない

明朝体は筆で書いたようなきれいなフォントです。印刷物ではよくつかわれるフォントです。

ただし、パソコンでは向きません。

パソコンは最低のサイズ単位が1pxであり、筆で書いたようにだんだん細くなる表現が難しく、できたとしても文字が細くなり読みづらくなりがちです。

メイリオは一瞬で表示され、読みやすい

メイリオは語源が「明瞭」であり、読みやすいことを目的として作られたフォントです。また、パソコンに初期インストールされているフォントです。

Webフォントのダウンロードが必要という問題もメイリオにはありません。すぐ表示されます。

游ゴシックや明朝体の細くて読みづらいという問題もありません。そもそも読みやすさを目的として作られたフォントです。

メイリオは比較的昔のフォントです。もしかしたらダサく感じるかもしれません。しかし、ダウンロード不要かつ読みやすいフォントでメイリオ以上のものは今のところまだ出ていません。

タイトルやアクセントには他のフォントでもOK

メイリオがおススメとはいえ、すべての文字のフォントをメイリオにするとおもしろみがないサイトになる場合があります。

基本的な文章はメイリオにして、タイトルやアクセント部分だけWebフォントやその他のフォントにするのはアリだと思います。

まとめ

• Webフォントは表示が遅い（キャッシュがあればOK）
• 游ゴシックはchromeで細く読みづらい
• 明朝体はパソコンでの長文に向かない
• メイリオは一瞬で表示され、読みやすい
• タイトルやアクセントには他のフォントでもOK

　

あくまで現時点です。5Gが当たり前になり通信速度が飛躍的に向上すればWebフォントのほうが優勢になるかもしれません。

以上、font-familyはメイリオがオススメな理由でした。