CSSで基本的なフォントサイズの指定方法

4年に一度のサッカーの祭典、W杯が始まりました。普段はほぼ観ないサッカーですが、W杯は別。日本を応援しつつ世界のイケメンプレーヤーを見つけるのが楽しみだったりします。
さてさて、今回はCSSでのフォントサイズの指定方法についてお届けします。

大前提として、そもそものデフォルトサイズは
100% = 1em = 1rem = 16px = 12pt

CSSでのフォントサイズの指定方法にはいくつかありますが、大きく分けて相対指定と絶対指定があります。

サイズを固定した指定方法です。他CSSによる影響を受けません。

それ自身に決まったサイズは無く、親要素の指定によって変わります。

* Viewport ビューポート= ブラウザのウィンドウサイズ。 ビューポートが50cm幅の場合, 1vw = 0.5cm

代表的な単位についてもう少し詳しくみてみましょう。

最もスタンダードな指定方法といっても過言ではないでしょう。全ブラウザで全く同じ大きさであると思われているかもしれませんが、実はデバイスによって大きさが違います。1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。

親要素に対しての相対的なサイズの単位です。bodyのfont-sizeが100%もしくは何も指定していない場合、 ブラウザのデフォルトのフォントサイズが基準となり、1em=16pxとなります。

root(html)の対しての相対的なサイズの単位です。bodyのfont-sizeが100%もしくは何も指定していない場合、 ブラウザのデフォルトのフォントサイズが基準となり、1rem=16pxとなります。
相対指定で一番わかりやすいのはこのrem指定ではないかと思います。ルートを
html { font-size: 62.5%; }
と設定するとデフォルトのフォントサイズを16pxから10pxに変更できます。基準を10pxとすることで、1.6remが16px、2remが20px、というように直感的にフォントサイズを設定することができます。

最近は当たり前になったレスポンシブデザインですが、px指定、em指定、rem指定等ではPCとSPでそれぞれ設定を変更しないとバランスが悪い場合が多いかと思います。

そこで試していただきたいのが、ビューポートに合わせて変化するvw、vh指定です。基準となるビューポートの幅は100vwです。10vwと設定するとビューポート幅の10%でフォントサイズが変化します。
ただこの指定方法にも弱点はあり、ビューポートが広すぎる場合は文字が大きすぎる、ビューポートが狭すぎる場合には文字が小さすぎて読みにくくなってしまいます。可変させるビューポートの幅を設定する必要があります。

これまではなんとなくこの指定方法がよさそうだ、という軽い気持ちで指定していたのですが、それぞれの特徴をきちんと把握したうえで使いこなさないといけないですね。