各ブラウザでフォントサイズを統一する〜YUI fontsの使い方

各ブラウザでフォントサイズを統一する方法です。
Yahoo! UI Library(YUI)のFonts CSSを使用します。

ここで行っている内容は、body要素に対して基準になるフォントサイズを設定します。
各ブラウザでフォントサイズを統一するために基本になるサイズを13pxとしています。IE対策を行うためにアスタリスクハック（*fontの部分）を併用しています。基準になるフォントサイズが決まれば下記のパーセンテージで各ブラウザで統一されたフォントサイズになるというものです。
微妙なデザインで有効な手段ですね。

リセットcssなどに以下の記述を加えます。
/**/部分も記述しなければなりません。

/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
developer.yahoo.net
version: 2.7.0
*/
body{
      font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;
     *font:x-small;
}
select,input,button,textarea,button{
      font:99% arial,helvetica,clean,sans-serif;
}
table{
      font-size:inherit;font:100%;
}
pre,code,kbd,samp,tt{
      font-family:monospace;*font-size:108%;line-height:100%;
}

以下のpx指定と％指定の対比を参照して%で指定します。
このコメントアウトも編集時の参考として記述しておくとよいでしょう。

    /*-----------------------------------------------------
    Yahoo UI Library Font-size Adjustment
    Copyright (c) 2006, Yahoo! Inc. All rights reserved.
    http://developer.yahoo.com/yui/license.txt
    http://developer.yahoo.com/yui/fonts/
    10px = 77%     11px = 85%     12px = 93%     13px = 100%
    14px = 108%    15px = 116%    16px = 123.1%  17px = 131%
    18px = 138.5%  19px = 146.5%  20px = 153.9%  21px = 161.6%
    22px = 167%    23px = 174%    24px = 182%    25px = 189%
    26px = 197%
    ------------------------------------------------------*/

フォントサイズ指定は結構厄介な問題があります。
CSSの継承の仕組みです。フォントサイズは親要素の値を子要素は継承します。

簡単な例をみてみましょう。
p要素にstrong要素が含まれるシンプルな親子関係のテキストです。

基準のフォントサイズはbodyに設定した13pxです。最初の段落は親子とも13pxです。
2番目の段落はp要素を138.5％(18px)のサイズにしました。子要素のstrong要素に100％を設定すると13pxにはならずに　bodyの138.5％(18px)になります。それはstrongの親要素のpが138.5%(18px)だからその値を継承しているからです。p要素の100％で表示されます。
3番目の段落もp要素を138.5％のサイズにしました。子要素のstrong要素に72.2％に設定してbodyと同じサイズの13pxとしています。

<p>フォントサイズの<strong>学習</strong>をした。</p>
<p class="large1">フォントサイズの<strong class="ex1">学習</strong>をした。</p>
<p class="large1">フォントサイズの<strong class="ex2">学習</strong>をした。</p>

body {
	font-size: 13px;
}

.large1 {
	font-size: 138.5%;
}

.ex1 {
	font-size: 100%;
}

.ex2 {
	font-size: 72.2%;
}

サンプルはこちら

親要素に対して何％に設定するか結構面倒な計算が必要になります。
計算方法は親要素のパーセント値と子要素のパーセント値を掛けた値が子要素の本当のパーセント値になります。

注意しなければならないのはYUIのパーセント値はあくまでも13pxを基準にした場合のパーセント値だということです。継承関係になると親要素の値（13pxではない値）にYUIのパーセンテージを設定しても無意味になります。