font-size

p.test { font-size: 12px;}
p.test1 { font-size: 1.2em;}
p.test2 { font-size: 1.2rem;}
p.test3 { font-size: small;}

<p style="font-size: 12px;">ここはp要素です。『font-size: 12px』と指定しています。</p>

<p style="font-size: 1.2rem;">ここはp要素です。『font-size: 1.2rem』と指定しています。</p>

<p style="font-size: large;">ここはp要素です。『font-size: large』と指定しています。</p>

文字の大きさを指定できます。

最近のウェブ業界で主に使用されている単位は『px』です。『pt』はOSやディスプレイによって大きさが変動するため使用しないほうが無難です。

尚、『IE8』以前のIEでは、『font-size』が『px』指定されている文字はブラウザでの拡大縮小を行った場合に大きさが変化しない、『em』で指定した場合は親からの継承が上手く動作しない、といったバグがあります。よって『IE8』以前のブラウザを対応させる場合の『font-size』は『%』で指定するのが無難です。

『em』を使用する場合、基準となる大きさは親要素のフォントサイズになるというところにご注意ください。例えば、div要素に『12px』、その直下のp要素に『2.0em』、その子要素のspan要素に『2.0em』と指定されていた場合のspan要素のフォントサイズは『48px』となります。

div { font-size: 12px;} /* 『font-size』は『12px』 */
div > p { font-size: 2.0em;} /* 親要素のdivが『12px』なので『font-size』は『24px』 */
div > p > span { font-size: 2.0em;} /* 親要素のpが『24px』なので『font-size』は『48px』 */

『rem』という単位を使用するとhtml要素(root要素)のフォントサイズを基準とした相対的な数値で指定できます。『em』と違い、親要素のフォントサイズの影響を受けず、基準となるフォントサイズが常に一定であるため非常に使い勝手が良いです。ただし『CSS 3』から実装された単位ですので古いブラウザでは動きません、ご注意ください。

html { font-size: 16px;}
div { font-size: 2.0rem;} /* html要素が『16px』なので『font-size』は『32px』 */
div > p { font-size: 2.0rem;} /* html要素が『16px』なので『font-size』は『32px』です。親のdiv要素の影響は受けません。 */

『キーワード』で指定することもできますが、ブラウザによって表示される大きさが違う場合があることや細かい調整ができないといった理由からあまり使用されません。

今現在のウェブ業界で、基本となる文字の大きさは『15px』から『18px』の間に設定されていることが多いです。

尚、ほぼ全てのブラウザで『最小のフォントサイズ』が設定されており、その大きさ以下のフォントサイズを指定した場合は『最小のフォントサイズ』が指定されているものと解釈されます。