其の31
テキストグラフィックに関する配慮
画像の書き出しを行う際、背景とオブジェクトの境界に目に見えない滑らかなグラデーションのようなものをかけ、外観と読みやすさを向上させる「アンチエイリアス」という処理がある【1】。
【1】アンチエイリアスがOFFになっている状態とONになっている状態を拡大した図。ONになっている方はエッジが背景に馴染むようにオブジェクトの色から背景に向かって段々とグラデーションのように薄くなっている
グラフィックツールでは、アンチエイリアスのデフォルト設定はONになっている。イラストや、そのほかのグラフィック的な要素に関してはアンチエイリアス処理が行われていないと、エッジがギザギザになってしまい見た目が悪くなってしまう。
一方、テキストを画像にする場合、アンチエイリアスをかけた文字はきれいにみえるのだが、小さな文字に対してこの処理を行ってしまうと読みにくくなってしまう。
では、どの程度小さい文字にはアンチエイリアス処理が必要でないのであろうか？
大まかにいって、14px以上の文字に対してはかけたほうがきれいだ。かけていないとエッジのギザギザが目立ってしまう。10px以下の文字では、アンチエイリアスをオフにしないと文字が潰れてしまい画面上での可読がほぼ不可能になってしまう【2】。
【2】何段階かの大きさの文字に対し、アンチエイリアスをONにした時とOFFにしたときの状態。文字が大きくなるほど、アンチエイリアスをOFFにす るとエッジのギザギザが目立ってしまう。また、10px以下の小さな文字に関してはアンチエイリアスをOFFにしないと、文字が潰れてしまい、可読性がな くなる
12px前後の大きさに関してはケースバイケースだろう。例えばナビゲーションの日本語に添えるような、読ませるのではなくデザイン的な要素として配置するのであれば設定をONにすればよいし、可読性を優先するのであればOFFにしたほうがいいだろう【3】。
【3】小さなボタンなどに添える小さなテキストは可読性が大切なので、アンチエイリアスをOFFにしたほうがよい
お作法一覧へ
