デバイスフォントとは何か？そのメリットとデメリット

ウェブサイトにおいてフォント(書体)が閲覧者に与える印象というのはとても大きいものです。
そのため、サイトの作り手側としてはどのようなフォントで表示させるかを最初に考えるのですが、ウェブ(Web)フォントを使うか？、それともデバイスフォントを使うか？の選択肢があります。

ウェブフォントとデバイスフォントにはそれぞれメリットとデメリットが存在しますが、それらはサイト制作者側とサイト閲覧者側にとって異なるものです。
つまりフォントにおいては「制作者側にとってのメリットが閲覧者側にとってデメリットになりえる」のです。その逆もまた然りです。

このページではそのあたりについて詳しく解説していきます。
「最近流行っているからウェブフォントを使う」と安易に考えるのではなく、それぞれのメリットやデメリットをきちんと理解した上で選択することが重要です。

デバイスフォントとは

従来、ウェブ上のページに表示されるフォントは閲覧する端末(PCやスマホ)にインストールされているフォントでしか表示ができません。
そのように端末(デバイス)にインストールされているフォントのことをデバイスフォントと呼びます。

例えば、皆さんが今ご覧になっているこのページをWindows7のPCで表示させると、おそらく大多数の方は以下のようなフォントで表示されるでしょう。(時期によってサイトデザインが変わっている可能性があります)

このフォント(書体)は「メイリオ」といい、WindowsではVistaの世代から標準の日本語フォントとしてインストールされているものです。

しかし、これと同じページをMacのPCで表示させると、以下のような表示になります。

フォントの種類が違うのがわかりますね。
このフォントは「ヒラギノ角ゴシック」といい、MacのPCには標準日本語フォントとしてインストールされています。

本来ならば同じページならば同じフォントで表示されるのが当然です。
それなのに上記の例のようにWindows7とMacで違ったフォント表示になってしまうのはなぜでしょうか？
それは、Windows7にはヒラギノ角ゴシックがインストールされていなく、Macにはメイリオがインストールされていないからです。(初期状態で)

それと同じようにAndroidのスマホやiPhoneでも標準でインストールされているフォントの種類は異なるため、同じページでもそこに表示されるフォントは異なったものになります。

デバイスフォントのデメリット

デバイスフォントのデメリットは上記の例を見てわかるように、「表示されるフォントを統一できないこと」です。
そしてそれは同時に「各デバイスにインストールされていないフォントでの表示はできない」ことにもなります。

CSSには表示フォントの種類を設定するためのfont-familyというプロパティがあります。
以下のように記述します。

font-family : 第1候補フォント, 第2候補フォント, 第3候補フォント, ・・・・

このfont-familyで設定できるのはあくまでも「閲覧者のデバイスに入っているフォントの中で、表示に使用する優先順位」ですので、ここにどんなフォントを設定しておいたとしても閲覧者のデバイスにそのフォントが入っていなければそのフォントでの表示はされません。

一般的に、ウェブサイトの制作者や運営者というものは「自分のサイトをこのようなフォントで表示させたい」と考えたりしがちです。
しかし、デバイスフォントではその意図を完全に達成することは不可能なのです。

デバイスフォントのメリット

デバイスフォントにはこれまでに解説したようなデメリットもありますが、大きなメリットもあります。
それは「フォントデータをダウンロードする必要がない」ことです。
その端末(デバイス)にすでに入っているフォントを使用するわけですから当然ですね。

端末に入っていないフォントで表示させたい場合には「画像を使って表示させる」または「Webフォントを使う」という選択肢になるでしょう。
しかしそのどちらも容量面ではデバイスフォントより確実に大きくなります。
容量が大きくなれば、ページの表示はその分遅くなってしまうことでしょう。

印刷物にはない「ページの容量」という概念の重要性

ウェブサイトにおいて「ページ表示の速さ」というのは非常に重要です。
ページ表示の速さには「閲覧者側の通信環境」や「Webサーバの応答速度」なども影響してきますが、「ページ容量をどれだけ軽くできるか」という点も重要です。

「閲覧者側の通信環境」や「Webサーバの応答速度」はサイト制作者側がコントロールできない外部要因によって状況が変わったりする不安定な要素ですが、「ページ容量を軽くする」のは制作者側の努力によって確実に実現できる要素です。

「ページの容量」は印刷物にはない概念ですが、ウェブの世界では非常に重要なものです。
見ようと思ったページがなかなか表示されなくてイライラして閉じてしまった。という経験はおそらく誰にでもあるのではないでしょうか？
その人はもう二度とサイトを訪問してくれないかもしれません。

そのような人が10人に1人の割合で発生するのか、それとも100人に1人の割合で発生するのかでは、それだけで月間・年間トータルでの訪問者数(サイトを見てくれる人の数)は大きく異なってくるでしょう。

まとめ

ウェブサイトやチラシなどの印刷物は人に見てもらうために存在するものです。
ですから、もし自分のサイトのフォントの種類を変えたいと思った際には、

見てくれる人が減るリスクを背負ってまで、表示フォントの種類にこだわるのですか？

ということを考えたうえで決定する必要があるでしょう。
多くの人に見てもらえるサイト、つまりアクセスの多いサイトにするためには、常にそのようなユーザー視点から考えて制作する必要があります。