フォントサイズを指定する

font-size

{ font-size 【 フォント・サイズ 】 : サイズ; }

font-sizeプロパティは、フォントサイズを指定します。フォントサイズを指定するキーワードには、ブラウザーの標準サイズを基準に直接サイズが決定する「絶対サイズ」と、親要素のフォントサイズを基準にサイズが決定する「相対サイズ」があります。

初期値 medium
継承 あり
適用される要素 すべての要素
モジュール CSS Fonts Module Level 3

値の指定方法

サイズ

xx-large 絶対サイズです。mediumより3段階大きいサイズで表示されます。
x-large 絶対サイズです。mediumより2段階大きいサイズで表示されます。
large 絶対サイズです。mediumより1段階大きいサイズで表示されます。
medium 絶対サイズです。ブラウザー標準のフォントサイズで表示されます。
small 絶対サイズです。mediumより1段階小さいサイズで表示されます。
x-small 絶対サイズです。mediumより2段階小さいサイズで表示されます。
xx-small 絶対サイズです。mediumより3段階小さいサイズで表示されます。
larger 相対サイズです。親要素より1段階大きいサイズで表示されます。
smaller 相対サイズです。親要素より1段階小さいサイズで表示されます。
任意の数値＋単位 単位付きの数値で指定します。負の値は指定できません。
%値 %値を指定します。値は親要素に対する割合となります。

ポイント

  • フォントサイズはメンテナンス性やレスポンシブ対応を考慮すると、%値とem単位、rem単位を併用して指定するといいでしょう。px単位で指定した場合、一部のブラウザーではフォントサイズを自由に変更できない場合があります。

使用例フォントサイズを%値で指定する

body {font-size:62.5%;}

以下の例では、body要素にfont-sizeプロパティを適用して値を62.5％にしています。多くのブラウザーでは標準のフォントサイズが16px（1em）であるため、body要素のフォントサイズは16pxの62.5％、つまり10pxで表示されることになります。値に0.625emを指定しても、フォントサイズが10pxになります。 

body {
  font-size: 62.5%;
}

同様にして以下の例では、フォントサイズを20px、40pxに指定しています。

.section1{font-size:62.5%;}
.section2{font-size:100%;}
.section3{font-size:125%;}
.section4{font-size:250%;}