文字サイズの設定

文字サイズを可変でき、かつサイトのデザインが崩れない（見やすい）ウェブサイトを作成しないと、閲覧してくれないというわけですね。

しかし、文字の単位に「%」や「em」を使用して、文字サイズを可変にしても、ブラウザによって文字の見た目の大きさが異なる場合があります。
実例を挙げます。下のイメージは、Win/Firefox2とWin/IE6で同じファイルを出力したサンプルです。
文字サイズを100%から70%まで変えています。文字の種類は「MS P ゴシック」です。
文字サイズ100%はブラウザのデフォルト（この場合は標準）の大きさです。FirefoxもIEも初期の100%の文字サイズは同じです。px単位に直すと16pxです。

このイメージを見て気づかれたかと思いますが、文字サイズを変えてもある段階にならないと変化していません。というか変化したように見えていません、と言ったほうが正しいかもしれません。
内部的には文字のサイズは変わっているのですが、つまり99%にすれば15.84px、98%ならば15.68pxとなっているのですが、見た目では変わったようには見えません。これは表示側の限界によるものなのかもしれません。（なぜなのかはわかりません。）

徐々に文字サイズを1%ずつ下げていくと、途中で差異が生じます。97%のところで、Firefoxは一段小さくなっているのに対して、IEでは100%と変わりありません。
しかし、96%になれば、FirefoxとIEの文字のサイズの見た目は同じになります。
むむむ、ややこしいですね。

WindowsのFirefox2.0、IE6、Opera9で、ほぼ同じ大きさに見えるような%を算出しましたので、参考にしてみてください。
ただし、px換算した値は、表示のものと全く一緒ではない可能性があります。（ブラウザの出力の問題で）

※69%と70%は文字サイズが変わらないので、わかりやすく70%を指定されても構いません。
実際の表示はこちらをご覧ください。現在閲覧されているブラウザのフォントのサイズがわかります。
文字の種類は「MS Pゴシック」です。
文字の種類が変わると、「目安となるpx換算」の値も変わる可能性がありますので、あくまでも、MS Pゴシックの場合に限ります。文字のサイズが変わる変異点は、文字の種類にはより変化はしません。

行間の設定

font-sizeとよく同時に指定するプロパティに「line-height」があります。
これは「%」や「em」で指定してはいけません。
「%」や「em」を使用してしまうと、文字サイズがそれよりも大きければ、文字が重なってしまいます。
綺麗に表示できるポイントは「単位を指定しない」ことです。
つまり、CSSなどに、

line-height:1.5;

と書けば、文字サイズの1.5倍の高さに指定されるので、文字サイズが変わっても、文字が重なり合うことがなくなります。

2007/5/19 追記

このエントリーでちょっと補足があります。
まず、これはブラウザのデフォルトの標準の文字の大きさが「16px」の場合に限ります。
とりあえず、Windows/IE6、Firefox2、Opera9のデフォルトは同じと確認しております。
恐らく、MacOSXのFirefoxが怪しい。
そういう場合はbodyに「font-size:16px;」を指定すればうまくいくかどうか・・・。ただし確かTableはbodyの値を継承しなかったような気がします。
なので以下のようにCSSを指定すればよいかもしれません。

body [
font-size:16px;
}

table{
font-size:16px;
}

ただし、どの要素が継承するとかを確認していないので、基準となる文字サイズはできるだけブラウザのデフォルトを使用されたほうがよいかもしれません。

あと、私流の文字サイズ指定で気をつけないといけないことは、「文字サイズは継承する」ということです。
例え最初が16pxでも、親要素に88%（14px相当）、子要素に82%（13px相当）を指定すると、子要素の文字サイズは82%にならず、16×88×82=11.5px相当になります。
なので、できるだけ文字サイズを指定するときは一番下の要素に指定するほうが（継承させないほうが）、かなり面倒ですが文字サイズくずれは起こりません。

それと、このコラムを書いたときは知らなかったのですが（はてなのブクマコメントで知りましたが）、ほぼ同じライブラリが存在してました！しかもかなり有名どころ！
Yahoo! UI Library: Fonts CSS

ただし、この場合12pxがOperaで他のブラウザより小さく表示されてしまうということです。
TRANS - Yahoo! UI Library: Fonts CSSを使うのなら、Operaには気を付けて！

しかしなんでYahoo! UI Libraryでは標準の文字サイズを「13px」にしているのか謎です。

誤解してほしくないのは、私は厳密な「px」の文字サイズを表示させたいわけではありません。それならpx指定をしたほうがましです。
重要なのは他の文字との大きさの相関性です。 「文字を大きくする」という行為はそのテキストが他のテキストより「重要」であることをアピールしたいわけですよね。
それが88%に指定した文字と90%に指定した文字の大きさが同じように表示されるのは意味がありません。
あとは、ブラウザによって、文字の大きさが変わってしまうのもデザインという観点から見れば美しくないというだけのことです。