System font is beautiful.

もう、ずぅーと前から気になってた各ブラウザによるフォントレンダリングの違いを一気に解消するべく、こんな物を作ってみた。
Font size reference

今更ではあるが、各ブラウザによってかなりレンダリングに差がある事がわかった。同じMacでもFirefoxとSafariとIEではサイズもアンチエリアスの掛かり方も全然違う。ましてWinでは、がっかりするぐらい違う。全く美しくない。
一番システムフォントを美しく表示できるブラウザはSafariだった。1ポイント刻みのサイズ比較でもスムーズに縮小され表現されている。システムフォントがこんなにも美しいとは思ってもなかった。

cssできちんとフォントファミリーを指定してあげれば、システムフォントだけでも美しい表現が充分出来そうだ。

さらに、フォント指定やCSS関連で興味深いドキュメントが公開されている。

ページ作成のテクニックをまとめた「20 pro tips」が公開されています - PHPプロ！ニュース

７．em単位でフォントサイズを定義する

デザイナーはピクセル単位で定義しがちですが、Webの世界ではInternet Explorerで文字のリサイズが行えないため推奨されません。そのため、em単位で指定することが望まれます。

1emはだいたい16ピクセル相当なので、Bodyタグのフォントサイズを以下の通り62.5%にセットします。

body { font-size: 62.5% }

すると、1emがだいたい10ピクセル相当になるため、12ピクセル相当の文字サイズを表現したい場合は1.2em、9ピクセル相当の場合は0.9emと指定できます。

この方法でフォントサイズを指定するとCSSがゴチャゴチャにならず、かなり楽になるかもしれない。
今度、試してみよう。とたまにはデザイナーらしい事も書いてみる。:-)