はじめに

CSSでのフォントサイズの指定方法には２つの分類がある。

絶対値

サイズが固定される。指定されたサイズで表示され、他の要素の影響を受けない。

相対値

指定された要素自体の値を持っていない。サイズは親要素のフォントサイズによって変わる。依存する親要素のフォントサイズが変われば、それに応じて相対値を指定された要素のフォントサイズも変わる。

フォントサイズ指定によく使われる単位

px

絶対値
指定されたサイズが16pxであれば親要素のサイズに関係なくフォントサイズは16px

%

相対値
親要素のフォントサイズに対する割合。親要素のサイズによって指定した要素のサイズも変わる。emと同じ。

sample.css

html {
  font-size: 100%;
}
div {
  font-size: 16px;
}
/* 親要素の半分の8px */
div > p {
font-size: 50%;
}

em

相対値
％と同じ。親要素のフォントサイズに影響される。

sample.css

html {
  font-size: 100%;
}
div {
  font-size: 16px;
}
/* 親要素の半分の8px */
div > p {
font-size: 0.5em;
}

rem

相対値
ルート（html）要素が基準になる。

sample.css

/* 16px */
html {
  font-size: 100%;
}
/* html要素の2倍の32px */
div {
  font-size: 2em;
}
/* html要素の半分の8px */
div > p {
font-size: 0.5em;
}

vw

ビューポートの幅の1/100の大きさを持った単位。ビューポートが100pxの場合1vw、1vwは1pxとなる。
画面サイズによってフォントサイズが変わる。

↓画面サイズによって可変する単位

単位	説明
vw	ビューポートの幅の1/100(100vwで横幅いっぱい)
vh	ビューポートの高さの1/100(100vhで縦幅いっぱい)
vmax	ビューポートの高さか幅の大きいほうの1/100
vmin	ビューポートの高さか幅の小さいほうの1/100

レスポンシブデザインと画面サイズによって可変する単位

vwで指定すると画面サイズが小さい時にはフォントサイズも小さくなり、画面サイズが大きくなればフォントサイズも大きくなるのでレスポンシブデザインに使用するとフォントサイズが扱いやすくなる。
320px（一番小さいデバイスの幅）を基準としてフォントサイズを指定する。これで画面サイズに合わせてフォントサイズも大きくなってくれる。

サイズ早見表

px	vw
10px	3.125vw
11px	3.4375vw
12px	3.75vw
13px	4.0625vw
14px	4.375vw
15px	4.6875vw
16px	5vw

計算方法

フォントサイズ14pxの場合
14px ÷ 320px = 0.04375(4.375%) = 4.375vw

ブラウザのデフォルト

ブラウザのデフォルトフォントサイズは

100% = 16px = 1em = 1rem