文章を視覚的にわかりやすくする為に必要なフォントサイズの数は、3ないし4で必要十分といえます。
大きさ順に、例えば、「タイトル・項目、本文（地の文）、注釈」に分けられます。タイトル・項目は、本文と明確に違うことを示さなければなりません。本文は長時間、疲れることなく読みすすめられるようにするべきででしょう。注釈や付記などは、本文では無いことを示し、かつ重要では無いことを示しつつも、必要な時には参照して読むことができるようにしておくべきでしょう。
その為には、
というのが、確立されたデザインの原理原則です。ペーパーメディアのデザイン手法がそのままWebDesignにあてはまります。
これを「Webpageでどう実現するか」が、Web Designのテクニカルな部分となるわけです。
ここでは主に、フォントの大きさに関して調べてみました。
ウェッブにおいては、見る人にとって適切な文字サイズがそれぞれにあります。その為、ユーザーの設定に任せるのが推奨されます。ウェッブページを表示した時に、ユーザーの設定が反映されるようにするのが良いでしょう。
ユーザーの設定が反映されるフォントサイズ指定の方法は、次の3種類です。
これらの中から、綺麗に表示するためにどうすればいいのか、を考えます。
Machintosh,WindowsのOSの差、Mozilla,Internet Explorer,iCabなどのブラウザの差、を考慮すると、font-size: smallの指定にしておけば、ほぼ確実に綺麗に表示することができます。%で指定した場合、例えば80%指定で、IE5(mac)では綺麗でもMozilla(mac)では汚くなる場合があります。
MacOSの設定にある、アピアランスのなめらか文字で表示する（サイズは12)を、ONにしておけば、大きな文字サイズはいずれも問題なく綺麗に表示できます。 Windowsの場合、font-size : largeや、font-size : x-largeに設定しても、（液晶画面で）綺麗に表示されないようです（詳細は不明）。
以上のことから、例えばこのような設定例となります。
この例では、注釈・付記をclass="note"で示す事にします。
本文のフォントサイズとなる、mediumはブラウザの設定であり省略して構いません。
OS・ブラウザの違いに関わらず、小さなフォントを綺麗に表示する為には、今の所、small・x-small・xx-smallがベストのようです。medium以上の、大きいサイズを指定するのなら、xx-large・%・emなどで指定すれば良いでしょう。
ブラウザの設定によらず、フォントサイズをコントロールしたい場合、完全なコントロールをするのにはpx。あるいはptを使います。ただし、ptの場合、解像度の設定で（画面上の見た目の）大きさが変化しますが、解像度の変更をユーザーはあまり行わないと思いますので、実際のところは気にする必要はありません。
px・ptの指定は、%指定と同じように、OSとブラウザとの組み合わせで指定したサイズで綺麗になるかならないかが分かれます。
また、Internet Explorer(Win)では、px・ptではユーザーがフォントの大きさを簡単に変更できないようなので、あまりに小さいサイズにpx・pt指定をするのは、意図が無い限り避けるべきでしょう。
（この項は細かいことですので読み飛ばして構いません）
Mozilla 0.9(Mac)、IE 5(Mac)の場合、フォントの大きさを計3ケ所で設定できます。
StyleSheetと初期設定、StyleSheetとメニュー、こららの兼ね合いがどうなるのかを調べてみました。メニューからの変更は、文字の大きさは例外なく変更されます。ブラウザでの設定には、ピクセル(Mozilla Mac)・サイズ(IE5 Mac)と解像度(Mac)、文字のサイズ（IE6 Win）の設定があり、ここの部分の変更がStyleSheetの設定に影響するのかまとめたのが、次の表です。
| xx-small | % | pt | px | ||
|---|---|---|---|---|---|
| Mozilla(Mac) | ピクセルの変更 | 変化 | 変化 | 変化無し | 変化無し |
| 解像度の変更 | 変化無し | 変化無し | 変化無し （*注1） |
変化無し | |
| IE 5(Mac) | サイズの変更 | 変化 | 変化 | 変化無し | 変化無し |
| 解像度の変更 | 変化無し | 変化無し | 変化（*注1） | 変化無し | |
| IE 6(Win) | 文字のサイズの変更 | 変化 | 変化 | 変化無し | 変化無し |
これらのことから、ブラウザでの設定によって、
というのが、判ります。
ブラウザの設定で変化する指定と、そうでない指定とを組み合わせた場合、文字の大きさの順序が崩れることがあります。
例えば、本文（地の文）をユーザーのブラウザの設定（例えばMac IE5で14ピクセル・96dpiと想定する）に任せてCSSでは設定せず、注釈を10ptで指定した場合を考えます。その時に、ユーザーがブラウザの設定でフォントのサイズを9(96dpiの場合)にすると、本文は9ピクセルの大きさになりますが、注釈は10ptのまま大きさが変わらず、本文と注釈とのフォントサイズが逆転します。
Windowsの場合、フォントの大きさを最小あるいは最大にした時に、このような破綻が起こりやすくなります。
これを完全に避ける為には、初期設定で変化する単位（x-small,%など）か、そうでない単位(pxなど)、で統一しなくてはなりません。
但し、実際のWebDesignにおいては、ユーザーによる極端なフォントサイズを想定する必要はあまり無いと思います。
HTML 4.01では、em, strongが強調を示す要素になります。しかし、注釈やメモなどを示す要素は定義されていません。classでnoteを定義して、<em class="note">を使うのも良いでしょう。また、<small>を使うのもHTMLがシンプルになり、悪くないと思います。
ただし、<small>は、親のフォントサイズに対する相対的な大きさになります。<small>タグで囲み、必ず本文より小さくしたいのなら、small { font-size : small } のように、指定しておきます。
Windowsで、大きいサイズで綺麗なものは、19ptあるいは25pxの指定の時のようです。