スマートフォンのフォントサイズも16px

ウェブサイトのフォントサイズですが、PC用のデザインだと16pxを基本にしている場合が多いです。しかし、スマートフォン用のデザインだと、14pxや15pxを基本にしている場合が多いです。

個人的にはスマートフォンも16pxが最適だと思っています。今回は、その理由を書きたいと思います。

ブラウザのデフォルトは16px

基本的なことですが、各ブラウザのデフォルトは、フォントサイズが16pxです。ウェブ制作を行うとき、フォントサイズを指定しないと、ブラウザのデフォルト設定である16pxが適用されます。

これはブラウザ側の設定なので、PCで見ようが、タブレットで見ようが、スマートフォンで見ようが、同じフォントサイズです。どの端末で見ても、ブラウザを利用してウェブサイトを見るので、同じフォントサイズになります。

よって、スマートフォンで見るときも、フォントサイズを指定しないと、ブラウザのデフォルト設定である16pxが適用されます。

iOSはフォントサイズが16px以下だと、一部挙動が変わります。

スマートフォンでウェブサイトを見るときに、独特の挙動があります。それはiPhone,iPadに使われているiOSでウェブサイトを見ると、独特の挙動が起こることです。

フォームの入力欄をクリックしたとき、フォントサイズが16pxより小さいと拡大表示されます。この現象はコーディングで拡大表示してるのではなく、iOSによって勝手に拡大表示されてしまいます。

要は文字が小さいから拡大して表示してあげますというiOSの仕様です。ということは、iOS（すなわちApple）が、16px以下のフォントサイズは小さいと判断しているのではないでしょうか？ちなみにフォントサイズを16px以上にすれば、この現象は起きません。

まとめ

まとめると、ブラウザはスマートフォンでも16pxがデフォルトであること、iOSは16px以下は小さいと判断していると思われることがあります。

以上の理由からスマートフォンのフォントサイズは、PCと同じく16pxが妥当だと思います。とくに理由がなければ、16pxで作るのが望ましいのではないでしょうか。

そうはいっても、日本語だとフォントサイズを小さくするとカッコよく見える、というのはあると思います。どうしても見た目に走ってしまうのは、分かるんですけどね。