px

ホームページ制作で一番有名な単位はpxです。pxは表示デバイスのドット数に依存した単位です。

最近のディスプレイなどはHDと呼ばれる幅1920px × 高さ1080pxのものや、4Kと呼ばれる幅3840px × 高さ2060pxのサイズのものがあります。
HDと4Kはディスプレイの面積が同じ場合に詰め込まれているピクセル数に2倍の差があります。面積あたりのピクセル数が2倍になるということはそれだけ高精細な表示ができるということです。

さて、話を戻しますが、フォントサイズを16pxと指定した場合、文字は幅16px × 高さ16pxの大きさで表示されます。これはHDサイズでは丁度良い大きさに思えても、4Kサイズでは2分の1の大きさになってしまうのでかなり小さいと感じるはずです。

こういった観点から最近は特にフォントサイズを柔軟に変えられるように作ることが求められています。

%

%をフォントサイズの指定で使用することはほとんどありませんが、唯一の例外として、html要素やbody要素に対してreset CSS的な側面で使用することがあります。
html要素やbody要素に対して、font-size: 62.5%を指定すると、ブラウザのデフォルトのフォントサイズが16pxなので、16 * 0.625 = 10pxに調整することができます。

em

pxの弱点を克服したのがemです。pxではデバイスによってフォントサイズの大きさが変わってしまうのは先にお話しした通りです。仮に全てのフォントサイズをpxで指定していたら修正するのが非常に大変です。

emはコンテナのサイズに合わせて相対的にサイズを決めることができる単位です。他のデバイスに対応したいときでもコンテナのサイズを変えるだけで対応が可能となります。

例えば、親コンテナのフォントサイズが10pxのとき、子要素に1.5emを指定すると、10 * 1.5 = 15pxになります。

次の例ではコンテナであるparent-Aクラスのフォントサイズを62.5%に設定しています。これは実際の開発によく用いられる手法で、ブラウザのデフォルトのフォントサイズが16pxなので、62.5%は16 * 0.625 = 10で、フォントサイズが10pxになるので計算がしやすくなります。
また、emを指定した要素の親要素にemが指定されていた場合、効果が重複して発生します。child-Bクラスでは10px * 1.5 * 1.5 = 22.5pxという計算が行われています。

HTML

<div class="parent-A">
  <p class="child-A">チャイルドA</p>
  <div class="parent-B">
    <p class="child-B">チャイルドB</p>
  </div>
</div>

CSS

.parent-A {
  font-size: 62.5%; /* 10px */
}
.child-A {
  font-size: 1.5em; /* 15px */
}
.parent-B {
  font-size: 1.5em; /* 15px */
}
.child-B {
  font-size: 1.5em; /* 22.5px */
}
  • 結果
    em-sample

rem

remはroot emの略になります。html要素やbody要素などのルート要素のフォントサイズを基準にしてサイズを決めることができます。

emは入れ子で使うと効果が重複してしまうのは先にお話しした通りですが、remでは常にルート要素を基準にするため、この弱点を克服しています。

HTML

<!DOCTYPE html>
<html lang=ja dir="ltr">
<head></head>
<body>
  <div class="parent">
    <p class="child">チャイルド</p>
  </div>
</body>
</html>

CSS

html {
  font-size: 62.5%; /* 10px */
}

.parent {
  font-size: 1.6rem; /* 16px */
}

.child {
  font-size: 1.2rem; /* 12px */
}

親要素によってフォントサイズが変わってしまうことはないため、シンプルで使いやすいです。

vw

vwはviewport widthの略になります。ビューポートの横幅に対する割合であり、100vwが基準になります。例えば、横幅320pxのビューポートだった場合、10vmは10分の1なので32pxになります。
この単位は、メインビジュアルに文字を重ねて配置するときにたまに使います。メインビジュアル上の文字はインパクトを与える見せ方をしたいので、ビューポートによって文字の大きさが変わるvwは都合がよいというわけです。

しかし、vwは使い方が難しい単位でもあります。デバイスの画面サイズの変化によって他の単位よりも容易にレイアウト崩れを起こしてしまうため、いろいろなビューポートのサイズで意図した通りに表示されるかを入念に検証しなければなりません。

まとめ

今時のフォントサイズ指定ではhtml要素にフォントサイズ62.5%を設定して、10pxを基準値にしてから各要素のフォントサイズはremで指定する。メインビジュアルにたまにvwを指定することがある。pxやemはフォントサイズ指定に使用すると修正が大変になるので、要所で使う分には構わないが使わないで作ることを考える。

参考
[CSS]フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック | コリス
CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO