メインコンテンツまでスキップ

Web Safe Fonts

グラフィックデザインの分野では、デザインでフォントの選択する際に有名フォントを使用する事が多い。 有名な英字書体として、セリフ体ではBodoni, Times New Roman, Garamond、サンセリフ体ではHelvetica, Futura, Frutigerなどが挙げられる。(それぞれのフォントの特徴については記述しない。)

これらの中で、HelveticaやTimes New RomanなどはWEB上でも使用可能と判断してよいが、Bodoni, FuturaなどはCSSにそのまま指定しても無効であると考えるべきである。この違いはWeb Safe Fontsで判断できる。Web Safe Fontsとは、OSにプリインストールされており、ほとんどのデバイスで表示できるフォントの事を言う。 (Web Safe Fontsに該当している書体はOSのバージョンアップなど時代の変化により更新されていく。どのフォントがWeb Safe Fontsに該当するかはW3Cなど信頼出来るソースを提供しているサイトを確認すること。)

/* OK */
font-family: Helvetica, 'Times New Roman';

/* NOT OK */
font-family: Bodoni, Futura;

Web Safe Fontsに関する知識があれば、デザインに細かな指示がない場合でも、以下のように判断することが可能になる。AはWeb Safe Fontsの知識がない、BはWeb Safe Fontsの知識がある。

  • デザイン上でメインのキャッチコピーにWeb Safe Fontsではない書体が使用されている。
    • A)デザイン確認のためクライアントに書体を要求する。自分の環境で表示されたので、多くの端末で無効であるのにCSSで指定してしまう。
    • B)デザイン確認のためクライアントに書体情報を訪ね、Web Safe FontsでもWeb Fontでもない場合、アウトライン化されたデザインデータを要求し画像で書き出す判断ができる。
  • デザイン上でテキスト本文にWeb Safe Fontsではない書体が使用されている。
    • A)デザイン確認のためクライアントに書体を要求する。自分の環境で表示されたので、多くの端末で無効であるのにCSSで指定してしまう。
    • B)クライアントに書体について説明し、代わりにWeb Safe FontsかWeb Fontを指定する事を許可してもらう。

日本語のWeb Safe Fonts

日本語にも英語フォントと同様にWeb Safe Fontsが存在する。しかし、日本語は文字数の多い言語なので、活発に新しいフォントが開発されにくいため、OSにプリインストールされているフォント数は少ない。2022年現在の日本語のWeb Safe Fontは数はあまり多くない。