CSSフォントサイズ指定（メイリオ）のパーセント・ピクセル指定相関一覧

IEやChromeなど一部ブラウザで、スタイルでフォントサイズをピクセルなどで指定すると、ブラウザの文字サイズ変更機能が効かなくなるという問題があります。解決策としては、フォントサイズをパーセントで指定すればよいのですが、構築の際に毎回「○○pxは何%だっけ？」と調べることが多いので、ここで一覧としてまとめてみます。

こちらでは以下の環境で検証した結果を一覧としています。

• OSはWindows7 64bit Professional
• IE8以上、Firefox最新版、Google Chrome最新版（IE6、IE7は切り捨て）
• フォント指定は「メイリオ」

ダミーダミーダミーフォントサイズ10px（font-size:10px;） ダミーダミーダミーフォントサイズ10px（font-size:62%;）

ダミーダミーダミーフォントサイズ11px（font-size:11px;） ダミーダミーダミーフォントサイズ11px（font-size:69%;）

ダミーダミーダミーフォントサイズ12px（font-size:12px;） ダミーダミーダミーフォントサイズ12px（font-size:75%;）

ダミーダミーダミーフォントサイズ13px（font-size:13px;） ダミーダミーダミーフォントサイズ13px（font-size:81%;）

ダミーダミーダミーフォントサイズ14px（font-size:14px;） ダミーダミーダミーフォントサイズ14px（font-size:87%;）

ダミーダミーダミーフォントサイズ15px（font-size:15px;） ダミーダミーダミーフォントサイズ15px（font-size:93%;）

ダミーダミーダミーフォントサイズ16px（font-size:16px;） ダミーダミーダミーフォントサイズ16px（font-size:100%;）

ダミーダミーダミーフォントサイズ18px（font-size:18px;） ダミーダミーダミーフォントサイズ18px（font-size:112%;）

ダミーダミーダミーフォントサイズ20px（font-size:20px;） ダミーダミーダミーフォントサイズ20px（font-size:125%;）

ダミーダミーダミーフォントサイズ22px（font-size:22px;） ダミーダミーダミーフォントサイズ22px（font-size:138%;）

ダミーダミーダミーフォントサイズ24px（font-size:24px;） ダミーダミーダミーフォントサイズ24px（font-size:150%;）

ダミーダミーダミーフォントサイズ26px（font-size:26px;） ダミーダミーダミーフォントサイズ26px（font-size:162%;）

ダミーダミーダミーフォントサイズ30px（font-size:30px;） ダミーダミーダミーフォントサイズ30px（font-size:188%;）

ダミーダミーダミーフォントサイズ32px（font-size:32px;） ダミーダミーダミーフォントサイズ32px（font-size:200%;）

※値はおおよそなので、お好みで微調整してください。

以前はブラウザによってフォントの大きさが異なるため、統一するために「fonts.css」を使ってクロスブラウザ対応するという事もありましたが、モダンブラウザのバージョンアップも経て、フォントサイズについてはだいぶ互換性が整理されてきたように感じます。