Chrome(PC環境)で10px未満の文字を表示する

Chromeの最小文字サイズがデフォルト設定では10pxとなっているため、多くの場合それ未満の文字サイズを指定しても10pxになってしまう。
10px未満の文字サイズを表現したいときは、transformのscaleで要素のサイズを縮小することで表現することが出来る。
とはいえ、Googleも12px未満のフォントサイズは非推奨としており、そもそも小さい文字は見づらい＆読みづらいもの。
可能な限りこのような文字サイズ調整は避けたい。

transform:scale(x);を使う

p {
  font-size: 10px;
  transform: scale(0.8);
  transform-origin: left;
}

上のコードを使うことで、pタグで囲われている文字は 10px　* 0.8 = 8pxで表現される。
が、transform-originの初期値はcenterなので、意図しない位置に表示された場合はこちらを調整する必要がある。

Chrome(PC)の最小フォントの設定の場所は？

設定> デザイン > フォントをカスタマイズ の中にある。（2022-07-24時点）
ブラウザを使う人がここで最小フォントサイズの設定を調整することで10px未満の文字をPC版でも表示させることができる。

おまけ：10px未満の文字サイズを指定した場合、スマートフォンでの表示はどうなっている？

10px未満の文字サイズを指定した場合、スマートフォンでは問題なく指定したフォントサイズで文字が表示されている。(iPhone SE2 Chromeで確認、Safariでも同様)

実際に確認する際は下記のCodePenをスマートフォンで閲覧してみてください。

参考

• よくある誤り | 検索セントラル | Google Developers
  https://developers.google.com/search/mobile-sites/mobile-seo/common-mistakes?hl=ja#small-font-size
• 各ブラウザの最小フォントサイズ
  https://shanabrian.com/web/html-css-js-technics/css-minimum-font-size-for-browser.php
• scale()
  https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/scale()
• transform-origin
  https://developer.mozilla.org/ja/docs/Web/CSS/transform-origin