ブラウザによるフォントサイズの違いと統一

2009.01.13　Posted by Tanaka

Webプログラミング

※2023年5月29日に一部内容を更新しました

ブラウザのデフォルトフォントサイズとは

ブラウザによって文字の見た目の大きさが異なる場合があります。
これは、それぞれのブラウザが基準としている文字の大きさ”デフォルトフォントサイズ”が違うからです。

デフォルトフォントサイズとはフォントサイズを指定せずにHTMLファイルに文字を記述した際に表示されるサイズのことです。

しかし2023年4月現在主流といわているシェア率上位5位のデスクトップブラウザのデフォルトフォントサイズは全て16px(12pt)で統一されています。

シェア率上位5位のデスクトップブラウザ

Google Chrome
Safari
Microsoft Edge
FireFox
Internet Explorer（日本国内シェア）、Opera（世界シェア）

そのため、そこまで気にする必要はないでしょう。

しかし最小フォントサイズではこれらにも違いがあり、ChromeやEdgeは、デフォルトの最小フォントサイズが「10px」と設定されています。
この状態でフォントサイズ9px以下を指定しても適用されないため、閲覧環境によって差異が出てしまうため注意が必要です。
フォントサイズ10pxの状態からscale()等を利用して、変形させる必要があるでしょう。

このようなブラウザによる文字の大きさの違いをスタイルシートで統一させる方法をご紹介します。

.text_small {
font-size: 10px;
transform: scale(0.9); /* 10px を 0.9倍し、9pxに変形 */
transform-origin: 0 0; /* テキストの描画開始座標を左上に固定 */
}

.text_small {

font-size: 10px;

transform: scale(0.9); /* 10px を 0.9倍し、9pxに変形 */

transform-origin: 0 0; /* テキストの描画開始座標を左上に固定 */

}

この指定により、フォントサイズを9pxに変更することができます。フォントサイズの相対値と絶対値

フォントサイズを指定する「font-size」は、親要素で指定したサイズを継承します。
例えば、親要素のフォントサイズが16pxであれば、子要素で「font-size: 200%;」「font-size: 2em;」「font-size: 2rem;」と指定すると32pxになります。これを相対値と呼びます。
一方で「font-size: 32px;」や「font-size: 24pt;」と指定してしまえば、親要素が16pxでなくとも、子要素はそれぞれ32px、24ptとなります。これを絶対値と呼びます。

フォントサイズの統一について

多くのブラウザでデフォルトのフォントサイズが16pxとされているため、無理に統一させる必要はありません。
また統一させることで考えられるデメリットも存在します。

フォントサイズを統一させるデメリット

各ブラウザではズーム機能とは別に、表示させるフォントサイズを変更する設定があるため、閲覧者側でも変更が可能です。例えば、小さな文字が見えづらくなった閲覧者は設定からデフォルトフォントサイズを大きくするケースがあります。閲覧者が任意に文字サイズを変更できるように実装することは、アクセシビリティの観点で重要な要素であり W3Cが勧告しているガイドライン（https://www.w3.org/TR/WCAG21/#resize-text）にも記載されております。相対値を利用していると、デフォルトフォントサイズが変更されたとき、サイズの比率は維持されたまま大きさが変更されます。