font-sizeでフォントの大きさを指定する【CSS】

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

{font-size: サイズ;}

サイズを指定するときには、ブラウザの標準サイズを基準に直接指定したサイズが決まる「絶対サイズ」という指定方法と、親要素のフォントサイズなど、基準となる対象の値に対応してサイズが決まる「相対サイズ」という指定方法があります。

フォントサイズの指定方法

まず、以下の表は絶対サイズについてです。

mediumがブラウザの標準のサイズで、そのサイズよりも1段階大きいのが「large」、2段階大きいのが「x-large」、3段階大きいのが「xx-large」となり、1段階小さいのが「small」、2段階小さいのが「x-small」、3段階小さいのが「xx-small」となります。

次に相対サイズについてです。

larger	親要素より1段階大きいサイズ
smaller	親要素より1段階小さいサイズ

親要素を基準に、1段階大きいサイズを「larger」、1段階小さいサイズを「smaller」という指定の仕方をします。

相対サイズによる大きさの指定は他にもあります。

たとえば、よく使うのは数値に単位をつける方法で、『CSSにおける長さ・大きさ・角度・時間の単位について【CSS】』でも書いているんですが、「em」とか「rem」という単位を使って指定する方法です。

あとは、親要素に対して%値を指定するという方法もあります。

フォントサイズはPCとスマホでは違う大きさにした方が見やすかったりするので、レスポンシブ対応とか後から値を修正するメンテナンス性のことを考えると、em単位・rem単位、%値を使って相対サイズを指定した方がいいかなと思います。