5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ちっちゃくアウトプットAdvent Calendar 2023

Day 9

Chromeで最小フォントサイズが0pxになった

Posted at

これはなに?

Chrome118から最小フォントサイズの制限がなくなりました。

公式

相互運用性とアクセシビリティを向上させるため、7 つの言語(アラビア語、ペルシア語、日本語、韓国語、タイ語、簡体字、繁体字中国語)について、[最小フォントサイズ] のデフォルト設定をデフォルトでオフに変更します。変更前は、リストに記載されている 7 つの言語を除くすべての言語で、この設定がデフォルトでオフになっていました。この変更により、これらの言語と他の言語の整合性が保たれます。なお、これは最小フォントサイズ機能自体を変更することではありません。ユーザー補助と読みやすさの点で、変更されずにご利用いただけます。

他のブラウザの対応は?

もともとChromeだけが最小フォントサイズを10pxにしてきていました。

デモ

10px〜0pxのフォントサイズを組んでみました。
気になるブラウザで表示確認をしてみてください。

See the Pen small font-size by gilly135 (@gilly135) on CodePen.

影響は?

pxで絶対サイズを指定している場合は、そこまで懸念はないと思います。
emrem% などの相対サイズを指定している場合は、計算結果が10pxを切っている場合、そのまま反映されてしまいます。

これによるレイアウト崩れが発生する可能性はあります。

とはいえ読めるサイズで使うのが一番

いくら小さいフォントサイズが使えるからといって、読めなければ情報を届けたことにはならないと思います。
人が読めるフォントサイズで文字組みしていきたいところです。

推奨フォントサイズ

どんなフォントサイズが良いのか迷う場合、Human Interface GuidelinesとMaterial Designが参考になると思います。

AppleのHuman Interface Guidelines Large(Default)のフォントサイズだと、Caption 2 の 11pxが最小サイズです。
本文は17pxです。

GoogleのMaterial Designでも、一番小さいフォントサイズは OVERLINE の10pxです。
本文は16pxです。


この記事が誰かのお役に立てると幸いです。

参考

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?