CSSフォントサイズ指定の考え方、remとemの違いとは？

Webブラウザの文字サイズはCSSのfont-sizeで指定します。この指定方法により若干挙動が異なるので注意が必要です。まずfont-sizeで指定できる単位はこちらです。

• px（ピクセル）
• ％（パーセント）
• em（エム）
• rem（レム）
• vw（ビューポートワイズ）
• vh（ビューポートハイト）

ディスプレイ上の大きさは解像度に依存するためメートルなどのように絶対的な大きさとは異なります。同じ100pxでもディスプレイごとに大きさが変わるのです。そのため文字サイズを16px相当と指定した場合、表示サイズは端末ごとに違います。PCとスマホで文字サイズの印象が違うのをイメージするとわかりやすいでしょうか。

さてこのfont-sizeですが、単位により実際の挙動が異なることを把握する必要があります。CSSの設定は親要素を継承するのですが、文字サイズは単位の選択次第で継承状況が変わります。

ピクセル指定

font-sizeをpxで指定すると親要素を継承しません。そのためキャプションは本文の80%程度とする、ような指定をする場合、実際のサイズを指定することになります。

p {
font-size:16px;
}
p.caption {
font-size:12.8px;
}

この設定はデフォルトの文字サイズを変更しても影響を受けません。また、IEではピクセル指定をした場合、文字サイズを変更しても変わりません。

em指定と％指定

emと％はどちらも相対サイズとなり、親要素に対しての割合となります。emは倍数、％は率です。

例：親要素より20％大きくする場合
em：1.2em
％：120％

効果はどちらも一緒ですが、弊社はemの方が使い慣れています。

rem指定

remはemの拡張したようなイメージがあります。emが親要素に対しての相対サイズとなるのですが、remはに対する相対サイズとなります。親要素を継承しないので、後からCSSを見直すときに把握しやすいです。を10pxに設定しておけば、16remは16px、1.2remは12pxとわかりやすいです。

vwとvh

vwとvhは表示領域に対しての割合となります。vwは幅、vhは高さが基準です。レスポンシブデザインで主に使用する想定でしょうが、スマホサイトをタブレットで表示した場合、単純に拡大したようになるため大雑把な印象となります。PC・スマホ・タブレットを1つのCSSで表現するような使い方なのでしょうが、現実的にはあまり有効的ではないかなと考えます。やはりPCとスマホではそれぞれ専用のCSSで使い分けた方が後工程でも対応が速いかなと思います。

remが使いやすい

このようにフォントサイズの指定方法はいくつかありますが、弊社が現在推しているのでrem指定です。文字サイズの親要素からの継承がないこと、表示サイズの設定内容がわかりやすいことが理由です。文字サイズを変更するというボタンを設置した場合ものfont-sizeを切り替えるだけで良いので拡張性もあります。弊社は以前はemを多用していたのですが、親要素からの継承があるために、本文中の一部を小さくするような設定をする時にemとpxを併用することもありました。remの場合はremだけで完結できるのでわかりやすい運用ができますね。