css

最近では、どのブラウザでも同じような見え方になるように無理やり調整するのではなく、ブラウザごとに持っているデフォルトのスタイルを生かして制作されるケースも増えているようです。

そのような流れとは逆に、どこまでブラウザごとの文字の見え方（印象）を近づけることができるか挑戦してみたいと思います。

まず初めに、主要なブラウザごとの文字の表示のされかたを比較して、文字の大きさを揃えるところからはじめます。

font-size: 13px を基準としたサンプル

• 青: keywordでのサイズ指定
• 紫: YUI Fonts CSS で使われている値
• 赤: ピクセル(px)でのサイズ指定

紫 と 赤 で指定している部分がどのブラウザでも同じ大きさになっているかどうかがポイントです。
基本の考え方は body の フォントサイズを 13px に指定する Yahoo! UI Library: Fonts CSS をベースにしています。