Nefert : ClearTypeのON/OFFによる表示の差

比較画像は、
左：ClearType…OFF
右：ClearType…ON
となっています。
画像をクリックすると、原寸大で表示されます。

■ Arial

太字で使用するならば、ClearTypeがOFFの状態でも良好にアンチエイリアスが機能してくれます。
問題点を挙げるとすれば、日本語の文章中だとArialフォントの英文はちょっと浮いちゃう、といったとこでしょうか。

■ Verdana

私のお気に入りフォント・Verdana。ディスプレイ上での可読性を重視して作られたフォントってことで、アンチエイリアスは弱め。14px～16pxあたりの表示はちょっと間延びした感じになっちゃうかもしれません。アンチエイリアスを効かせたければ17px以上。

■ Trebuchet MS

12px、13pxあたりでClearTypeを有効にすると、太字にしていても通常のテキストと差があまりでないようです。Cleartypeが無効の時は、12px以上の太字にはアンチエイリアスが効いていますが、12pxの時にはアンチエイリアスのせいで少し可読性が落ちているように感じます。太字で使用するなら、12pxより11pxのほうが良いかも？

■ Lucida Sans Unicode

ClearTypeが無効の状態では、15px以上の太字でフォントの特徴がよく現れるようです。アンチエイリアスが効いていなくても味のある表示になるのが良いですね。使うのであればタイトル部分など、太字でフォントサイズが大きめのところがおすすめ。

■ Century Gothic

ClearTypeが無効だと、フォントサイズが小さい場合かなり可読性が低くなってしまいます。
太字でない場合、アンチエイリアスがきき始めるサイズも22pxあたりなので、通常のテキストに対して使うのはちょっと難しそう。

―――

個人的におすすめの組み合わせ
通常のテキスト ： Verdana
アクセントフォント ： Lucida Sans Unicode

タイトルなど、フォントサイズを大きくして目立たせる時は、できるだけ18px以上になるようにしておきましょう。
ClearTypeが無効でもアンチエイリアスが効き始めるので、きれいに表示されるはずです。

関連記事

• 新着記事に対して新着マークをつける (2009/08/27)
• IE6用max-width・min-width (2008/12/11)
• ClearTypeのON/OFFによる表示の差 (2008/11/30)
• expressionについて（追加情報） (2008/05/30)
• javascriptの荒波に (2008/05/25)