フォントサイズ10px未満が表示されるようになっていた件について【CSS】

最近、フォントサイズの単位について少し調べものをしていた際、10px未満のフォントサイズが表示される事を知りました。どうやら、最近のブラウザでは制限無く表示されるようです。

フォントサイズ10px未満で表示してみた

少し前までは10px未満のサイズはtransform: scale(0.8);などで小さくするか画像にするしかなかったものですが、最近のブラウザ(Chromeではバージョン118、2023年10月アップデート以降)では5pxと指定しても普通に表示されます。

例として以下に10pxから5pxまで表示してみます。

<p class="font10">フォントサイズ10</p>
<p class="font9">フォントサイズ9</p>
<p class="font8">フォントサイズ8</p>
<p class="font7">フォントサイズ7</p>
<p class="font6">フォントサイズ6</p>
<p class="font5">フォントサイズ5</p>

.font10 {
    font-size: 10px;
}
.font9 {
    font-size: 9px;
}
.font8 {
    font-size: 8px;
}
.font7 {
    font-size: 7px;
}
.font6 {
    font-size: 6px;
}
.font5 {
    font-size: 5px;
}

上記のように10px未満でも表示されます。
小さく表示されない、全て同じく表示される方は、ブラウザのバージョンが古い為かと思われます。
こちらで確認できたのは、最新アップデート済のWindowsのChrome、Firefox、Edge、Macのsafari、Chrome、スマホiOSのsafari、chromeです。バージョンが古くない場合は概ね問題ないかと思われます。

実際に10px未満で文字を表示するのは、見難く、推奨されないサイズですので、使う機会は少ないかと思います。
もし使用する場合は、ブラウザのバージョンに気を付けて使ってみてください。

さいごに

いかがでしたでしょうか。
今期あのように、10px未満は表示できないという当たり前のルールだったものが変更になっていたりしますので、定期的に情報を調べてみるのも面白いと感じた一件でした。