フォントサイズを%で指定する

CSS on ,

前回の「IEでフォントサイズが指定のサイズにならない!」の記事のときに話したのですが、
フォントはアクセシビリティ的にも文字サイズは%で指定するのが良いようなので、実際%で使用してみました。

僕はサイト作成の際の基本フォントサイズを12pxで使用しているので、
CSSには、まず下記のように記述をしております。

body {
font-size: 12px;
}

このpx指定を%指定にするとき何%に指定すればよいの?
ふむ、さっそく分からん。

という訳で色々しらべました。
一般的にfont-sizeを指定しないとブラウザのデフォルトフォンサイズは16pxで、
ブラウザによっても多少違うもののデフォルト16pxと解釈して問題ないようです。

そしてサイズを%指定する際は、このデフォルトサイズから何%かを指定します。
しかし12pxって16pxの何%?分からん・・・
で、ネットで色々検索していたらpxから%にする時の計算式を見つけました!

デフォルトサイズ × 指定する% ÷ 100 = pxで表示した時のサイズ 

■例
100%で指定した場合 16 × 100 ÷ 100 = 16
90%で指定した場合 16 × 90 ÷ 100 = 14.4
80%で指定した場合 16 × 80 ÷ 100 = 12.8 

この端数の処理はブラウザによって切り捨てor四捨五入されて表示されるそうです。

これで12pxは75%くらいと分かりました!

body {
font-size: 75%;
}

もし、ここからclassなどを追加してフォントサイズを増やしたい場合は、
bodyで指定した75%(12px)をデフォルトサイズとして上記の計算式に再度あてはめて計算します。

■例
body {
font-size: 75%; /*  12pxで表示  */
}

12 × 134 ÷ 100 = 16.08

.font16
font-size: 134% /*  16pxで表示 (12pxの134%)  */

フォントサイズ指定といえど深いですね。

コメントを残す