CSSのフォントサイズ指定単位を整理してみた

先日、たまたま見た記事がきっかけで「vw」という単位があることを知り、
「これすげー便利じゃん！」と思って実務で使っても問題なさそうな案件で導入してみました。
Can I useで見てみると、まぁなるほどAndroidBrowser4.3は対応していないけれど、占める割合は僅かであるし（SPサイト前提ならIEは無視できるし）使って問題なさそうです。
なんでこんなかゆいところに手が届く単位を知らなかったのか。

px、em、rem、％、vw、vh、vmin、vmax・・・　CSSで使える単位は多様です。
PCのコーディングであれば、そこまで気にせずともem、rem、pxでだいたいのことは解決できるのですけれど、
SP用となるとそうもいかず、画面幅に振り回されて辟易することが多々ありました。この文字画像で切っていいですか…ダメっすよね…っていう感じ。

というわけで。
自分の理解の整理も含め、「フォントサイズに関して」に焦点を当てつつ、まとめてみたいと思います。

各単位の算出基準・特徴

単位には親や他の要素、ユーザーの環境を参照して算出されるものがあります。
その基準がどこにあるかをきちんと把握することで、適切な単位選択が可能となると思います。

px

「px」はピクセル単位での指定を行う際に使用します。
px指定はディスプレイの解像度を基準とした単位です。そのため通常であれば画面の縦幅・横幅が変わろうと、親要素のフォントサイズが指定されていようとも、ディスプレイ側でなにかしら変更を行っていなければ、同じ大きさで表示されます。

%

「％」はフォントサイズプロパティの値を100%とする大きさです。
親要素のフォントサイズの値に影響を受けます。
130％なら元のサイズの1.3倍の大きさになります。

気を付けなければいけないのが、この「％」は親要素のフォントサイズの値を参照したものだということです。
widthなど他の値で％指定を利用している場合に混乱しないように注意が必要です。
SPサイトなんかだと特にwidthの％指定は多く見受けられますし、単位を絶対に％で統一させないといけない…ってわけじゃないならば、個人的には避けておいた方が無難だと思っています。

また、％指定、ならびにem指定は「親要素」の値に影響を受けるため、親要素のフォントサイズが％もしくはemで指定されていた場合、その値を100％としたときのサイズで算出されます。
例えば親に120％がかかっていて、該当要素に140％をかけると、1.2倍されたものをさらに1.4倍した値になります。

em

「em」はフォントサイズプロパティの値を1とする大きさです。
親要素のフォントサイズの値に影響を受けます。
1.3emなら元のサイズの1.3倍の大きさになります。％指定と同じですね。
1emで1文字分なので、インデントの指定や段落下のマージンなんかでよく用いています。

rem

「rem」はルート（html）のフォントサイズを1とする大きさです。
「root」+「em」でremです。
親要素のフォントサイズの値に影響を受けません。
ですので、入れ子で「1.2rem」指定の要素の中に「1.3rem」指定の要素が入っていても、ルートのフォントサイズを基準にして算出されるので、そのままそれぞれ1.2指定の個所は1.2倍、1.3指定の個所は1.3倍で表示されます。

ただし、IE10以前では対応されていないようですのでご注意ください。

vw　（vh vmax vmin）

「vw」はViewportの横幅を基準として算出されます。1vwが1％に相当します。
冒頭でも貼りましたがCan I useでの状況はこちら。

他のViewport関連の単位の基準は、「vh」は縦幅、「vmax」縦か横の大きい方、「vmin」縦か横の小さい方となっています。

vw指定で記述することで一番メリットがあるのは、Sp版のランディングページ（LP）のコーディングです。
テキスト主体のWebページであれば、画面幅によってフォントサイズを変更せずとも読みやすいサイズ・行間を指定できればよいのですが、画面両端いっぱいに画像が広がるようなデザインのLPであると、一部分テキストで表記する部分が、デザインカンプと実機での差が大きくでてしまうことがあります。

縦だけならまだpx、emで間に合う（それでも少しズレが出るのが気に食わないですが）けれど、デザイン時にランドスケープまで見ていない場合（だいたいの場合そうだと思うし実際見ないけど）、テキスト部分と画像の部分に必要以上に差が出てしまいます。

横100％で画像を置く前提なのなら、vwでフォントサイズを指定することで比率が狂うことなく表示することができます。
画像や領域を比率で確保しているのであれば、中身のフォントも比率で置くのがベターなのかなと思います。

画像で置いてしまうのが手っ取り早いのでしょうが、容量削減やらなんやらかんやら考えると
そうもいかないこともあるので、覚えておいて損はないかなと思います。

・TAGcss, スマホ, フォントサイズ