font-sizeの最小値を限界突破する小技

どうしてもfont-sizeを10px未満にしたい

Google chromeではfont-sizeを10px未満に指定しても必ず10pxで表示されます。

この値より小さいと可読性が悪くなるからやめとけよ、というchromeからのメッセージでもあるわけですが、とはいえ、Galaxy fold (Width280px)　用のレスポンシブデザインを作っている時など、どうしても9pxや8pxを使いたい！というときがあると思います。そんな時にfont-size:10px;の制限を突破できる小技があります。

transform: scale();でブロックごと縮小させる

　 font-sizeを10pxに指定して、そのテキストブロックをtransformで縮小させると10pxより小さくできます。

transform: scale(0.9);なら9px、transform: scale(0.8);なら8pxになります。

表示はこんな感じ

See the Pen under10px(Qiita embed) by toshihide (@toshihide2000) on CodePen.

PCからだと読めたもんじゃないですね。

基本的に10px未満はユーザビリティを下げるので使い所はよく検討したほうがいいでしょう。