はじめに

font-sizeの指定にいくつか単位があるので、それぞれの役割・使うタイミングを簡単ではありますがまとめました。

font-sizeの単位

絶対的な値を指定。
どんな画面サイズでも設定したfont-sizeとなる。
数値が大きくなればなるほど文字は大きくなる。

親要素に対して相対的な値を指定。
オブジェクトのレイアウトなどにも使用される。

親要素に対して相対的な値を指定。
%と似ているが、emは基本的に文字のサイズ指定に使うことが多い。

【例】

親：１０px に対して 0.5em と指定 → 5px のフォントサイズとなる

.parent {
   font-size : 10px;

   .child {
     font-size : 0.5em;
    }
}

親のpxを変更するだけで、現在の比率を変えずにfont-sizeを変更することができる。

常にhtmlに対して相対的な値を指定。
% em と違い、htmlの値だけを見ていればいい。
htmlでfont-sizeが指定していなければ、デフォルトで16pxとなる。
○rem → htmlのfont-sizeの○倍の大きさ

【例】htmlのfont-sizeがデフォルト値(16px)の時

1rem → 16px
2rem → 36px
0.5rem → 8px

表示領域の幅に対する割合。
ビューポートの幅に合わせてfont-sizeの値を指定できる。

【例】

font-sizeを 10vw と指定　→ ビューポートの幅に対して 10% のフォントサイズとなる

適切なfont-sizeはSEOの面でも重要！
→ PCでは適切な文字サイズでも、モバイルで小さすぎたらダメ（モバイルフレンドリーではないと判定される）

細かいことだと感じますが、ここをしっかり考えれるようになりたいです。