年々増えていく、フォントサイズを指定する単位。
「px」を基本として、「vw」と「vh」が使えるようになったと思ったら、気が付くと「rem」という単位もあったり、煩雑としてきました。

今回は私がレスポンシブサイトを構築する際、一番楽だと思うフォントサイズ設定を紹介します。

決め手は「rem」と「vw」

CSSでまずは基準となるフォントサイズを決めます。下記のように設定します。

そして、個々のCSSを記述していく際、すべてのfont-sizeで「rem」単位を使用します。
PC版のみではなく、すべての端末に適用されるようにメディアクエリは外してください。

上記の見本だと、PC版では16pxが規準なので、h2は20px、pタグは16pxになります。

解説

remは、常にhtmlタグに設定されているfont-size基準として算出される性質があります。
その性質を利用して、Tab幅で、規準となるhtmlのfont-sizeを「vw」にしてしまえば、各タグのフォントサイズ比率を保ったまま、勝手にイイ感じのサイズになるCSSになります。
いろんな端末で確認しながらfont-sizeを定義し直す必要もなくなります。

この手法を使用すると、ウェブアクセシビリティ対応必須な場合でも、エラーが出ません。
文字サイズ変更機能があっても、htmlを分岐させるだけなので簡単！

あとは実際にTab幅とSP幅で見て、微調整を行うだけで、font-sizeの設定は完了すると思います。
意外と工数が多く発生しがちなfont-size調整がなくなり、レイアウト調整だけで済むとなると、コーディングの工数がぐっと抑えられると思います。

PC版htmlタグの基準は16pxの固定にするのがオススメですが、それ以外はご自身のサイトのデザインに合わせて数値を変更してください。
フォントサイズは小数点pxになってしまうと、ぼやける場合があるので、端数が出ないよう「rem」を記述してあげてください。（14.3pxなどはNG）

rem フォントサイズ早見表

px	rem（htmlが16px）	rem（htmlが14px）
10px	0.625rem	0.71428571428571rem
11px	0.6875rem	0.78571428571429rem
12px	0.75rem	0.85714285714286rem
13px	0.8125rem	0.92857142857143rem
14px	0.875rem	1rem
15px	0.9375rem	1.0714285714286rem
16px	1rem	1.1428571428571rem
17px	1.0625rem	1.2142857142857rem
18px	1.125rem	1.2857142857143rem
19px	1.1875rem	1.3571428571429rem
20px	1.25rem	1.4285714285714rem
21px	1.3125rem	1.5rem
22px	1.375rem	1.5714285714286rem
23px	1.4375rem	1.6428571428571rem
24px	1.5rem	1.7142857142857rem
25px	1.5625rem	1.7857142857143rem
26px	1.625rem	1.8571428571429rem
27px	1.6875rem	1.9285714285714rem
28px	1.75rem	2rem
29px	1.8125rem	2.0714285714286rem
30px	1.875rem	2.1428571428571rem

これ以外にも、「px」⇔「rem」の変換ツールが存在します。
px rem変換： https://hp-html.jp/px/

色々活用して、少ない工数でどんどんコーディング高速化を叶えましょう。

YoutubeChannelのご紹介

同様の内容を、動画でご覧になれます。

https://youtu.be/jgIkzEE6cis