はじめに
font-sizeの指定にいくつか単位があるので、それぞれの役割・使うタイミングを簡単ではありますがまとめました。
font-sizeの単位
px
絶対的な値を指定。
どんな画面サイズでも設定したfont-sizeとなる。
数値が大きくなればなるほど文字は大きくなる。
％
親要素に対して相対的な値を指定。
オブジェクトのレイアウトなどにも使用される。
em
親要素に対して相対的な値を指定。
%と似ているが、emは基本的に文字のサイズ指定に使うことが多い。
【例】
親：１０px に対して 0.5em と指定 → 5px のフォントサイズとなる
.parent {
font-size : 10px;
.child {
font-size : 0.5em;
}
}
親のpxを変更するだけで、現在の比率を変えずにfont-sizeを変更することができる。
rem
常にhtmlに対して相対的な値を指定。
% em と違い、htmlの値だけを見ていればいい。
htmlでfont-sizeが指定していなければ、デフォルトで16pxとなる。
○rem → htmlのfont-sizeの○倍の大きさ
【例】htmlのfont-sizeがデフォルト値(16px)の時
1rem → 16px
2rem → 36px
0.5rem → 8px
vw
表示領域の幅に対する割合。
ビューポートの幅に合わせてfont-sizeの値を指定できる。
【例】
font-sizeを 10vw と指定 → ビューポートの幅に対して 10% のフォントサイズとなる
おわり
適切なfont-sizeはSEOの面でも重要！
→ PCでは適切な文字サイズでも、モバイルで小さすぎたらダメ（モバイルフレンドリーではないと判定される）
細かいことだと感じますが、ここをしっかり考えれるようになりたいです。