webフォント

投稿日：
執筆者：
荒砂 智之
ジャンル：
テクノロジー , デザイン

webフォントとは、OSにプリインストールされた規定フォント（以下、デバイスフォント）ではなく、サーバ側で用意されたフォントデータをダウンロードしてブラウザに表示させるシステム、もしくはフォントです。かつて、デバイスフォント以外の書体を使用する場合には、文字を画像化した「画像テキスト」を用いることが一般的でした。しかしこの画像テキストには、以下のような問題があります。

  • テキスト情報が失われる（alt属性で情報を補完しなければならない）
  • 画像化するため、文字の編集に手間がかかる
  • 同じフォントを持つPCでなければ編集できない
  • 高解像度ディスプレイで表示が劣化する（もしくは対応に手間がかかる）
  • 画像が増えて、データ量が肥大化する

特に更新頻度が高いwebサイトや動的にテキストが入れ替わるwebサイトには画像テキストは不向きです。このような画像テキストの問題を解消しながらも、豊かな文字表現を実現できる手段として登場したのがwebフォントです。webフォントは書体情報をサーバ側で保持しているため、閲覧環境を考えず自由に書体を選択できます。一方でテキスト情報も維持されるため、デバイスフォントと同等のメリットが享受できます。

代表的なwebフォント

Google Fonts

完全無償であることから、個人・企業問わず多くのwebサイトに利用されています。欧文は800を超える書体が用意されており、日本語も9種類が提供されています（2017年5月現在）。特にAdobe、イワタと共同開発した「Noto Sans CJK（源ノ角ゴシック）」は日本における最もメジャーなwebフォントです。

TypeSquare

モリサワが持つ豊富な英語・日本語フォントをwebフォントとして使用することができるサービスです。月間10,000PVまでなら1ドメインにつき1書体、無料でwebフォントを利用できるプランもあります。

Typekit

Adobeが展開するWebフォントサービスで、日本語34書体、欧文1200書体を利用できます。2015年にはモリサワのフォントも加わりました。フリーメンバーシップでの利用も可能で、日本語4書体（17ウェイト）、欧文274書体が無料で利用できます。

日本語webフォントの課題と現状

米国の企業サイトの80％以上がwebフォントを導入していると言われていますが、欧文は文字の種類が少なく軽量なデータで済むため、webフォントのデメリットがほとんどなく、Google等が無償提供したことで一気に普及しました。一方、文字の種類が多い日本語のwebフォント導入は欧米ほど進んでいません。文字の種類が多く1書体あたりのデータ量が大きくなることが、以下のようなデメリットを引き起こすためです。

コスト

文字の種類が多いが故に、日本語webフォントでは、表示に必要な最低限の文字情報だけをサブセット化して配信するサーバ側の仕組みが必要になります。このことが日本語webフォントの無償提供を難しくします。一方で、書体の選択がビジネスに大きな影響を与えるとは考えにくく、企業にとっては、webフォントはコストをかける理由を見出し難いソリューションといえます。このことが、有償が前提の日本語webフォントが普及しない最大の要因となっています。ただし最近はGoogleやAdobeなど、無償で利用できる日本語webフォントも増えてきており、この問題は解消される傾向にあります。

スピード

文字の種類が少なくタイプフェイスがシンプルな欧文書体では、1書体あたりのデータが数十～数百KB程度で収まるため、ダウンロードから表示までほとんど時間がかかりません。一方で日本語フォントではゴシック体で約3MB、明朝体は10MBを超えることもあり、ダウンロードから表示までのタイムラグが発生しがちです。サブセット配信技術の高度化によりこの問題は解消されつつありますが、最初にデバイスフォントが表示され、その後webフォントに置き換わる様な挙動を完全に防ぐためには、JavaScriptを使った特別な実装が未だに必要となります。

カーニング

現在、画像テキストを用いる一番の理由は、カーニング（文字詰め）でしょう。画像テキストではPhotoshopなどのグラフィックソフト上で手動でカーニングした文字を画像にするため、詰めを細かくコントロールした文字を表示させることができます。一方、webフォントには文字ごとにカーニング情報を持たせることができないため、文字がバラついた状態で表示されることが前提となります。ただし、CSSのfont-feature-settingsプロパティを用い、プロポーショナルメトリクスと呼ばれるフォントに埋め込まれた「詰め情報」を有効にできるブラウザが普及してきており、カーニングがまったく考慮されない状況は解消されつつあります。とはいえ、画像テキストほどの細かな調整はできず、タイポグラフィにこだわるデザイナーにとっては、webフォントのカーニングは未だ未熟に見えます。

webフォント導入の判断基準

上記のような日本語webフォントの課題や普及状況などを踏まえたうえで、webサイトに用いるフォントについて、私たちの会社では以下のような基本方針を持っています。

まず、画像テキストはできる限り使用しません。バナーやビジュアル内ならともかく、ナビゲーションや見出しなどのUI要素に画像テキストを用いるのは、マルチデバイス時代に最適な実装方法ではないと考えています。画像テキストを用いる最大のメリットであるカーニングも、そもそもカーニングされていない文字の方が多いネットの世界において、ユーザがそのことにストレスを感じたり、ブランドイメージを棄損するほどの品質の劣化を感じたりすることはゼロに近いでしょう。多くはデザイナー側のこだわりに過ぎず、そのために開発効率や運用効率を落としたり、文字情報を文字情報として保持するというHTMLの基本原則に逆らったりすることは、賢明ではありません。

ただし、すべての文字をwebフォント化することもまた、現時点では賢明ではないとも考えています。通信量や読込時間の増加以外に、アンチエイリアスがキレイにかからず、文字サイズによっては読みにくくなることもあります。文字数が比較的少なく、大きく表示されるキャッチコピーや見出しなどに限定的に用い、本文要素などはデメリットもなくユーザも見慣れたデバイスフォントを採用するのが、今の時代のwebサイトにおける最適なフォントの使い方と考えています。