IE8とIE9でWebフォントのレンダリングを見比べてみる


  • 公開:
  • 更新:
  • 編集:
概要 ▶ The faces behind the typefaces by Gabriel Figueiredoしつこいですが、モリサワのTypeSquareをInternet Explorerで検証してみます。今回はやはりWindowsではシェアの多いInternet Explorer 8についてです。3月のInternet Explorer 6の半強制アップデートで、Windows XPでのInter
The faces behind the typefaces by Gabriel Figueiredo

しつこいですが、モリサワのTypeSquareをInternet Explorerで検証してみます。

今回はやはりWindowsではシェアの多いInternet Explorer 8についてです。
3月のInternet Explorer 6の半強制アップデートで、Windows XPでのInternet Explorer 8の増加も見込まれるので、言及しておかなければならないでしょう。


Internet Explorer 8では「Internet Explorerのフォントレンダリングは2種類用意されている?」で書いたようなCanvas要素に文字を描くことができませんので、普通のdiv要素やp要素に描かれるものだけということになります。(VMLを使えば別なのかな…?)

Internet Explorer 8で表示してみる

それではInternet Explorer 8でTypeSquareのクラウドフォントシミュレータ(ー)を表示した場合はどうなるかを見てみましょう。




なお、表示環境はWindows XP+Internet Explorer 8です。
20120314-Internet-Explorer-8-フォントレンダリング-01

 リード文の「人がいて、文字があり 」の「文字」の横棒が既に消失していますね。
これは厳しいですね…。


拡大して見てみましょう。
20120314-Internet-Explorer-8-フォントレンダリング-02

 文字が細めにレンダリングされているように見えます。


Internet Explorer 9で表示してみる

なお、参考までにInternet Explorer 9(Windows 7)で表示したものも合わせて掲載しておきます。
20120314-Internet-Explorer-9-フォントレンダリング-01


拡大して見てみましょう。
20120314-Internet-Explorer-9-フォントレンダリング-02

Internet Explorer 8より太めでディティールもInternet Explorer 9の方が細かく描画されているように見えます。

タイトルの「文字」という文字も縁が滑らかな表示に見えます。
リード文の「文字」 という文字の横棒もギリギリですが描画されています。
 

表示の違いはClearTypeの精度の違い

このInternet Explorer 8とInternet Explorer 9のレンダリング精度の違いは、ブラウザの違いもありますが、Windows 7とそれ以外のClearTypeの性能の違いともいえます。


Microsoftの公式ブログでWindows 7でのClearTypeの技術的な改善点について以下のように記載されています。
私たちが Windows 7 でもたらしたグラフィックスの向上点の 1 つは、かつての物理ピクセル モデルから移行し、代わりに、いわゆる「デバイスインディペンデント ピクセル」単位 (または「DIP」)、浮動小数点データ型で 1 インチにつき 96 分の 1 である「仮想ピクセル」に関連して新たな設計を行ったことです。このモデルでは、グリフ (あるいはこれに関する他の幾何学的なプリミティブ) を、断片的なピクセルにサイズ変更でき、2 つのピクセル間のどんな場所にも位置することができます。新しい Clear Type 向上点は、グリフのサイズ変更および配置によって、画面のサブ ピクセルを最も理想的な状態に近づけるのを可能にしました。より自然に見える字形を作成し、画面上のテキストを印字品質により同じに見えるようにします。
Windows 7 でのタイポグラフィーとテキスト・レンダリングの進歩 - マイクロソフトのEngineering Windows 7 ブログ - Site Home - MSDN Blogs

Internet Explorer 9では小数点のフォントサイズも精度が高まり、 ようやく まともに動作するようになりました。このこととWindows 7のグラフィックスのピクセルモデルが変更になったことの合わせ技でより理想的なレンダリングが可能になりました。


ざっくりいうと、Windows 7ではフォントレンダリングの精度が上がったと言っても問題ないでしょう。


Microsoftの公式ブログにはWindows 7より前のClearType(上)とWindows 7のClearType(下)を並べたものも掲載されていました。
20120314-Windows7-cleartype-01

「e」「g」はフォントが違うのでは…と思えるくらい文字の形が変化しています(実際に違うような気もする(汗))。
文字の詰めに関してもより正確な詰め方になるため、異なっています。


こうした技術的な進歩により、Internet Explorer 8(on Windows XP)とInternet Explorer 9(on Windows 7)ではWebフォントの表示品質に差が出てきてしまいます。


まだまだWindows XPを利用する方は多いと思うので、結構悩ましい問題かもしれませんね。


それでは。
カテゴリー:

このページをぜひシェアしてください