ブラウザによるフォントサイズの違いと統一

ブラウザによって文字の見た目の大きさが異なる場合があります。
これは、それぞれのブラウザが基準としている文字の大きさが違うからです。

例を挙げると
IE5.x以前 は「100%=small」であり、基準のフォントサイズがmedium。
IE6以降 は「100%=medium」で、基準のフォントサイズがmedium。

IEでは「small=16px」ですが
FireFoxでは「small=13px」。
また、macのFireFox2.xのみ「small=16px」など。

他にもブラウザごとのフォント自体の描画処理能力なども影響します。

このようなブラウザによる文字の大きさの違いをスタイルシートで統一させる方法をご紹介します。

まずはじめに、スタイルシートに下記3つのスタイルをbodyタグへ指定します。

具体的には

のようになります。

この指定により、基準となるフォントサイズが13pxになります。

次にYahoo!開発チームが検証した「フォントサイズをピクセル指定からパーセント指定にした場合に何パーセントになるか」のチャートに従って、パーセンテージを指定します。

10px 77%
11px 85%
12px 93%
13px 100%
14px 108%
15px 116%
16px 123.1%
17px 131%
18px 138.5%
19px 146.5%
20px 153.9%
21px 161.6%
22px 167%
23px 174%
24px 182%
25px 189%
26px 197%

このパーセンテージを指定したいセレクタに記述します。
例えば、pタグを14pxにしたいのであれば、

とします。

このフォントサイズチャートを用いてサイズを指定しているサイトを最近はよく見かけます。
若干の文字の大きさの違いにより、レイアウトが大きく崩れてしまうこともあるので、ブラウザ間での文字サイズの統一ができるこの方法は、非常に役立ちます。

  • このページを共有する