Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

CSS 小技集

第10回:Windowsフォントをアンチエイリアスでキレイに見せる方法

投稿日:


メインPCをMacに移して一番驚いたのは、Macで表示されるフォントの美しさかもしれません。
Macでは基本的に全てのサイズのフォントにアンチエイリアス(スムージングともいう)処理が施されています。

アンチエイリアス (Anti-alias) はコンピュータで画像・映像を制作・加工・表示する際に、滑らかな画像を得る処理のこと。

アンチエイリアス – Wikipedia

逆にWindowsではデフォルトではアンチエイリアスがかかっていないのでギザギザした印象の文字になってしまいます。一旦、慣れてしまうとどうしてもこの滑らかな文字が愛おしくなってしまって、なんとかWindowsでもアンチエイリアスにできないかと考えました。特にこのブログのリニューアルにあたって、MacとWindowsの両方で動作確認をするとあまりの違いに愕然としてしまったので、真剣に調べ始めたというわけです。

Windowsフォントでは25pxからアンチエイリアスがかかる

実際にWindowsフォントでアンチエイリアスがかかるフォントサイズを調べてみました。
ここで活躍するのが先に公開したfont checkerですね。ってかこのために作ったんですが。
・Windows標準のMS系フォント
font checker(フォント・チェッカー) | MS UI Gothic,MS Pゴシック,MS ゴシック,MS P明朝,MS 明朝
Windows標準のMS系フォント
23pxあたりから勝手に太字になって、25pxあたりからスムーズな表示になりました。
・Office付属のHG系フォント
font checker(フォント・チェッカー) | HGゴシックE,HGPゴシックE,HGSゴシックE,HGゴシックM,HGPゴシックM,HGSゴシックM,HG丸ゴシックM-PRO,HG教科書体,HGP教科書体,HGS教科書体,HG行書体,HGP行書体,HGS行書体,HG正楷書体-PRO,HGP正楷書体-PRO,HGS正楷書体-PRO,HG明朝B,HGP明朝B,HGS明朝B,HG明朝E,HGP明朝E,HGS明朝E
Office付属のHG系フォント
HG系フォントはMS Officeと一緒にインストールされるフォントです。つまり、正確にはWindows標準フォントじゃないんですが、Officeはほとんどの場合入っているだろうという想定で進めます。(実際、OfficeがないWindowsなんて使う意味なくない?)
ゴシック体はMS系と同じく25pxくらいからアンチエイリアスがきいていますが、注目すべきは明朝体のフォントです。HG明朝B系は19pxから、HG明朝E系はなんと13pxからアンチエイリアスがかかっています。
HG明朝B
HG明朝E
これは、使えそうですね。

フォントサイズを25px以上に設定するか、HG系フォントを使う

調査結果をふまえるとこういう事になるでしょう。ただ、25px以上のサイズを使うのはデザイン上難しいケースもあるかもしれません。結構場所とるしね。それでも、web2.0系とか言われているサイトでは見出しに限らず通常のテキストも大きめフォントを使用する事が増えているようです。一昔前はほとんど小さいフォントだったんだけどなぁ。このあたり流行の遷移が早いのでちゃんと追い付いていかないと取り残されますね。
で、どうしても25px以上のサイズを指定できない場合は、HG系のフォントを選ぶと良いです。気を付けなきゃいけないのはアンチエイリアス処理はギザギザの間を補完しているのでどうしても滲みというか文字が潰れて見にくくなってしまうので、サイズや太さをちゃんと調整してやる事です。
小さいサイズで太字とかやると文字の判別が難しくなりますからちゃんと確認してから使いましょう。

アンチエイリアスが有効だと明朝体がより美しい

意外な発見だったのですが、WEBでは使いずらかった明朝体がやたらと美しく感じます。
明朝体
大きめのフォントにする事もポイントですが、アンチエイリアスによって日本語特有の「ハライ」「ハネ」「トメ」などの曲線がしっかりと表現されるのです。なんか習字を思い出しますね。
明朝体は堅い印象を与えがちなので使いどころは工夫が必要ですが、見出し等のアイキャッチには非常に有効じゃないかと思います。

CSSサンプル

以上を踏まえ、当ブログの見出しフォントスタイルは以下のようにしています。

h1 {
font-size: 30px;
line-height: 40px;
font-family: "ヒラギノ明朝 Pro W6","Hiragino Mincho Pro","HGS明朝E","MS P明朝",serif;
font-style: normal;
font-variant: normal;
font-weight: bold;
}

font-familyの指定を解説しておくと以下の感じです。

1)"ヒラギノ明朝 Pro W6" … MacのFirefox用
2)"Hiragino Mincho Pro" … MacのSafari用(日本語フォント名を処理できないので)
3)"HGS明朝E"            … Windows用
4)"MS P明朝"         … WindowsでOfficeが入っていない人用
5)serif                 … 一般フォントも念のため

まとめ

今回の調査はWindowsXP+IE6で行ったので他の環境では別の結果がでるかもしれません。Vista環境がないのでIE7でどうなるかとか全然分かりませんが、情報お持ちの方はご連絡頂けるとありがたいです。
それからメイリオフォントの表示も気になりますね。そろそろ対応しないといけないのかもしれません。

font checker(フォント・チェッカー)を作りました

-CSS, 小技集

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

ちょっとまった!→FeedBurner経由の分散したブックマークを一つにまとめる方法

つい先日、FeedBurnerのトラッキング用パラメーターを取り除くUserScriptというのを公開したのですが、FeedBurnerやTwitterFeedが勝手に追加してくるパラメーターがウザイ …

Re2: 第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く

修正を重ねている「第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く」で作った関数ですが、ようやく完成系になったかもしれません。 今回は画像(IMGタグ)のonloadの扱い …

Google検索結果を一瞬でエクセルに貼り付けるブックマークレット「Google Top10 TSV」

いやー、この手の記事をずいぶん書いてなかったなぁと反省しつつリハビリ状態のヤガーです。 WEBサイト運営などをやっていると、特定キーワードの検索エンジン表示順位などを調べたりすることがあるのですが、S …

Skypeチャットの隠しコマンド /htmlhistory とBookmarkletで簡単レポート作成術

プライベートと仕事の両方で Skype はかなり前から使っていますが、チャットの内容をどうにか別のファイルにエクスポートしたいと思いました。 Skypeチャットは設定で過去の履歴も保存・表示できるので …

[N]ネタフル x [S]シカマケ = ブログデザイン勉強会 第2回:テーマ曲を決めて自分を更に深堀

昨日はブログデザイン勉強会の第2回がありました。 まずは、前回のおさらいですが1枚絵に自己紹介を描いてきて皆さんに発表。 それから、今のサイトと比べてどうかという事を他の方からご意見いただきました。 …

スポンサードリンク

スポンサードリンク