ブラウザのフォントサイズの最小は、いままで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版のWindowsのChrome、Sleipnir、MacのChromeにおいては下限が10pxとなっていますが、可読性を考えると10pxはそうそう使わないし、ましてや8pxとかなんて使ったことがないので、気にしなくてもいいのかなと。
あの小さいFacebookのいいねボタンですら11pxですし。
モバイルの場合は8pxでも読めなくはないので、レイアウトを気にするのであれば、アイコンあたりにはギリギリ使えるのかなと思います。
まとめ
思い込みはいけないですね。。。
