これはなに?
Chrome118から最小フォントサイズの制限がなくなりました。
公式
相互運用性とアクセシビリティを向上させるため、7 つの言語(アラビア語、ペルシア語、日本語、韓国語、タイ語、簡体字、繁体字中国語)について、[最小フォントサイズ] のデフォルト設定をデフォルトでオフに変更します。変更前は、リストに記載されている 7 つの言語を除くすべての言語で、この設定がデフォルトでオフになっていました。この変更により、これらの言語と他の言語の整合性が保たれます。なお、これは最小フォントサイズ機能自体を変更することではありません。ユーザー補助と読みやすさの点で、変更されずにご利用いただけます。
他のブラウザの対応は?
もともとChromeだけが最小フォントサイズを10pxにしてきていました。
デモ
10px〜0pxのフォントサイズを組んでみました。
気になるブラウザで表示確認をしてみてください。
See the Pen small font-size by gilly135 (@gilly135) on CodePen.
影響は?
pxで絶対サイズを指定している場合は、そこまで懸念はないと思います。
em
や rem
、 %
などの相対サイズを指定している場合は、計算結果が10pxを切っている場合、そのまま反映されてしまいます。
これによるレイアウト崩れが発生する可能性はあります。
とはいえ読めるサイズで使うのが一番
いくら小さいフォントサイズが使えるからといって、読めなければ情報を届けたことにはならないと思います。
人が読めるフォントサイズで文字組みしていきたいところです。
推奨フォントサイズ
どんなフォントサイズが良いのか迷う場合、Human Interface GuidelinesとMaterial Designが参考になると思います。
AppleのHuman Interface Guidelines Large(Default)のフォントサイズだと、Caption 2
の 11pxが最小サイズです。
本文は17pxです。
GoogleのMaterial Designでも、一番小さいフォントサイズは OVERLINE
の10pxです。
本文は16pxです。
この記事が誰かのお役に立てると幸いです。