CSS コーナー: 良質なデザインは良質な Web タイポグラフィから

  • Article

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。
なお、本記事中の Internet Explorer 9 は、元記事執筆当時の ( 正式リリース以前の) ものについて記載しておりますのでご了承ください。

【元記事】The CSS Corner: Better Web Typography For Better Design (2010/7/15)

Web ページのデザインから抜け落ちるもの

「Web デザインの 95% はタイポグラフィ」。Web コンテンツの大半がテキストで構成されているにもかかわらず、これまでデザイナーとユーザーは、クライアント オペレーティング システム間で互換性のある、いくつかの決まったフォントしか使用できませんでした。この不自由なタイポグラフィ環境を改善するため、各種ブラウザーに対応できる CSS による手法、グラフィック ベースの解決策 (英語)、プラグイン (英語) など、あらゆる手段が講じられてきましたが、そのどれもが追加の記憶域や帯域幅が必要になったり、アクセシビリティが低下したりといったマイナス面を伴うものでした。

こうしたことから、Photoshop で作成したデザインのモックアップから Web ページを作成する段階で、決まって書体が犠牲になるというのが当たり前の状況でした。

相互運用性に欠ける CSS

この課題を解決するために必要とされたのは、フォント リソースを記述するための相互運用性のある CSS 構文でした。IE では、1997 年から CSS2 の @font-face 規則がサポートされていましたが、この最も初期の実装と CSS3 フォント (英語) をサポートするごく最近の実装は内容が大きく異なるため、すべてのユーザーに対して同一の規則が機能することを保証する CSS のデザイン パターンが開発されるようになりました。Google の Paul Irish 他が開発した安全な @font-face 構文 (英語) はその好例です。

しかし、ブラウザーの種類を問わず動作する @font-face 宣言が作成されても、問題は半分しか解決できませんでした。

異なる Web フォント 形式

Internet Explorer による @font-face の実装は、EOT (Embedded OpenType) フォントをサポートしています。この EOT は、2008 年に W3C に提出 (英語) された圧縮フォント エンコード形式です。一方、Mozilla と Opera は、2007 年の WebKit (英語) に続いて、圧縮されていないそのままの TrueType フォントと OpenType フォントのサポートを追加しています。非圧縮のフォントは、使用許諾契約 (EULA) によって Web サーバーからの配布が許可されていれば、問題なく使えます。フリー フォントの多くは配布を許可されていますが、商用フォントはその大半が配布を禁止されているため、Web 開発者はバラエティ豊かなフォント群をほとんど利用できない状況に置かれています。EOT を使用すれば Web 用に多くの商用フォントをライセンス取得できますが、EOT は IE でしか表示されません。

これは業界の大きな課題となっています。主要ブラウザーがサポートするこれら 2 つのソリューション間に互換性がなく、また、商用フォントの EULA は通常、どちらかのソリューションでしか使用を許可しません。こうした状況から、デザイナーが Web サイト用フォントのライセンスを取得して、さまざまなブラウザーで使用できる TypeKit (英語) のような専用のホスティング サービスが誕生しています。しかし、このようなサービスでは、Web 開発者がサイトで使用したいフォントが十分に揃っていなかったり、1 つもなかったりすることさえあります。場合によっては、1 つのフォント セットを使用するために契約がいくつも必要なこともあります。

WOFF

2009 年後半に、書体デザイナーである Tal Leming 氏 (英語) と Erik van Blokland 氏 (英語) は Mozilla の Jonathan Kew 氏と共同で、Web 開発者の選択肢を狭めることなくフォント ベンダーの抱える問題を解決することを目的とした新しい Web フォント 格納形式 (英語) を提唱しました。この WOFF は高い評価を受け、2010 年 4 月に Mozilla、Opera、Microsoft によって W3C に提出 (英語) されました。今日では Firefox 3.6 が WOFF をサポートし、他のブラウザー ベンダーも着々と対応を進めています (英語)。

フォント ベンダーもこの新しい形式にこぞって関心を寄せており、既に WOFF でエンコードされた Web 用フォントを提供しています。中でも Monotype Imaging (英語)、Ascender Corporation (英語)、FontShop (英語)、Typotheque (英語) などはすばらしい WOFF フォントを提供しており、マイクロソフトでも Test Drive デモ (Web フォント、その他のWeb フォント、英語) で使用しています。

IE9 WOFF の Test Drive デモIE9 WOFF の Test Drive デモ

同一の CSS、同一の Web フォント 形式

Platform Preview 3 から開始した IE9 の @font-face 実装は、CSS3 フォント (英語) モジュールに準拠しています。フォント形式は EOT や WOFF のほか、そのままの非圧縮のフォント (ただし、埋め込み許可がインストール可能に設定されているもの) もサポートしています。

今後の記事では、IE9 の Web フォントのサポートについて詳細に見ていくとともに、ブラウザーの種類を問わないタイポグラフィを実現する手法について追っていきます。Greg Hitchcock 氏は、FontBlog への最新の記事 (英語) で、Web タイポグラフィに用いられているテクノロジの豊かな歴史を、技術的および科学的な視点から解説しています。

今回リリースした Platfrom Preview や、Web タイポグラフィの機能拡張に向けた取り組みに対する皆さまのフィードバックをお待ちしています。

Sylvain Galineau
プログラム マネージャー