【小ネタ】CSS でデザインしたサイトの公開前に、ブラウザの文字サイズ設定を変更して表示崩れがないかチェックしよう

Posted at 2025-09-06

TL;DR

Chrome の設定で、デフォルトのフォントサイズを変更できます。これによって、ルート要素 (HTML の場合は html²) のデフォルトの文字サイズが変化し、それに合わせて 1rem の長さも変化することになります。

Firefox にも同様の設定箇所があります。

1px と 1rem の比率が変わってしまうため、表示が崩れてしまう場合があります。

具体的には、参考文献³に掲載されている例のように、要素同士が重なったり、意図せず改行されてしまう可能性があります。

（※上記画像は Yahoo!ニュースのスクリーンショットを撮影して引用）

ここから先は余談です。主に参考リンクの内容をまとめただけで、特に個人的な思想はありません。

ルート要素のフォントサイズを px でしっかりと指定して、それ以外の要素も px で設計すれば、ブラウザのフォントサイズ変更を原因とする表示崩れは発生しなくなります。

しかし、ブラウザのフォントサイズ調節機能を殺してしまうことになる⁴⁵ため、もしあなたが初学者でないなら他の方法を採用できないか検討には含めるべきでしょう⁵。

一方で、フォントサイズを変更している人は（少し前のデータでは）3% 程度⁴らしいので、あなたが初学者であれば、全ての長さの単位に px を使うのも十分合理的です⁴。

html {
  font-size: 16px;
}

逆に、全ての長さを rem や em で指定する方法もあります。

この方法については、サイト訪問者にとっての特段のデメリットは思いつきませんでした。一方で開発者にとっては、必要な画像の寸法を計算するのが面倒、注意しないとうっかり px 指定を使いがち、などの難点があります。

html { font-size: 62.5%; } というハック的なテクニック³⁶もこの亜種になります。

img.thumbnail {
  /* 200px のサムネイル画像 */
  height: 20.0rem;
}

rem と px を併用する方法もあります。

この際、ブラウザのフォントサイズやフォントファミリーの違いによる表示崩れを防ぐため、テキストを含む要素の幅や高さを固定せず、また、 Flexbox を使用して要素が次の行に回り込めるようにするなど、適切にデザインする必要があります。

見出しや本文のフォントサイズ、行間、字送りなどの長さには rem や em などの単位を使用します。一方で、画像や UI などの要素には主に px を使用します。ただし、例外も多くあり⁵、簡単ではありません。表示崩れが発生するくらいなら固定レイアウトの方がマシという考えもあると思います。

一応、極小が 9px で極大が 24px らしい⁵ので、その範囲で表示が崩れなければ大丈夫なんじゃないかと思います。

注1：ブラウザのズーム機能とは異なります

ブラウザのズーム機能では 1rem と 1px の比率は変化せず、等しく拡縮されるため、どちらかと言うとレスポンシブ対応に近い作業になります。

これらの機能の違いについて、参考文献⁵⁷などで詳しく説明されています。

（余談：古い Chrome ではデフォルトで最小文字サイズが非ゼロに設定されていたため、ズーム機能でページを縮小すると表示が崩れることがありました¹。）

注2：タッチデバイスのピンチ操作とは異なります

ピンチ操作を行うと、有効な画面幅も同時に変化するため、表示崩れはほとんど発生しません。

注3：OS の文字サイズ設定によってデフォルトの文字サイズが変化する場合があります

特に Android においては、OS 側の文字サイズ設定によって、ブラウザ上で表示される文字のデフォルトサイズが変化する場合があるようです⁸。

しかし、この現象は発生する条件が複雑で、手元の端末では文字サイズが変わらないケースもあったため、こちらについては補足に留めたいと思います。