rem・emで指定した文字サイズが想定とずれるときの原因と対処

remとemの基準の違い

remはルート要素(html)のfont-sizeを基準にする単位です。htmlのfont-sizeが16pxなら1remは16px、1.5remは24pxになります。ページのどこで使っても基準が一定なので、サイズ設計が予測しやすいのが特徴です。

一方emは、その要素自身の(継承された)font-sizeを基準にします。親のfont-sizeが大きければ同じ1emでも実寸が変わります。この相対性が、ネストしたときの意図しない拡大・縮小の原因になりがちです。

想定とずれるときは、まずその指定がremなのかemなのか、そして基準がどこにあるのかを意識して確認するのが第一歩です。

emのネスト継承で起きる連鎖

emはネストすると効果が掛け算で積み重なります。例えばfont-size:1.5emを指定した要素の中に、さらに1.5emの要素があると、実寸は1.5×1.5=2.25倍になります。リストの入れ子などで文字が際限なく大きくなるのはこの典型です。

この連鎖を避けたいなら、サイズの基準を固定したい箇所はremを使うのが安全です。emは、親に対する相対的な調整(余白やアイコンのスケーリングなど)に限定して使うと扱いやすくなります。

どうしてもemを多用する場合は、各階層の継承font-sizeを開発者ツールのComputedで実測し、掛け算の結果を確認しながら設計します。

症状別チェック表

rem・emで指定した文字サイズが想定とずれるときの原因と対処は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

ずれを切り分ける手順

文字サイズのずれは、基準を一つずつ確定させると原因が見えてきます。

1. htmlのfont-sizeの算出値を確認する(初期は多くのブラウザで16px)
2. 対象要素の指定がremかemかを確認する
3. emなら親要素のfont-sizeをたどって基準を把握する
4. Computedで対象のfont-sizeの実寸(px)を確認する
5. ブラウザの最小フォントサイズ設定が効いていないか確認する

htmlに62.5%を当てる手法の落とし穴

html{font-size:62.5%}として1rem=10pxに揃える手法は計算が楽になりますが、ユーザーがブラウザのデフォルト文字サイズを変更している場合の相対性を崩しやすいという指摘があります。アクセシビリティを重視するなら、remをそのまま16px基準で使うほうが無難です。

また、pxで全部指定するとユーザーのブラウザ設定を無視してしまうため、本文サイズはremで指定して拡大設定を尊重するのが望ましい設計です。

想定とのずれを感じたら、自分の環境のブラウザ文字サイズ設定が標準のままかも併せて確認してください。設定を大きくしているとrem基準も連動して大きくなります。

実寸を共有して認識を合わせる

文字サイズの議論は、言葉より実際の表示を見比べるほうが早く合意できます。rem版・em版・px版を並べたサンプルを作り、複数端末で見比べると差が明確になります。

そうした検証用ページを関係者に見せたいときは、ギガサイト便にHTMLをドロップして発行される共有URLが使えます。CDN配信で表示が速く、URLのまま中身を差し替えられるので、サイズ調整を繰り返しながら同じリンクで確認を続けられます。一時公開ページにはnoindexが付くので検索結果に出る心配もありません。