IE9 のサブピクセル フォント

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

【元記事】Sub-pixel Fonts in IE9 (2010/11/3 12:21 PM)

Internet Explorer 9 は、HTML5 コンテンツのハードウェア アクセラレーション レンダリングの一部として、サブピクセル ClearType® フォント ポジショニングを採用しています。IE9 のベータ版では、この機能に関して多くのフィードバックや質問が寄せられています。この記事の大半は、Web 開発者が注意すべき点について説明するものです。しかし、開発者以外の Windows ユーザーも各自の表示状態に合わせて ClearType を調整することによってメリットが得られるので、まずは、その点から説明しましょう。

ClearType の調整

最適な結果を得るためには、各自の表示ハードウェアに合わせて ClearType を調整する必要があります。

Windows 7 を使用している場合は、コントロール パネルの [デスクトップのカスタマイズ] - [フォント] - [ClearType テキストの調整] にある組み込みの ClearType テキスト チューナーを使用して、ClearType 設定を調整できます。(4 ページで構成されるこのチューナーの 2 ページ目を右に示します。) Windows Vista を使用している場合は、Internet Explorer からオンライン チューナー (英語) を使用できます。(オンライン チューナーは ActiveX コントロールを利用しているため、Internet Explorer から使用する必要があります。)

ClearType とサブピクセル ポジショニングは、液晶ディスプレイのハードウェア特性を活かし、今までのフォント スムージングやアンチエイリアシングを上回る高品質のフォント表示を実現します。これにより、ノート PC や高性能フラット パネル ディスプレイなど、デジタル インターフェイスを備えたカラー液晶ディスプレイにおける読みやすさを高めることができます。CRT 画面での読みやすさも、ある程度向上させることができます。

サブピクセル フォントが Web 開発に与える影響

サブピクセル フォントを使用して計測および表示した場合、Web ページ内のテキストは、ディスプレイの解像度や表示の拡大率が異なる場合でも完全に同じように配置されます。サブピクセル ClearType フォント ポジショニングでは、画面上の文字の文字間隔をこれまで以上に詳細に制御できます。特にサイズの小さい文字の場合はグリフ幅が狭くなるので、各文字の配置を 1 ピクセル単位で行うのか、1 ピクセルより細かい単位で行うのかが大きな違いとなります。サブピクセルでの配置により、テキストを理想的な解像度空間で計測して、自然な位置に表示することができます。この場合、Web ページのテキストの改行位置がユーザーの設定の違いによって変わることもありません。

ClearType フォント表示は、すべての IE9 ドキュメント モードで使用されます。サブピクセル ポジショニングは、IE9 の既定である標準モードでのみ使用されます。IE9 の互換モードである Quirks、7、8 では、1 ピクセル単位のテキスト計測方法が使用されます。

Internet Explorer の以前のバージョンでは、1 ピクセル単位のテキスト計測方法が使用され、フォントのサイズ、文字の幅、および行の高さは最も近いピクセルに丸められます。たとえば、IE8 で 10 ポイントのフォント サイズを指定した場合、ポイントからピクセルへの数学的に正確な変換結果が 13.333 ピクセルというフォント サイズであっても、フォント サイズは 13 ピクセルになります。よく使われるフォント サイズをポイントで指定した場合について、次の表に示します。

指定されたポイント サイズ	正確なピクセル値	丸められたピクセル値	IE8 で表示されるポイント サイズ	IE9 におけるフォント サイズの変化
8 pt	10.67 px	11 px	8.25 pt	小さくなる
9 pt	12	12 px	9 pt	変化なし
10 pt	13.33 px	13 px	9.75 pt	大きくなる
11 pt	14.67 px	15 px	11.25 pt	小さくなる
12 pt	16 px	16 px	12 pt	変化なし
14 pt	18.67 px	19 px	14.25 pt	小さくなる
16 pt	21.33 px	21 px	15.75 pt	大きくなる
18 pt	24 px	24 px	18 pt	変化なし

IE9 の既定である標準モードでは、指定したとおりの結果が得られます。10 ポイントを指定すれば 10 ポイント (13.33 ピクセル) で表示されます (これは、IE8 およびそれ以前よりもわずかに大きいサイズです)。同様に、8 ポイントを指定すると IE9 では 0.25 ポイント小さくなります。

サブピクセル単位の表示とピクセル単位の表示の違い

サブピクセル フォントが Web ページに与える影響を理解するには、以前のバージョンの Internet Explorer でフォントがどのように機能していたかを理解することが重要です。次の 2 つの表では、4 種類のフォント ファミリーについて 2 つのフォント サイズを比較しています。

1 つ目の表では、サンプルのフォント サイズと行の高さをピクセルで指定しています (それぞれ 12 ピクセルと 16 ピクセル)。したがって、IE9 と以前のモードのどちらでも同じフォント サイズと行間が使用されます。これにより、幅の単位が 1 ピクセルか、1 ピクセル未満かの違いだけが現れます。全体的に、IE9 のサブピクセル単位の幅が IE8 のピクセル単位の幅よりもわずかながら細く表示されていることがわかります。これは、標準ウェイトのフォントで一般的な現象です。太字のフォントの場合は、わずかに広く表示されます。この違いは、3 番目のフォント ファミリー Georgia ではっきりとわかります。

