[Google Chrome] 10px以下のfont-sizeがレンダリングされるようになった

Google Chromeでは10px以下のフォントサイズが指定通りにレンダリングされなかった

Google Chrome 118より以前は、デフォルトの最小フォントサイズが10pxに設定されていた。CSSにおいて10px以下のフォントサイズは指定どおりにレンダリングされず、10px以下は10pxと同様のレンダリング結果になっていた。

指定のフォントサイズにレンダリングしない設定の明確な理由は不明だが、単純にフォントサイズが小さいと読みづらく、特にマルチバイト文字を有する言語においては、より文字が潰れて読みづらくなるため固定されていたものと思われる。日本語は10px以下、中国語では12px以下になるなどロケールによって設定は異なるようだ¹。

サンプル

ブラウザの設定で最小フォントが設定されている場合は期待通りの表示にならないので注意。

これまで10px以下のフォントサイズはどう表現していたか

モバイル端末や高解像度のディスプレイ端末の普及によって、昨今のウェブサイトのデザインにおいては10px以下のフォントサイズを指定することは少なくなってきている。しかし、古くから存在しているウェブサイトにおいては10px以下のフォントサイズが使われることは珍しくなかった。

これまでのGoogle Chromeで8px相当のスタイルを指定する場合は、以下のようなスタイルを指定していた。

/* ベースのフォントサイズを10pxにして、scaleで0.8倍に縮小する */
.font-size-8px {
  font-size: 10px;
  transform: scale(0.8);
}

transform: scale()の問題点

transform: scale()の指定だけで意図通りの表示結果になる場合は良いが、デザインによってはこのままでは意図通りの位置に配置されず、transform-originで座標を調整する必要がある。

/* 調整例 */
.font-size-8px--adjusted {
  font-size: 10px;
  transform: translateY(1px) scale(0.8);
  transform-origin: bottom center;
}

これからの10px以下のフォントサイズ指定

当然ながら今後はGoogle Chromeのためにtransform: scale()を使わなくても良くなる。

/* 当たり前の指定ができるようになった */
.font-size-8px {
  font-size: 8px;
}

フォントサイズを10px以下に指定することの是非

モバイル端末や高解像度のディスプレイの普及によって、そもそも10px以下のフォントサイズ指定は少なくなってきているが、10px以下のフォントサイズをするメリットはあるのだろうか。

アクセシビリティ観点

Web Content Accessibility Guidelines（WCAG）において、最小のフォントサイズの推奨値というものは存在しない。ロービジョンのユーザーにとって、小さなフォントサイズが指定されたテキストを読むことは困難であるが、見やすさについて具体的な指標は掲げにくいため、あくまでフォントサイズをユーザーが拡大縮小できるかという点についての規定があるのみである²。

SEO観点

アクセシビリティ観点では最小フォントサイズの指標はなかった。ただ、SEOの観点ではフォントサイズに関してはGoogle（Chrome）のドキュメントに以下の記載がある。

書類で判読可能なフォントサイズが使用されていません

Lighthouse では、フォントサイズが小さすぎてモバイルで読みにくいページを報告します。

Lighthouse では、テキストの 40% 以上でフォントサイズが 12 ピクセルより小さいページが検出されます。

ページ上のテキストの少なくとも 60% で、フォントサイズが 12 ピクセル以上になるようにしましょう。
https://developer.chrome.com/docs/lighthouse/seo/font-size?hl=ja

検索エンジンは、ページがモバイルフレンドリーかどうかに基づいてページをランク付けする。12px未満のフォントサイズはモバイルデバイスで読みづらいことが多いため、その点でランクに影響する可能性がある。フォントサイズを改善することでモバイルフレンドリーに寄与するため、SEOにも影響があると考えられる。

まとめ

• Google Chrome 118 からfont-size: 10pxの指定が可能になった
• しかし、フォントサイズを10px以下に指定することは可読性が低下するため避けるべき
• アクセシビリティの観点では最小フォントサイズの指標はないが、SEOの観点で言えば12px以上の指定が推奨される

参考

• CSS に 4 つの新しい国際化機能を導入 | Blog | Chrome for Developers
• Font-size 12px doesn't have effect in Google Chrome