よこのじ（@yokonoji_work）です。
CSSでフォントサイズ（font-size）を指定する方法に px,pt,ex,em,rem,vw などがあります。
どの方法でも文字サイズを調整することはできます。
しかし、em単位では入れ子問題というものが発生したり、vw単位ならフォントサイズのレスポンシブ対応が可能など、うまく使い分けていくと便利な場合があります。
そのため、普段使わない単位も合わせて使い方を確認してみてください。
font-sizeでフォントサイズを変更する方法
font-sizeプロパティに値として設定できるものを確認してみましょう。
紹介するのは、px, pt, ex, em(%), rem, vw, small, medium, largeです。
px
ピクセルでフォントサイズを指定する。モニタ解像度dpiにより表示される大きさが異なる。
pt
1pt（ポイント）＝1/72インチで約0.35mmの大きさに相当する。モニタが72dpiなら1pt=1px。
ex
小文字の｢x｣の高さを1とする単位。2exならxの2倍の大きさのフォントサイズとなる。
%、em
%は親要素を基準にしてフォントサイズを指定する方法。100%であれば親要素と同じで、50%なら半分となる。
emは%と同様に親要素を基準に指定する。1emであれば親要素と同じで、0.5emなら50%の大きさとなる。
emと%は、表記は異なるがサイズ指定の考え方は同じ。
rem
root emのことで、最上位要素=htmlのフォントサイズ（通常16px）を基準に指定します。
1remでhtml要素と同サイズ、0.5remで50%の大きさとなる。
vw、vh
vw（viewport width）は画面の横幅を100として、その割合でフォントサイズを指定します。1vwは画面幅の1/100のサイズです。
viewportとは、表示領域のことでブラウザ幅などのことを示します。
高さは vh（viewport height）で、画面の縦幅を100として、その割合でフォントサイズを指定します。
xx-small、x-small、small、medium、large、x-large、xx-large
1段階で1.2倍の大きさに変化する。mediumは標準サイズ。
フォントサイズ単位の使い分けについて
emの入れ子問題
body要素16pxとして、2em指定の<li>タグの中に、2em指定の<p>タグを入れた場合、2em×2em＝4emと意図しないフォントサイズになる問題が発生します。
これが入れ子問題です。
これを回避するには、html要素を基準としたrem指定でフォントサイズを指定します。
フォントサイズのレスポンシブ
レスポンシブ対応のWebサイトは当たり前となりましたが、フォントサイズ自体はemやrem、つまりブラウザ標準の16pxを基準にして固定値としていることが多いです。
スマホ向けサイトの場合は、端末サイズに合わせて少し小さめにフォントサイズを指定したりしていますが、昨今の大きなスマホでも文字が小さいままで見にくい・・・ということが発生します。
これに対しては、vw（またはvh）を使うことで端末のサイズに応じてフォントサイズを変化させて、視認性の良いサイズに指定することができます。
注目記事：標準フォント游ゴシック（Yu Gothic）をWebサイトで使うことを検討しました
[itemlink post_id=”2952″]
[toggle title=”参考サイト”]
[/toggle]
