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

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

例を挙げると

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

IEでは「small=16px」ですが

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

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

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

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


具体的には

のようになります。

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

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

10px77%
11px85%
12px93%
13px100%
14px108%
15px116%
16px123.1%
17px131%
18px138.5%
19px146.5%
20px153.9%
21px161.6%
22px167%
23px174%
24px182%
25px189%
26px197%

このパーセンテージを指定したいセレクタに記述します。

例えば、pタグを14pxにしたいのであれば、
とします。

このフォントサイズチャートを用いてサイズを指定しているサイトを最近はよく見かけます。

若干の文字の大きさの違いにより、レイアウトが大きく崩れてしまうこともあるので、ブラウザ間での文字サイズの統一ができるこの方法は、非常に役立ちます。
  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。