font-sizeプロパティは、フォントサイズを指定します。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

<絶対サイズ>｜<相対サイズ>｜<長さ>｜<パーセント>｜inherit

初期値

medium

適用される要素

全ての要素

継承

します

パーセント値

親要素のフォントサイズに対する割合

メディア

visual

値の解説

<絶対サイズ>

以下のキーワードを<絶対サイズ>として指定する事ができます。
[ xx-small｜x-small｜small｜medium｜large｜x-large｜xx-large ]

• これらのキーワードはUA（ブラウザなど）によって計算・保持されているフォントサイズ対照表を参照します。
• 初期値となるmediumのサイズは、UAやユーザーの設定によって異なる可能性が有ります。
• CSS2では隣接するキーワード間の倍率は1.2倍となっていましたが、CSS2.1では、固定の倍率が良くないとされ、HTML4.01のfont要素に使っていたsize属性で指定出来た7つのサイズが対照表とされており、mediumが3と同じになります。

<相対サイズ>

以下のキーワードを<相対サイズ>として指定する事ができます。
[ larger｜smaller ]

親要素のフォントサイズに対して相対的にサイズが変わります。
largerは一段階大きくなり、smallerは一段階小さくなります。

<長さ>

フォントサイズを長さの単位（pxやem等）で指定します。マイナス値は不正です。
この際、単位を絶対単位（pxも含む）で指定してしまうと、IE6など一部のブラウザにおいてフォントサイズが変更出来なくなってしまいアクセシビリティが低下してしまうので、emやexなどの相対単位、<絶対サイズ>のキーワード、<パーセント>による指定が望ましいです。

<パーセント>

親要素のフォントサイズに対しての割合を%で指定します。マイナス値は不正です。

フォントサイズに関しては、仕様レベルでも厳密にサイズが定義されていないことからも、各ブラウザでサイズが多少なりとも異なってきます。
その為、違って当たり前なんですが、クロスブラウザを求める声も多いのが現状で、フォントサイズの差異をなるべく減らす目的で作られた、Yahoo! UI LibraryのFonts CSSなんかも有ったりするので、こういったライブラリを活用するのも良いかと思います。

ただ、個人的な意見としては、こういったライブラリを活用しても厳密に同じにはなりませんし、ブラウザの癖・特徴を無理して潰さなくても良いかなと思ってるので、フォントサイズは大体同じになっていればそれで良いかなと。

フォントサイズに関する色々なリンク

フォントサイズに関しては、色々有るので読んでおくと良さそうなサイトを上げておきます。

• 大きな読みやすいフォントで表示するには 【The Web KANZAKI】
• デザイナーがウェブの文字サイズを小さく固定したがる理由【絵文録ことのは】
• font-size: 90% 指定だって豆字固定と大差無い 【ねこめしにっき】
• 3 寸法の単位【ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 CSS技術書】
• 5.6.a 文字サイズの変更 【JIS X 8341-3:2004】

font-sizeのサンプル

.item {
  margin: 20px;
}

p {
  margin: 0 0 1em;
  background: #f0eff7;
  font-size: medium;
}

p.fontSample01 {
  font-size: larger;
}

p.fontSample02 {
  font-size: smaller;
}

p.fontSample03 {
  font-size: xx-small;
}

p.fontSample04 {
  font-size: x-small;
}

p.fontSample05 {
  font-size: small;
}

p.fontSample06 {
  font-size: medium;
}

p.fontSample07 {
  font-size: large;
}

p.fontSample08 {
  font-size: x-large;
}

p.fontSample09 {
  font-size: xx-large;
}

p.fontSample10 {
  font-size: 16px;
}

p.fontSample11 {
  font-size: 1.4em;
}

p.fontSample12 {
  font-size: 100%;
}

p.fontSample13 {
  font-size: 125%;
}

<div class="item">
<p class="fontSample01">larger のサンプルです。</p>
<p class="fontSample02">smaller のサンプルです。</p>
<p class="fontSample03">xx-small のサンプルです。</p>
<p class="fontSample04">x-small のサンプルです。</p>
<p class="fontSample05">small のサンプルです。</p>
<p class="fontSample06">medium のサンプルです。</p>
<p class="fontSample07">large のサンプルです。</p>
<p class="fontSample08">x-large のサンプルです。</p>
<p class="fontSample09">xx-large のサンプルです。</p>
<p class="fontSample10">16px のサンプルです。</p>
<p class="fontSample11">1.4em のサンプルです。</p>
<p class="fontSample12">100% のサンプルです。</p>
<p class="fontSample13">125% のサンプルです。</p>
</div>

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

larger のサンプルです。

smaller のサンプルです。

xx-small のサンプルです。

x-small のサンプルです。

small のサンプルです。

medium のサンプルです。

large のサンプルです。

x-large のサンプルです。

xx-large のサンプルです。

16px のサンプルです。

1.4em のサンプルです。

100% のサンプルです。

125% のサンプルです。