font-size: 62.5%は使う？Sassのrem()でpx感覚を残す方法

はじめに

CSSで文字サイズを指定するとき、昔からよく使われてきた書き方があります。

html {
  font-size: 62.5%;
}

ブラウザの標準文字サイズは多くの場合 16px なので、62.5% を指定すると 1rem = 10px 相当になります。

font-size: 1.6rem; // 16px相当
font-size: 2.4rem; // 24px相当
font-size: 3.2rem; // 32px相当

これ、かなり分かりやすいんですよね。
特に長くCSSを書いている人ほど、手になじんでいると思います。自分もそのひとりです。

ただ、最近のCSS設計では、html の font-size を変更せず、ブラウザ標準のまま使う考え方も増えています。

html {
  font-size: 100%;
}

では、font-size: 62.5% はもう使わない方がいいのでしょうか。

ただ、ここで出てくるのが 1rem = 16px に慣れない問題です。
正直、毎回 24 ÷ 16 とか考えるのは、地味にしんどいです。

今回はそのモヤモヤを整理しながら、rootの文字サイズは標準のままにしつつ、Sass関数でpx感覚を残す方法をまとめます。

62.5%って今も使う？

結論からいうと、font-size: 62.5% を今すぐ全部やめる必要はありません。 既存サイトがこのルールを前提に組まれているなら、無理に変更すると影響範囲が大きくなることもあります。

html { font-size: 62.5%; } を指定すると、ブラウザ標準の 16px に対して62.5%となり、 1rem = 10px 相当で計算できます。長く使われてきたのは、px感覚で書きやすいという明確な利点があるためです。

一方、新規制作では、rootの font-size を標準のままにしておく方が扱いやすい場面が増えています。 Tailwind CSSや外部UIライブラリなど、1rem = 16px を前提としたCSSと組み合わせても、サイズのズレが起きにくいためです。

font-size: 62.5% が便利だった理由

まず前提として、font-size: 62.5% が悪い書き方というわけではありません。

むしろ、px感覚でremやemを扱いたい場合にはかなり分かりやすい方法です。

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}

このようにしておくと、1rem = 10px 相当で考えられます。

デザインカンプで 24px と書かれていれば、次のように書けます。

.title {
  font-size: 2.4rem;
}

これは直感的です。
24px なら 2.4rem。32px なら 3.2rem。変換がかなり楽です。

長年このルールで制作してきた人ほど、「もうこれでよくない？」となるのも分かります。自分もかなり長くこの感覚で書いてきました。

昔のブラウザ事情から生まれた工夫

font-size: 62.5% の考え方は、2000年代前半の「emで文字サイズを扱いやすくする」ための文脈で広まりました。

Richard Rutter氏が2004年5月18日に公開した 「How to size text using ems」 では、ブラウザの標準文字サイズを 16px としたうえで、body { font-size: 62.5%; } により 1em = 10px 相当で考えやすくする方法が紹介されています。

ただし、これは rem が今のように普通に使われる前の話です。 当時は、親要素の文字サイズに影響される em をどう扱うか、そして古いブラウザで文字サイズ変更にどう対応するかが大きな課題でした。

body {
  font-size: 62.5%;
}

ここで大事なのは、62.5% が「悪いコード」として生まれたわけではないことです。 当時の環境では、相対単位を実務で扱いやすくするための、かなり現実的な工夫でした。

一方で、2007年にA List Apartで公開された同じRichard Rutter氏の記事 「How to Size Text in CSS」 では、body { font-size: 100%; } をベースにした検証が行われています。 「62.5%で10px換算にすること」そのものを、今の新規制作の標準ルールとして採用するかは、別問題として考えた方がよさそうです。

つまり、font-size: 62.5% は「昔からあるから正解」というより、 当時の課題を解決するための知恵だった、と捉えるのが自然です。

今は前提が変わっている

今はCSSまわりの前提がだいぶ変わってきました。

rem はルート要素、つまり通常は html 要素の font-size を基準にする単位です。 そのため、rootの font-size を変えると、サイト内の rem 指定もまとめて影響を受けます。

この性質自体は便利です。 ただ、プロジェクト全体で「1rem を何px相当として読むか」が変わるため、チーム制作や外部ライブラリとの併用では少し注意が必要になります。

html { font-size: 100%; } のままなら、一般的な初期設定では 1rem = 16px 相当で読みやすくなります。

一方、html { font-size: 62.5%; } にすると 1rem = 10px 相当で計算しやすくなりますが、プロジェクト全体の基準も変わります。

便利さと引き換えに、外部CSSや後から参加する人が読み替えるコストが生まれる、というイメージです。

また、clamp() を使った可変フォントサイズも書きやすくなりました。 Sassを使えば、px感覚で指定して rem に変換することもできます。

html {
  font-size: 100%;
}

body {
  font-size: 1rem;
  line-height: 1.7;
}

