読者です 読者をやめる 読者になる 読者になる

SuprSonicJetBoy's blog

いろいろです。

ブラウザ毎の最小フォントサイズを調べた

ブラウザのフォントサイズの最小は、いままで10pxだと思っていたけど、実は1pxでも表示できていました。
この際なので、自前のデバイスで確認できるだけ確認してみました。

書体は特に指定しておらず、ブラウザのデフォルトでの検証です。
単位は、px。

検証

ブラウザ OS バージョン 最小サイズ
Chrome Windows10 58.0.3029.96 (64-bit) 10px
Chrome macOS Sierra 58.0.3029.96 (64-bit) 10px
Chrome iOS10 58.0.3029.83 1px
Chrome Android5.1 58.0.3029.83 1px
FireFox Windows10 53.0.2 (64 ビット) 1px
FireFox macOS Sierra 53.0.2 (64 ビット) 1px
FireFox iOS10 7.4 1px
FireFox Android5.1 53.0.2 1px
Sleipnir Windows10 6.2.4.4000 10px
Sleipnir macOS Sierra 4.5.7015 1px
Sleipnir iOS10 4.3.4 1px
Sleipnir Android5.1 3.5.5 1px
Safari macOS Sierra 10.1 1px
Safari iOS10 (iOS10.3.1) 1px
Edge Windows10 38.14393.1066.0 1px
IE11 Windows10 11.1066.14393.0 1px

(2017/05/08 現在)

結果

最小値はブラウザ毎に異なっているとの認識はあったのですが、2017年にもなってそれが全ブラウザ10pxだと思い込んでいました。
普段使いのChromeのフォントの最小サイズが10pxだったので、いつの間にかに10pxだと刷り込まれていたようです。。。

現在でも、PC版のWindowsChromeSleipnirMacChromeにおいては下限が10pxとなっていますが、可読性を考えると10pxはそうそう使わないし、ましてや8pxとかなんて使ったことがないので、気にしなくてもいいのかなと。
あの小さいFacebookのいいねボタンですら11pxですし。

モバイルの場合は8pxでも読めなくはないので、レイアウトを気にするのであれば、アイコンあたりにはギリギリ使えるのかなと思います。

まとめ

思い込みはいけないですね。。。