IE9 のサブピクセル単位の幅	IE8 のピクセル単位の幅	お使いのブラウザー
		The Quick Brown Fox Jumps Over the Lazy Dog.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Mauris ornare odio vel risus.Maecenas elit metus, pellentesque quis, pretium.
		The Quick Brown Fox Jumps Over the Lazy Dog.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Mauris ornare odio vel risus.Maecenas elit metus, pellentesque quis, pretium.
		The Quick Brown Fox Jumps Over the Lazy Dog.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Mauris ornare odio vel risus.Maecenas elit metus, pellentesque quis, pretium.
		The Quick Brown Fox Jumps Over the Lazy Dog.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Mauris ornare odio vel risus.Maecenas elit metus, pellentesque quis, pretium.
フォント サイズ: 12px、行の高さ: 16px、フォント ファミリー (上から順番に): Verdana、Arial、Georgia、Times New Roman

以下の 2 番目のサンプルでは、8 ポイントのフォント サイズと 1.3em の行の高さを指定しました。既に説明したように、以前のバージョンの IE で 8 ポイントを要求した場合、実際には 11 ピクセル、すなわち 8.25 ポイントのフォントになります。以下に示されている違いは、サブピクセルによる 2 つの効果、すなわち今までより正確な (小さい) フォント サイズと、その小さいサイズにおけるサブピクセル幅の結果です。

IE9 のサブピクセル単位のサイズ	IE8 のピクセル単位のサイズ	お使いのブラウザー
		The Quick Brown Fox Jumps Over the Lazy Dog.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Mauris ornare odio vel risus.Maecenas elit metus, pellentesque quis, pretium.
		The Quick Brown Fox Jumps Over the Lazy Dog.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Mauris ornare odio vel risus.Maecenas elit metus, pellentesque quis, pretium.
		The Quick Brown Fox Jumps Over the Lazy Dog.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Mauris ornare odio vel risus.Maecenas elit metus, pellentesque quis, pretium.
		The Quick Brown Fox Jumps Over the Lazy Dog.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Mauris ornare odio vel risus.Maecenas elit metus, pellentesque quis, pretium.
フォント サイズ: 8pt、行の高さ: 1.3em、フォント ファミリー (上から順番に): Verdana、Arial、Georgia、Times New Roman

上の 2 つのサンプルを詳細に調べると、フォントの cap-height と x-height は同じでありながら、文字幅と行間が異なることがわかります。サブピクセル単位の場合、文字幅と行間は要求されたフォントどおりです。一方、ピクセル単位の場合、フォントの要求は丸められます。

拡大縮小における効果

サブピクセルの技法で計測および表示したテキストは、拡大や解像度の影響を受けないと説明しました。これは、高解像度のディスプレイを備えたノート型パソコンの出荷が大きく増えていることを考慮すると、きわめて重要です。その種のディスプレイでは、Internet Explorer は既定で 125% に拡大されています。

次の図に、IE8 のピクセル単位の幅の場合の現象を示します。125% では、100% のときには折り返されて 6 行目に表示されていた "pellentesque" という単語が 5 行目に収まっています。

この折り返しの違いは、行の長さが変わったために発生しています。次の図は、拡大率 100% で表示された文字列を 1.25 倍に引き伸ばしたものと、拡大率 125% で表示された文字列とを重ねて示しています。

拡大率 100% で表示したものよりも、125% で表示した各行の方が短いことがわかります。これは、1 ピクセルの単位で配置する際の誤差が、拡大率が小さい場合は大きくなるためです。

1 ピクセルより細かい単位でフォントを配置できる IE9 で、同じサンプルを比較してみます。

違いは見られません。これは、100% のサブピクセル幅が、一律に 125% のサブピクセル幅に拡大されているためです。このように一律に拡大縮小できることが、サブピクセル フォント ポジショニングの大きな利点です。また注目すべきは、IE9 ではすべての行の改行位置に変化がないのに対して、IE8 では改行位置が変わっている点です。つまり、Web サイト開発時にはあまり想定しない拡大縮小という動作をユーザーが行うと、Web ページのレイアウトが変化する可能性があるということです。

今後に向けての準備

IE9 のサブピクセル単位でのフォント サイズと文字幅は、将来への重要な一歩です。上の IE9 の例では、拡大や縮小に左右されない方法で表示される文字列を実際に見ていただきました。これは文字列の特性として重要な点です。今後、さらなる高解像度化、ハードウェアの形状に影響を与える新しい要素 (たとえば、指先での拡大縮小が必須エクスペリエンスになるなど)、そして新しい Web 機能 (SVG、HTML5 Canvas、テキストの一律の拡大縮小を前提とする CSS 2D Transforms など) への対応を進める上で大きな意味を持ってきます。

Web 開発者は、1 ピクセルより細かい単位のフォント サイズを使用することで、文字が指定したとおりに表示されることを意識する必要があります。Web ページのデザインではフォントやフォント レンダリングの細かい違いを吸収する必要がありますが、そのような面から考えてもサブピクセル フォントの登場はとても重要です。この利点を活かせば、ページのデザインがデバイスの解像度、拡大縮小に関係なく同じように表示されるようになります。

[IE9 は、サブピクセル ポジショニングを Windows の Direct2D および DirectWrite サブシステムを使用して実装しています。]

—Ted Johnson、Web グラフィック担当プログラム マネージャー

11/8 編集 - 記事の最初の表で、最後の 2 行にあった誤字を修正。