標準フォントを指定する

FONT FAMILY

フォントの指定方法は大きく二通りあります。
一つは「Webフォント」。もう一つはOSに標準でインストールされた「標準フォント」を指定する方法です。ここでは主に後者の標準フォントについてまとめます。

標準フォントを指定する理由



ホームページのフォントは「Webフォント」の利用が一般的になりました。これはページを表示すると同時にフォントデータも一緒にダウンロードする仕組みです。環境を問わず希望通りのフォントが表示できるため、明朝体や装飾としてのフォントにも利用できます。

ただしWebフォントにも欠点はあります。フォントデータは容量がどうしても大きくなるため、ページの表示が遅くなります。一応ファイルを分割するなど速度を改善する工夫がされていますが、仕組み上どうしても避けられない部分になります。

その欠点をどうしても避けたいという場合は、かつてのように「標準フォント」を指定する形になります。

標準フォントを指定するリスク

この方法はデータのダウンロードが必要ないため、ページの表示速度に影響はありません。ただ仕組み上、下記のような課題があります。

  • 端末(各OS)ごとにインストールされているフォントが異なる
  • Androidはバージョンやメーカーによって仕様が異なり全てを把握できない

このため、指定したフォントが必ず表示される訳ではない、という前提でデザインすることになります。明朝体や装飾としてのフォントも意図通りに指定できないため避けるべきです。

ただ下記のようなケースでは、標準フォントを指定するメリットは大きいと思います。

  • デザインを重視しないテキストベースのブログや情報サイト
  • SEO(表示速度)を極端に重視するサイト

CSSでの標準フォントの指定方法

font-family: sans-serif;

これでいいと思います。将来のメンテナンスも不要です。

  • 「sans-serif」はそのブラウザのデフォルトのゴシック体を指します。
  • 丸ゴシックや明朝体を指定したい場合はWebフォントを検討します。
  • 游書体はmacOSでインストールされなくなりました。
  • 欧文フォントもAndroidを考慮すると標準フォントを指定できません。

標準フォントとWebフォントの折衷案

標準フォントだけでは極端すぎるという場合、デザイン要素として英字だけWebフォントを採用するという折衷案を検討してもよいと思います。
欧文フォント(英字)であればデータとしても軽いので、一つ読み込むくらいであれば、表示速度にも大きな影響はないと思います。


フォントは、サイト設計のベースとも言える重要な要素です。デザインのクオリティを大きく左右し、後から変更しづらいものになります。今ではWebフォントが当たり前になりましたが、必ずしも最善という訳ではありません。標準フォントの採用も含め、慎重に検討する必要があります。

UPDATE: POSTED: 2009.01.13

お気軽にお問い合わせください。
ご依頼の方は「ご依頼方法」の
ページからご覧ください。