purazumakoiの[はてなブログ]

技術メモから最近はライフログも増えてきてます。

bodyに62.5%と指定する方法

これもWeb Directions East 2008に参加した人から紹介された
フォントサイズをブラウザ間で統一するためのTips
なんでも業界では有名な、ダン・セダーホルムという人がこのやり方でやっているらしい

bodyに62.5%と指定すると何がよいのか?

ブラウザのデフォルトサイズは何もしないと16pxなので
16px × 0.625 = 10px
という風にまず基本サイズを10pxにする。
で、12pxで表示したかったらfont-size:1.2emとか、px単位で考えれるようになる。


直感的に指定できるとここが味噌みたい。


body { font-size: 62.5%; }
p.text1 { font-size: 1.2em; } /* 12px相当 */
p.text2 { font-size: 1.4em; } /* 14px相当 */

参考
RedLine Magazine : bodyにfont-size:62.5%を指定すると・・・
フォント62.5%指定でemフォントをpx単位で計算できるようにする|web bibo
font-size:62.5%の理由 - ziruchi