【ITニュース解説】That Weird Font Size Bug: A Deep Dive into Browser Settings and Front-End Font Strategies
2025年09月26日に「Dev.to」が公開したITニュース「That Weird Font Size Bug: A Deep Dive into Browser Settings and Front-End Font Strategies」について初心者にもわかりやすく解説しています。
ITニュース概要
Webサイトのフォントサイズがブラウザ設定で変わるバグは、`rem`単位がルート要素のフォントサイズに依存するためだ。明示的に設定しないと、ユーザーのブラウザ設定が適用される。デザインの一貫性かアクセシビリティか、製品の哲学によってフォント戦略を決める必要がある。開発者は早期に戦略を決め、デザイナーと連携することが重要だ。
ITニュース解説
ある日、ウェブページに奇妙なフォントサイズのずれが見つかった。品質保証（QA）テスターから「このページのフォントサイズがおかしい」との報告があったが、自分の環境ではデザイン仕様通りの16ピクセルで表示されており、特に問題はないように見えた。しかし、テスターの画面を共有してもらうと、同じページが20ピクセルという異なるフォントサイズで表示されていた。この現象はブラウザを変えても再現し、単なる環境設定の問題ではないことが明らかになった。
調査の結果、この問題の根本原因はChromeなどのウェブブラウザが持つ「デフォルトのフォントサイズ設定」にあることが判明した。多くのブラウザは、ユーザーが自分の見やすいように標準のフォントサイズをカスタマイズできる機能を提供している。そして、ウェブサイトのスタイル指定に「rem」という単位を使用している場合、もしウェブページのルート要素（htmlタグ）のフォントサイズが明示的に定義されていないと、ブラウザのデフォルト設定がそのサイト全体のフォントサイズに直接影響を与えてしまうのである。
ここで「rem」単位について詳しく見てみよう。ウェブデザインにおいてフォントサイズを指定する方法はいくつかあるが、px（ピクセル）やem（エム）、そしてrem（ルートエム）が代表的だ。pxは絶対的なサイズを指定するのに対し、emやremは相対的なサイズを指定する。特にremは、ウェブページの最上位の要素である<html>（ルート要素）に設定されたフォントサイズを基準にして計算される。例えば、ルート要素のフォントサイズが16pxと定義されていれば、font-size: 1rem;は16pxを意味し、font-size: 2rem;は32pxを意味する。
今回の問題の鍵は、このルート要素のフォントサイズが明示的に設定されているかどうかだった。もしCSSでhtml { font-size: 16px; }のようにルート要素のフォントサイズを固定していれば、ブラウザのデフォルト設定が何であれ、ウェブサイトは常に16pxを基準としてrem単位を計算するため、見た目が変わることはない。しかし、この定義がなければ、ブラウザはそのユーザーのデフォルトフォントサイズ設定（例えば16pxや20pxなど）をルートの基準として採用してしまう。その結果、同じ1remという指定でも、ユーザーのブラウザ設定によって実際の表示サイズが16pxになったり20pxになったりして、ウェブサイトのレイアウト全体が崩れてしまうことがあるのだ。
筆者はこの現象に興味を持ち、いくつかの有名なウェブサイトがこのフォントサイズの扱いにどう対応しているかを調べた。GitHubやYouTubeのようなサイトは、ルート要素のフォントサイズを明示的に固定している。これにより、ユーザーがブラウザのデフォルトフォントサイズ設定を変更しても、サイトのフォントサイズは変わらず、常に意図した通りのデザインと一貫性を保つことができる。これは、ブランドイメージや精密なUIデザインが非常に重要視されるプロダクトにとっては理にかなった戦略と言える。
一方で、ShopifyのようなECサイトは異なるアプローチを取っている。Shopifyのサイトは、ユーザーがブラウザのフォント設定を変更すると、それに合わせてサイト全体のフォントサイズも調整される。これは「ユーザーファースト」な視点であり、アクセシビリティを重視した設計だと言える。視覚に障害を持つ人や、単に大きな文字で読みたい人にとっては、自分にとって最適な文字サイズでウェブサイトを閲覧できることは非常に重要だからだ。
どちらの方法が「正しい」というわけではない。これはウェブサイトやプロダクトが何を最も重視するか、つまり「デザインの一貫性」と「ユーザーのアクセシビリティ」という二つの価値観のどちらを優先するかという選択の問題である。アクセシビリティの観点からは、ユーザーがフォントサイズを自由に設定できることは、様々なユーザーの読書習慣や視覚的なニーズに対応するために非常に望ましい。しかし、デザインやブランドの観点からは、フォントサイズの変更はレイアウトを崩したり、コンポーネントの位置をずらしたり、細かく調整された視覚的表現を台無しにする可能性がある。
筆者はこのトレードオフに対して、以下のような考えを持っている。ブログやECサイトのように「コンテンツ」が主役のサイトでは、ユーザーが読みやすいようにブラウザの設定を尊重する方が良い場合が多い。一方、ブランドサイトやデザインツールのように「デザイン」や「視覚的な正確さ」が極めて重要なプロダクトでは、フォントサイズを固定して一貫性を保つ方が安全だ。
また、ウェブ開発の現場では、デザイナーがAdobe XDやFigmaなどのツールで作成するモックアップはpx（ピクセル）単位で表現されることがほとんどだ。しかし、開発者が実際のコーディングでCSSを記述する際には、レスポンシブデザインやアクセシビリティの観点からrem単位を使用することが推奨される場合が多い。このpxからremへの変換作業は、単純な計算ミスを引き起こしたり、開発プロセスを遅らせたりする原因となることがある。
この課題に対処するために、筆者が実践していることはいくつかある。まず、プロジェクトの初期段階で、ユーザーによるフォントスケーリングをサポートするかどうかを明確に決定することが重要だ。もしrem単位を使用することに決めたら、デザイナーにもrem単位でデザインを作成してもらうか、少なくともpxからremへの正確な変換基準やガイドラインを提供してもらうよう依頼する。デザインとコードの間で単位の一貫性を保つことは、後々の修正やバグの発生を防ぐ上で非常に効果的だ。そして何よりも、プロジェクトのフォント戦略を早い段階で文書化し、チーム全体で共有しておくことで、多くの問題が未然に防げる。
今回の「小さなバグ」は、ウェブ開発における多くの重要な教訓を教えてくれた。一つは、ブラウザの設定がウェブサイトのUIに予期せぬ影響を与える可能性があること。次に、rem単位を使う場合は、必ずルート要素のフォントサイズを明示的に定義するべきであること。そして、アクセシビリティとデザインの一貫性はしばしば相反する関係にあり、プロダクトの特性に応じてどちらを優先するかを慎重に選ぶ必要があることだ。GitHubやShopifyのような大手サイトのフォント戦略は、彼らのプロダクト哲学を如実に反映している。最後に、デザイナーと開発者の間の早期かつ密な連携が、変換ミスやレイアウトの崩れといった問題を防ぐために不可欠であることだ。
筆者の個人的な経験則として、もしプロダクトがデザインモックアップと寸分違わぬ見た目を必要とするなら、ルートフォントサイズを明示的に設定して固定するべきだ。しかし、アクセシビリティやユーザーの多様なニーズを重視するプロダクトであれば、ブラウザのデフォルト設定にフォントサイズの制御を委ねる方が良いだろう。
この一連の経験は、一見些細なバグが、ウェブサイトの根幹をなすプロダクトの哲学や、誰のために最適化するのかという大きな問いに繋がることを改めて気づかせてくれた。フォントの扱いは単なる見た目のスタイリングに留まらず、ブランドとユーザーのどちらを優先するかという深い哲学的な選択を伴うものなのである。