ウェブサイト制作時のフォントサイズの指定方法について考え直す機会があったのでそれぞれの違いや見解をまとめてみます。
rem, em, px, % 等、単位の選び方に迷った場合は参考にしてみてください。
使用したバージョン Google Chrome 103.0.5060.114 / Microsoft Edge 103.0.1264.62
PR
フォントサイズで使われる主な単位
ここで言う「ブラウザのフォントサイズ設定」とは、
Chromeの場合「設定 > デザイン > フォントサイズ」
Edgeの場合は「設定 > 外観 > フォント > フォントサイズ」の項目です。
「一時的なズーム機能」は “ctrl +” や “ctrl -” で行う拡大縮小機能のことを指しています。
相対指定（%・em・rem 等）
他の数値を基準としてfont-sizeを決める指定方法です。
ブラウザのフォントサイズ設定、一時的なズーム機能共に有効です。
%
親要素から継承したfont-sizeを基準とした単位。
200%を指定すると継承したfont-sizeの2倍になります。
em
親要素から継承したfont-sizeを基準とした単位。
2emを指定すると継承したfont-sizeの2倍になります。
rem
html要素（ルート要素）のfont-sizeを基準とした単位。html要素（ルート要素）にfont-sizeを指定するとその値が基準となります。
html要素が16pxの場合に2remを指定すると32pxになります。
vw・vh
スクロールバーも含むブラウザの表示領域を基準とした単位。
100vwは表示領域と同じ幅になります。
絶対指定（px 等）
他の影響を受けず要素自身のfont-sizeを決める指定方法です。
ブラウザのフォントサイズ設定は反映されませんが、一時的なズーム機能は有効です。
px
ディスプレイの1画素を基準とした単位。
高解像度ディスプレイでは複数画素を1pxとして扱う場合もあります。
ブラウザのフォントサイズ設定を活かすかどうか
font-sizeをpxで指定した場合、その要素に対して「ブラウザのフォントサイズ設定」が無効になります。html要素（ルート要素）にpx指定をした場合、ページ内の全ての要素に対してこの機能が無効になります。
「ブラウザのフォントサイズ設定」を活かす場合は相対指定を使うことになります。
pxで指定した場合でも「一時的なズーム機能」による拡大・縮小は可能です。
font-size を rem で指定する場合
表示上は〇〇pxになるようにremで指定したいといった場合、pxをremに換算する必要があります。
たとえばルートのフォントサイズが16pxの場合（多くのブラウザのデフォルト値）に18pxになるようにremで表したい場合次のように求めます。
18 / 16 = 1.125
この場合1.125remが18px相当になるのですが、この計算はなかなかの手間です──。
この計算を単純にするために生まれたのが次の方法です。
ルート要素を62.5%にして計算しやすくする方法
html { font-size: 62.5%; }のようにルート要素のフォントサイズを指定すると10px相当になるため、px → remの換算が単純になるというもの。
この場合 1remが10px、1.4remが14px、1.8remが18px となります。
html {
font-size: 62.5%; // 10px相当
}
body {
font-size: 1.6rem; // 16px相当
}「ブラウザのフォントサイズ設定」を無効にしないためにremを選んでいるのに10px相当の小さい指定をするのは本末転倒に感じてしまいます。そこで私は
body { font-size: 1.6rem; } を追加して使っていました。こうするとbody以下の要素でfont-size指定が無いものは16pxで表示されます……が、すっきりしない感は拭えません──。
62.5% 方式は WordPress のエディター上には反映されない
ただ、この62.5%方式は現在のWordPressのブロックエディターには反映されません。
これはhtmlやbodyに指定したスタイルがブロックエディターを囲う要素のみに適用されるように変換されるため、ルート要素にfont-size: 62.5%;を指定できないからです。
結果としてフロントエンドとエディター上のフォントサイズにずれが生じます。font-size以外のプロパティにremを使っている場合もレイアウトが崩れるかもしれません。
Sassに計算を任せて解決
前述の理由で今は62.5%方式は今はほとんど使わなくなりました。
代わりにSassの関数に計算を任せています。
@function rem($px) {
@return (calc($px / 16)) * 1rem;
}pxをremに換算する関数を定義しておき、font-size: rem(18);のように引数を指定して使います。
この場合font-size: 1.125rem;のようにコンパイルされ、18px相当で表示されます。
backgroundの一括指定等でbackground: url(xxx) rem(10) rem(10) / 50%のような指定は「/」の部分で除算してしまうので注意してください。
さいごに
emについて
emがremと異なるのは「基準がどこか」という点です。
たとえば「親要素の2倍のサイズにしたい」といった場合、明らかにルート基準ではなく親要素が基準なのでemのほうが理にかなっています。後から見直したときもコーディングの意図が把握しやすいかもしれません。
font-size以外のプロパティではemの出番は多いですがそれはまた別の機会に──。
見直すことになったきっかけ
直接のきっかけはWordPressのアップデートでした。それに伴ってエディターがうまく使えないとか編集した通りにならないとかの対応をする際にCSSを見直すことになった、という流れです。
PR
