2006.05.26

Windows IE の設定文字サイズとピクセルサイズの関係

Webページはアクセシビリティを考慮するならば、テキストのフォントサイズを相対値で指定する事を推奨しています。しかしフォントの大きさでずいぶんレイアウトや雰囲気が変わってしまうので、デザイナーとしては頭の痛い問題です。
フォントサイズを固定値で指定してもブラウザに文字の拡大・縮小機能があれば問題ありません。しかしブラウザシェアが圧倒的トップのWindows IEにその機能がありません。そして「最大・大・中・小・最小」という曖昧な設定であることです。

以下が「最大・大・中・小・最小」が何ピクセル相当なのかを調べた結果です。

【例:文字サイズ中】
mitame_tyuu.gif

最大 20px(100%) 18px(88%) 16px(75%)
 大 18px(100%) 16px(88%) 14px(75%)
 中 16px(100%) 14px(88%) 12px(75%)
 小 12px(100%) 12px(88%) 10px(75%)
最小 12px(100%) 10px(88%) 8から9pxの中間(75%)

パーセントはサイズ中を基準にサイズを2段階下げる数値を選びました。そのため小・最小ではサイズが変わらないものもあります。パーセントでフォントのサイズが変わるタイミングはブラウザによっても違うのであまり細かく指定しても意味がありません。
また相対値で指定する場合、親となるボックスに対してのパーセントのため、同じ88%でも異なる大きさになるので注意が必要です。

IEのデフォルトが中だとすると16pxというのはずいぶん大きく感じられます。これはWindows の仕様でピクセルとポイントの解像度の違い(16px=12pt)のためですが、実際一般的なテキストページは12から14px相当が多いようです。そのため相対値で指定する場合「h1」を100%、「p」を75%で小さくすることになります。(しかしこれでは本来のタグの意味に逆行するように思えます。)私は今までブラウザのフォントサイズは12pxでしたが16pxにしました。こうしないと蟻のように小さくて読めないページが増えたからです。

アクセシビリティ指針等を大きく掲げている企業のページでも固定値のところもあり、今の所対応は色々のようです。

photo
hashimoto