font-sizeの基本設定
過去にもfont-sizeの問題について考えた事があったのですが、
今回はfont-sizeのパーセント表記一覧 - Webtech Walkeを読んで、
今後のfont-size指定、自分はこうしようと思うのを書いておきます。
ブラウザによって文字の大きさが変わる
pxやptでの指定だと、IEでは文字拡大に対応しなくなるし、
em指定だとバグが発生するらしいし、
％でもブラウザによって大きさが変わるなど、
なんだかいろいろ問題の多いfont-sizeの指定。
いろいろなことについてかかれているのが、
「英語圏から学ぶ、body要素に対するfont-size指定方法のまとめ - TRANS [hatena]」
Yahoo! UI Libraryを使うって手もありますが、
それだと設定が13pxが初期設定になるから、なんだか使い辛い。
ではどうしたらいいか？
基本はpx、IEはハックで対応
今回の参考にしているところもハックを使っていますが、
僕もそれが一番ではないかと思っています。
ただし、僕は後々に扱いやすくするために、
基本は10pxを指定しています。
body {
font-size: 10px;
}
/* for IE6 */
* html body {
font-size: 62.5%;
}
/* for IE7 */
*:first-child+html body {
font-size: 62.5%;
}
IEのデフォルトの文字サイズは16pxなので、
10pxと同じようになるために、62.5%を指定しています。
16×0.625=10になりますからね。
なぜ10pxを指定するのか
なぜ基本の文字サイズを10pxに指定するのか。
理由は簡単で、基本を10pxにしておくと、
文字サイズが変わるような部分を感覚的に指定できるようになるからです。
感覚的というのは、例えば12pxや14px等が、
120%や140%という数値で指定できるようになるからです。
基本を12pxにしておくと、そこから14pxに変化させる時や、
他のサイズに指定するとき、その%をわざわざ覚えておいたり、
計算したりしないと指定が難しいからです。
基本をそのようにしておけば後は感覚的に指定できるようになるので、
僕個人としてはこの方法をお勧めします。