rootを標準のままにしておくと、ブラウザの標準設定や外部ライブラリとのズレが起きにくくなります。 後から別の人がCSSを見たときにも、1rem = 16px を前提に読みやすい。 これも地味ですが、保守ではけっこう大事です。

Tailwind CSSなどとズレやすい

個人的に一番気になるのが、Tailwind CSSなどの外部ライブラリとの相性です。

Tailwind CSSでは、たとえば text-base が 1rem、つまり通常は 16px 相当として定義されています。 text-2xl は 1.5rem、通常は 24px 相当です。

でも、プロジェクト側で次のように指定していると、話が変わります。

html {
  font-size: 62.5%;
}

この場合、1rem は 10px 相当になります。 つまり、Tailwind側の text-base も 10px 相当で表示されることになります。

自分のCSSだけなら、チーム内で「この案件は1rem=10px換算です」と決めれば成立します。

ただ、Tailwind CSSや外部UIライブラリ、WordPressプラグインのCSSなど、rem前提のスタイルが入ってくると、サイズ感が想定より小さくなることがあります。

ここが 62.5% のちょっとした落とし穴です。

Tailwind側の想定:
text-base = 1rem = 16px相当

html { font-size: 62.5%; } の場合:
text-base = 1rem = 10px相当

Tailwind CSSを使う案件では、rootの font-size は標準のままにしておく方が、公式ドキュメントの値とも読み合わせやすくなります。

特に、途中からTailwind CSSを導入する可能性があるサイト、既存のCSSとUIライブラリを混ぜるサイト、複数人で保守するサイトでは、 rootを10px換算に変えるメリットよりも、標準に寄せておく安心感の方が大きいと感じます。

でも 1rem = 16px は計算しづらい

とはいえ、ここで問題があります。

1rem = 16px に慣れていないと、やっぱり計算しづらいんです。

font-size: 1rem;     // 16px相当
font-size: 1.5rem;   // 24px相当
font-size: 2rem;     // 32px相当
font-size: 2.5rem;   // 40px相当
font-size: 3rem;     // 48px相当

もちろん、慣れれば問題ありません。

でも制作中に、見出し、本文、余白、カード内のテキストなどを調整していると、毎回頭の中で 24 ÷ 16 = 1.5 と考えるのは地味に面倒です。

こういう小さな面倒って、積み重なるとけっこう効いてきます。
「いや、計算すればいいだけなんですけどね」と思いつつ、毎回やるのはやはり面倒です。

そこで、Sass関数に任せます。

rem() 関数でpx感覚にする

Sass側に rem() 関数を用意しておくと、かなり楽になります。

CSSとしては rem で出力しつつ、Sassを書くときはpx感覚のまま指定できるようにします。

@use "sass:math";

@function rem($px) {
  @return math.div($px, 16) * 1rem;
}

使うときは、次のように書きます。

.title {
  font-size: rem(32);
}

.text {
  font-size: rem(16);
}

出力されるCSSは、以下のようなイメージです。

.title {
  font-size: 2rem;
}

.text {
  font-size: 1rem;
}

考え方はシンプルです。 rootの font-size は標準のまま。 人間が書くときだけ rem(24) のようにpx感覚で指定します。

変換はSassに任せるので、毎回 24 ÷ 16 を頭の中で計算しなくて済みます。

「CSSの基準は標準に寄せる」「書き心地はpx感覚にする」。 この分け方が、現場ではいちばん平和な気がします。

これなら、CSSの出力は rem。 でも書くときは 16px、20px、32px の感覚で進められます。

ちなみにSassでは、今後のことを考えると / で割り算するより、公式で案内されている math.div() を使う書き方にしておくのがよさそうです。

実務での使い分け

rem() は、すべての値に使う必要はありません。 文字サイズや余白など、px感覚で考えたい値から取り入れ、目的に合わせて使い分けます。

@use "sass:math";

@function rem($px) {
  @return math.div($px, 16) * 1rem;
}

html {
  font-size: 100%;
}

body {
  font-size: rem(16);
  line-height: 1.7;
}

font-size: rem(16);
font-size: rem(24);
font-size: rem(32);

参考情報

今回の記事では、font-size: 62.5% が広まった背景、rem の仕様、Tailwind CSSのremベースのサイズ定義、Sassの math.div() への移行情報を確認しました。 技術記事として言い切りすぎると誤解が出やすいテーマなので、「昔の工夫としては意味があった」「ただし新規制作では標準に寄せる方が扱いやすい」という形に整理しています。

• Richard Rutter「How to size text using ems」
• A List Apart「How to Size Text in CSS」
• MDN Web Docs「font-size」
• MDN Web Docs「<length>」
• MDN Web Docs「clamp()」
• Tailwind CSS「font-size」
• Sass「Breaking Change: Slash as Division」
• Sass「sass:math」