実用段階を迎えたWeb フォント

掲載日:2015年11月9日

通常のWeb ページは閲覧者のPC 環境にある書体のみで表現されるが、Web フォントという仕組みを利用することで、Web サイト側が指定したフォントをそのまま表示することができる。

Web のフォント環境の推移

インターネットの黎明期である1990年代、Windows やMacOS の搭載フォントも少なく、フォント環境の改善は置き去りにされていた。2000 年代になると通信環境が格段に早くなり、2000 年代後半にはWeb 環境の開発も進み、Web ブラウザー上でできることが増えていった。フォント環境もその一つである。W3C 標準に準拠したモダンブラウザーであれば、リアルなフォントを表示することができるようになった。

通常のWeb ページは、閲覧者のPC 環境にあるフォントだけしか表示できない。そのため、システム搭載の書体で表現されていることがほとんどである。Webページによっては、見出し部分に文字を画像化して貼り付けている。このような画像文字を多用したWebページは、更新も手間がかかり、SEO やアクセシビリティの面で不利となる。また、スマホなどの小サイズ画面ではリフローもされず、拡大表示すると文字のジャギーが目立ってしまう。

Web フォントとは、Web 制作者がフォント名を指定することで、フォントをダウンロードして閲覧者のWeb ブラウザーに表示する仕組みである。テキストデータなので、更新も容易でSEO やアクセシビリティの面でも有利である。小サイズ画面でもリフローされるため、最適表示される。使用方法は、契約したフォントサービスのサーバーURL と書体名をHTML ファイル内に記述するだけである。

海外では、Google Web Fonts やモノタイプが運営しているFonts.com、アドビが買収したTypeKitなどWeb フォントサービスが多数あり、Web フォントが当たり前のように使われている。フォーチュン誌のランキング企業では、90% 以上のWeb サイトでWeb フォントが使用されている。

日本でも2011 年からWeb フォントサービスが始まった。ソフトバンク・テクノロジーのFONTPLUSは主要フォントメーカーの700 書体が利用できる。モリサワのTypeSquareは、パスポートのフォントを使用することができる。

表示速度の大幅改善と導入事例

日本語フォントは文字数が多く、画数も多い。明朝体なら1 書体で9MB となることもある。当初はダウンロードに時間がかかり、実用レベルのレスポンスではなかった。FONTPLUS は、2013 年実際に使用している文字(サブセット)だけをダウンロードするダイナミックサブセッティング方式により、大幅な速度改善を実現した。例えばある2699 文字の文書では、ユニークな文字数は449 文字であり、90KB にすぎない。現時点ではWeb フォントを使用しているかどうか、速度Webフォントを使用した自治体のホームページ では見分けがつかないレベルとなっている。

小田原市の公式サイトで、FONTPLUS のWeb フォントが採用されている。画像文字をほとんど使用していないため、視覚障がい者のためのハイコントラストモード切換えを利用できる。また、Google 翻訳が利用できるため、多言語にも対応しているなど、デザイン性とアクセシビリティを両立している。その他、大手芸能プロダクション、広告代理店、映画会社、芸術大学、アパレルやホテル業界などで利用されている。

(JAGAT 研究調査部 千葉弘幸/全文は『JAGAT info』2015年9月号に掲載)