上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ClearTypeはWindows XP以降のOSに採用されているフォントのアンチエイリアシングです。XP以降のOSを使用している方のほとんどがClearTypeをONにしているんじゃないでしょうか。

ClearTypeは英文フォントに対して特に効果を発揮してくれるので、ClearTypeを利用しているとついつい英文フォントを使いたくなったりするのですが、ClearTypeが使える環境での表示に慣れてしまい、その環境でフォントやフォントサイズを選んでしまうと、ClearTypeが利用していない環境では「あれ…なんかフォントかっこわるい…」ということがあったりします。

一応、ClearTypeのON/OFFは設定で変更できるのですが、毎回そんなことをして表示を確かめるのもめんどくさい!

というわけで、この際ClearTypeがON/OFFでの表示の違いをまとめ、参照しやすいようにしてみよう思います。ただ、何だかんだいって面倒なので、調べるフォントは私がよく使う以下のフォントに限定しておきます。
・Arial
・Verdana
・Trebuchet MS
・Lucida Sans Unicode
・Century Gothic
比較画像は、
左:ClearType…OFF
右:ClearType…ON
となっています。
画像をクリックすると、原寸大で表示されます。

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

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

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

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

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

―――

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

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


コメント

    コメントの投稿

    (コメントの編集・削除時に必要)
    (管理者にだけ表示を許可する)

    質問の際のお願い

    テンプレートに関する質問は、それぞれのテンプレート専用の記事にて受け付けています。トップページの「Templates Information」から、各テンプレート用の記事へリンクが張ってあります。

    質問の際には、情報の共有のため非公開コメントはご遠慮くださいませ。
    また、使用しているバージョンによって編集内容が異なる事があるため、多くの場合ソースコードの確認が必要になります。出来る限りブログのURLを入力してください。ブログのURLを公開したくない場合は、質問内容を公開コメントで投稿した後、非公開コメントにてブログのアドレスを追加投稿してくださいませ。

    質問以外のコメントは、ご自由にコメントしていただいて結構です。たくさんのコメントお待ちしております。


    トラックバック

    Trackback URL
    Trackbacks


    Recent Entries

    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。