どれを使う？font-sizeの使い方、文字サイズの設定方法【CSS】

いちばん一般的で基本的な指定方法です｡
モニターの解像度(px)にあわせた文字サイズなので､1pxの大きさが変わると

div{
  font-size: 16px;
}
div > p{
  font-size: 14px;
}

親要素で指定されている文字サイズを基準にした文字サイズです｡

div{
  font-size: 14px;
}
div > p{
  font-size: 200%; //200% = 28px;
}

文字サイズで使うときは､em (エム)も同じ値になります｡

% (パーセント)は､幅であれば親要素の幅､高さであれば親要素の高さが基準になるので､文字サイズ以外で使うときはそれぞれに基準が変わることに注意が必要です｡｡

親要素で指定されている文字サイズを基準にした文字サイズです｡

div{
  font-size: 14px;
}
div > p{
  font-size: 2em; //2em = 28px;
}

文字サイズで使うときは､% (パーセント)も同じ値になります｡

em (エム)は､幅や高さなどに使う場合でも親要素の文字サイズが基準になります｡

ルート(html)で指定されている文字サイズを基準にした文字サイズです｡

各ブラウザの基本の文字サイズは16pxなので､1rem = 16pxということになります｡

html{
  font-size: 16px;
}
div{
  font-size: 2rem; //1rem = 32px;
}
div > p{
  font-size: 1rem; //1rem = 16px;
}

ただ､このまま使うと直感的に文字サイズが指定できず､毎回計算しないといけなくなるため､htmlの文字サイズを「62.5%」と指定することにより､1.6rem = 16pxになるので､毎回計算する必要がなくなり指定がしやすくなります｡

html{
  font-size: 62.5%; //62.5% = 16px;
}
div{
  font-size: 2rem; //1rem = 20px;
}
div > p{
  font-size: 1.6rem; //1rem = 16px;
}

%やemだと親要素の文字サイズに影響されるため同じ値を指定しても､それぞれの場所で実際の文字サイズが違うので扱いずらいときがありますが､remだとどこで使用しても基準が同じなのでわかりやすいです｡

デバイス､モニター画面の幅を基準にした文字サイズです｡

//window幅 = 400px;

div{
  font-size: 4vw; //4vw = 16px;
}
div > p{
  font-size: 3vw; //3vw = 12px;
}

レスポンシブでスマホデザインを寸分違わずそのままに再現しないといけないという場合は､vwを使わないといけません｡
ただし､PCサイズのときにもvwを指定してしまうとモニターが大きくなるほど文字サイズも大きくなっていくのでPCで使用することはあまりありません｡

//window幅 = 1000px;

div{
  font-size: 4vw; //4vw = 40px;
}
div > p{
  font-size: 3vw; //3vw = 30px;
}

デバイス､モニター画面の高さを基準にした「 vh 」という単位もありますが､文字サイズに使用することはほぼ無いです｡

四則演算を使って計算した値を使うことができます｡

p{
  font-size: calc(16px + 2px);
}
p{
  font-size: calc(16px - 2px);
}
p{
  font-size: calc(16px * 0.2);
}
p{
  font-size: calc(16px / 0.2);
}

単位の違う文字サイズを複数指定し､もっとも小さい値を優先して文字サイズとします｡

p{
  font-size: min(1.6rem, 4vw);
}

複数の単位を指定し､最適なほうを使用するのでメディアクエリで､モニターサイズごとに切り替えるという手間がかかりません｡

本質的ではありませんが､デザインカンプを再現することを優先する場合はmin()を使うほうがいいです｡

デザインどおりに改行する必要はなく､可読性を優先する場合はclamp()を使ったほうがよいです｡

基準の値､上限の値､下限の値の3つを指定し､上限と下限の間におさまるようにして文字サイズとします｡

p{
  font-size: clamp(14px, 4vw, 16px);
}

clamp()であれば､小さくなりすぎたり､大きくなりすぎたりないように制限しながら可変の文字サイズを指定できます｡

以下､8種類のキーワードで文字サイズが指定できます｡

具体的にどのキーワードが何ピクセルなのかがわかるものが見つからなかったので実際に数字をあてはめて調べてみました｡
ブラウザによって誤差はあるかもしれませんが参考まで｡
xx-smallはおそらく9pxですが､ChromeなどのPCブラウザでは10p未満のfont-sizeが反映されないため10pxで表示されています｡

See the Pen font-size absolute length by hashi84 (@hashi84) on CodePen.

文字サイズにsmaller､largerを指定することにより､親要素(medium､16px)からみた相対値で文字サイズを指定できます｡

smallerは80％､largerは120％のようです｡

See the Pen font-size relative length percentage by hashi84 (@hashi84) on CodePen.