font-sizeプロパティ

font-sizeプロパティは、テキストのフォントサイズを設定します。プロパティの値には、あらゆるサイズの単位（一般的にはpx、em、またはrem）または特別なキーワード（使用頻度は極めて稀）を使用できます。

構文

セレクタ {
	font-size: 値;
}

値	説明
`xx-small`	最も小さい。例: Lorem ipsum dolor sit amet.
`x-small`	とても小さい。例: Lorem ipsum dolor sit amet.
`small`	小さい。例: Lorem ipsum dolor sit amet.
`medium`	中程度。例: Lorem ipsum dolor sit amet.
`large`	大きい。例: Lorem ipsum dolor sit amet.
`x-large`	とても大きい。例: Lorem ipsum dolor sit amet.
`xx-large`	最も大きい。例: Lorem ipsum dolor sit amet.
`larger`	親要素のフォントよりもいくらか大きくする。
`smaller`	親要素のフォントよりもいくらか小さくする。

初期値: medium。

段落のフォントサイズを20pxに設定しましょう:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-size: 20px;
}

この例では、段落には16px、その中のspanには150%のサイズを指定しています。この場合、spanのフォントサイズはその親要素（段落）の150%となるため、実際のサイズは16px * 150% = 24pxになります:

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: 150%;
}

この例では、段落には16px、その中のspanにはlargerのサイズを指定しています。この場合、spanのフォントサイズはその親要素（段落）よりも大きくなります:

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: larger;
}

font-familyが異なりfont-sizeが同じフォントでも、視覚的にはまったく同じサイズに見えない場合があることに注意してください（この問題を解決するにはfont-size-adjustプロパティを参照）。

以下の例では、両方の段落に16pxのfont-sizeを指定していますが、font-familyは異なります:

<p id="elem1">
	Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
	Lorem ipsum dolor sit amet.
</p>

#elem1 {
	font-size: 16px;
	font-family: Arial;
}
#elem2 {
	font-size: 16px;
	font-family: "Times New Roman";
}