ブラウザごとの最小フォントサイズ一覧

こんにちは、ウェブラボクリエイターズメモです。

皆さんはブラウザによって､指定できる最小のフォントサイズがあるのをご存知でしょうか？

お恥ずかしながら今までどのブラウザも10pxだと思っていたのですが､
OSやブラウザごとで様々なんですね｡

たまにお客さんから、｢このエリアもっと小さくしてくれ～｣とお願いされることもあるのですが
フォントが制約になってできない！なんてこともあります。

そんなことで今回は各ブラウザごとの最小フォントサイズについてまとめてみました｡

検証方法・端末

検証方法

ブラウザ毎の最小フォントサイズは公表などされていません｡
12px～1pxまでのテキストを用意し､目視で比較しました。

ブラウザシェア率の調査

検証するブラウザを選定する上で、どのブラウザがシェア率が高いのか下記サービスを利用し調査しました。

Market Share Reports｜NetMarketShare

ニュースサイトにも良く引用されているほど有名なサービスです。
こちらにデータの収集方法についても明記されています。

【PC】用意した端末と検証したブラウザ

下記2つのOS端末を用意

・Windows10

・macOS High Sierra

PCでシェア率の高いブラウザ上位5種類は以下の通りです。
1.Google Chrome
2.Firefox
3.Internet Explorer
4.Edge
5.Safari

これらで全体のシェア率の90%以上を占めるため、この5種類で検証します。

【スマホ】用意した端末と検証したブラウザ

下記2つのOS端末を用意

・iOS13(iPhone7)

・Android7(Galaxy S6 edge)

スマホでシェア率の高いブラウザ上位2種類は以下の通りです。
1.Google Chrome
2.Safari

これらで全体のシェア率の90%以上を占めるため、この2種類で検証します。

結果

Google ChromeのPC版のみ9px以下のフォントが10pxに置き換わるという結果でした｡
意外にもその他は1pxまで表示できます｡
普通のモニターでは7pxあたりから潰れてよく見えませんが｡

まとめ

Google Chromeで10pxが最小だからその範囲でデザインする
というより､普通に読みにくいので最小10pxと決めてしまって正解なのかもしれません｡

余談ですが､フォントサイズは10pxにして､transform: scale(0.5);とかで
最小フォントサイズを突破できます｡読みにくいですが｡

以上､ウェブラボクリエイターズメモでした｡