WEBTODESIGN

10px未満のフォントサイズを指定する

Chromeは10px未満のフォントサイズは、自動的に10pxにしてしまう!
もちろん可読性を上げるには10px以上がいいんですが、、、

たまにデザインで極小のアルファベットなどをコーディングで表現したい時があるんですよね。

transformを活用

フォントサイズは10pxに設定し、transformで縮小します!

例えば、8pxを表現したい場合は以下

font-size: 10px;
transform: scale(.8);
transform-origin: left;

transformのscaleで縮小します。
ポイントは「transform-origin: left;」。transform-originは変形の支点を設定できます。これを設定しないと、中央で縮小されてしまうので左揃えにならなくなります。