Dec 13, 2008
CSSでのfont-size指定について考えてみました。
私は半年に一回くらい自分の中でのレギュレーションを再検討していますが、今年はまだやってなかった(本来は夏頃やるべきだった)ので、現在、色々と検討中です。
プロパティの記述順から、IE用のスタイルを何処に書くか(ファイルを分けるか)や、デフォルトスタイルを初期化する時の事とかを考えているのですが、前回はfont関連に関して見直していなかったので、みなさんが、どんな感じで書いているのか調べたりしつつ、実際に何通りか書いて試したりしました。
font-sizeをpxで指定するとIEでは文字サイズを変更できません(文字サイズを大とかにしても変らない)。
でも、それ以外のブラウザでは概ね、変更してくれますよね。
なので、「pxでいいんじゃね?」と、思うのです。
ただし、IE対策は必須です。
bodyのfont-sizeを10pxを相当にしておき、以降、「12px = 1.2em、14px = 1.4em」といった感じで上書きして行く手法があります。
このパターンは多言語対応が必要で、Typography用のCSSが別途書いてある場合(ファイルそのものが別になっているかどうかは別として)などでは威力を発揮しますね。 正直、作る時はすげー面倒ですが、更新とか修正の時は見やすいと思います。
ただ、なんでもこの方法でやるのは、font-sizeを沢山書かなきゃいけないので、ちょっと冗長な気がします。
基準値に関してだけの問題ですが、%とかemとかしてる場合、そのサイズはブラウザの設定に依存します。
例えば、デフォルトのフォントサイズが16xと想定して、13px相当に定義したスタイルでは、デフォルトのフォントサイズが12pxだった場合、10px程度になっちゃったりするのです。
一方、pxなどの絶対値で指定した場合は、デフォルトのフォントサイズに関わらず基準を決められるので、以降のスタイル定義にどの単位を利用するかは別として、基準値はpxがイイのかな?と思います。(IEでは、基準サイズとしてhtmlやbodyにpxで指定すると、以降を相対サイズにしてもフォントサイズは変えられないです。)
最近はどうか分かりませんが、他業種だった頃は、デフォルトフォントサイズを「小(IEの場合)」にしている人が結構いたので、これは気をつけたいポイントですね。。。