フォントサイズの指定は一般的にはpxでなされる。
これは1ピクセルを1とする絶対単位。
ブラウザによって変化はしないため、画面の小さいデバイスなどでは見づらくなることがある。そのために相対単位で指定するいくつかのやり方がある。
サンプル：ブラウザでの表示サンプル
| 指定方法（〇は数値、小数点も可） | 意味 |
|---|---|
| 〇px | 1ピクセルを 1とする単位。サイズは72dpiや96dpiといったモニタの解像度により変化する。 |
| 〇em | 使われている書体（フォント）や、CSSで指定している文字の大きさを1とする単位。 例：文字の大きさを10pxとした場合、1em＝10px もし、CSSで文字の大きさを指定していない場合は1em＝16px |
| 〇ex | 小文字の｢x｣の高さを1とする単位。 |
| 〇% | 文字の大きさを％で指定する方法 |
| xx-small | キーワード指定の１つ。 ユーザーの既定のフォントサイズ を基準とした絶対的なサイズのキーワード。x-smallより1.2倍小さい。 |
| x-small | キーワード指定の１つ。 ユーザーの既定のフォントサイズ を基準とした絶対的なサイズのキーワード。smallより1.2倍小さい。 |
| small | キーワード指定の１つ。 ユーザーの既定のフォントサイズ を基準とした絶対的なサイズのキーワード。mediumより1.2倍小さい。 |
| medium | キーワード指定の１つ。 ユーザーの既定のフォントサイズ 。絶対的なサイズのキーワード。 |
| large | キーワード指定の１つ。 ユーザーの既定のフォントサイズ を基準とした絶対的なサイズのキーワード。mediumより1.2倍大きい。 |
| x-large | キーワード指定の１つ。 ユーザーの既定のフォントサイズ を基準とした絶対的なサイズのキーワード。largeより1.2倍大きい。 |
| xx-large | キーワード指定の１つ。 ユーザーの既定のフォントサイズ を基準とした絶対的なサイズのキーワード。x-largeより1.2倍大きい。 |
| larger | キーワード指定の１つ。相対的なサイズのキーワード。 親要素のフォントサイズから相対的に、上記の絶対的サイズのキーワードで使われている倍率におよそ沿う形で拡大される。 |
| smaller | キーワード指定の１つ。相対的なサイズのキーワード。 親要素のフォントサイズから相対的に、上記の絶対的サイズのキーワードで使われている倍率におよそ沿う形で縮小される。 |
| 〇vh | ビューポートの高さを基準とする単位。 1vh＝画面の高さの1/100の大きさ。 100vh＝画面の高さいっぱいの大きさ。 |
| 〇vw | ビューポートの幅を基準とする単位。 1vw＝画面の幅の1/100の大きさ。 100vw＝画面の幅いっぱいの大きさ。 |
| 〇vmin | ビューポートの幅 or 高さ どちらか小さいほうに対する割合（1/100）での指定。 |
| 〇vmax | ビューポートの幅 or 高さ どちらか大きいほうに対する割合（1/100）での指定。 |
ビューポートとは
ウェブページを表示するための領域のことで、一般的なウェブブラウザではブラウザのウインドウからアドレスバーやタブなどのブラウザのインターフェースを除いた部分。ビューポートを基準にする単位、vh/vmは主に画像に対して用いられることが多い。
ビューポート単位指定のメリット/デメリット
メリット
画面の大きさによる文字の拡大縮小がなくなり、デバイスごとの文字の大きさに対するレイアウト崩れが軽減される
デメリット
1000pxのビューポート幅の4vwの場合、フォントサイズが40pxになるため、ブレイクポイントごとの調整が必要になってくる。
POINT
ブラウザごとに表示させるには相対値指定が最適ではあるが、最近はブラウザ全体を拡大縮小して読むことが主流になっているため、pxでも問題はないように思う。また、androidの4.2ではvwはサポートされていない。
