結論

表題の通りですが、日本語の Web フォントを利用するなら Adobe Typekit を活用しましょう。

Adobe Typekit は、Adobe の提供する Web フォント配信サービスです。Web フォント及び Web フォントを利用するための JavaScript のコードが提供されます。Adobe Creative Cloud の何らかの契約があれば利用することができます。

これまでの日本語フォント問題

かつて、Web デザインにおけるフォントの指定方法は我が国における大きな問題となっていました(大げさ)。その問題の多くは、Mac と Windows で利用できるフォントがまったく異なることに起因していました。メイリオの登場以前は、Windows に標準で美しくレンダリングされるフォントが搭載されていないことも悩みの種でしたが、メイリオの登場によって Windows のフォント厳しい問題(仮)のいくらかは緩和されました。

これまで、日本語フォント問題のブレークスルーはいくつかありました。

  1. Windows 7 にメイリオが搭載
  2. OS X Mavericks と Windows 8.1 に 游書体 が搭載
  3. Source Han Sans(源ノ角ゴシック)の登場

特に、Source Han Sans の果たした役割は大きく、高品質な日本語フォントがオープンソースで、OS にとらわれず利用できるようになったことは革命的でした。

Source Han Sans は素晴らしいフォントですが、インストールされた環境でしか利用できません。いまだにデフォルトブラウザとして IE が多く利用される状況をみても、フォントを追加インストールするプロセスがスタンダードになるとは考えにくいのが実情です。1 この環境依存問題を解消するのが Web フォントです。

Web フォントの登場と残された日本語フォント問題

Web フォントは、フォントセットをオンラインで配信する技術で、OS にインストールされているフォント種類に関わらず、Web サイト管理者が指定したフォントをブラウザ上にレンダリングできるのがメリットです。Google Fonts を使うとすぐに Web フォントを利用できます。モダンな Web デザインではしばしば用いられています。

しかし、日本語における Web フォントの活用には依然問題が残されることになりました。日本語は文字数が非常に多いため、配布するフォントセットのサイズが大きくなるということです。2 "Source Han Sans JP" のフルセットはモバイル通信で配布するには厳しいデータサイズです。JavaScript による対策を講じないと、フォントセットのダウンロードまでテキストがレンダリングされないタイムラグが発生し、ユーザー体験を重視するサイト管理者にとっては新たな悩みの種となっていました。

日本語 Web フォントのサブセット化

そこで試みられたのが、フォントセットを「サブセット化」して利用する方法です。サブセット化とは、一部の文字だけでフォントセットを作成することを指します。実際、ある Web サイト上に存在する日本語の語彙数や文字数というのは日本語の全数に対して非常に限られた割合です。「あいうえお」という五文字のうち、「う」を使用しないことがわかっているのであれば「あいえお」という四文字でセットを作成しても不都合がありません。使用しない文字を削ることで、ファイルサイズを削減することができるのです。

サブセット化には、あらかじめサブセット化したフォントを配布する静的サブセットと、ページ中に存在するフォントから動的にサブセットを作成するダイナミックサブセットという方法があります。いちどリリースしたのちはテキストが変化しないキャンペーンページなどでは静的サブセットが有効でしょう。ブログのように、日々変化していくコンテンツを取り扱う場合、ダイナミックサブセットを利用することになります。

いまのところの最適解は Adobe Typekit の利用

冒頭で述べた通り、Adobe Typekit は日本語のダイナミックサブセットを利用できるサービスです。人気の高いモリサワフォントが提供されたことが最近話題になりました。

一例として以下の日本語フォントが利用できます。

  • 源ノ角ゴシック
  • A-OTF じゅん Pro
  • A-OTF リュウミン Pr6N
  • A-OTF UD新ゴ Pr6N
  • りょうゴシック PlusN
  • 平成丸ゴシック Std

日本語フォントのダイナミックサブセットを利用できるサービスはいくつか存在しますが、Adobe Creative Cloud を契約していると追加料金なしに利用できる点が Adobe Typekit の最大の魅力です。Illustrator の個人向け単体プランであれば月額 980円(税別)です。JavaScript の埋め込みと簡単な設定をすることでアクティブになります。ダイナミックサブセットの読み込みまで若干のタイムラグがありますが、その際もテキストはレンダリングされます。対応フォントが今後も増えていくことが期待できる点もメリットと言えます。

日本語フォントのレンダリングでお悩みのかたは是非ご参考に。


  1. 各種 OS にバンドルされる日を夢見ています。 

  2. 繁体字なども同様です。