どうも、チャーさんです。
あなたはcssのスマホのフォントサイズを、
どれぐらいにすればいいか、
と疑問に思っていませんか?
この記事では、迷ったらこのフォントサイズにすれば、
スマホサイズでは収まりがいいサイズを、
書いています。
なのでスマホの時にcssでフォントサイズを、
いくつにすればいいか興味がある人は、
このまま下にスクロールして読んでみてください。
スポンサードサーチ
スマホ時のフォントサイズはこれぐらいで
で、結論から言って、
スマホ時のフォントサイズですが、
16pxぐらいが収まりがききやすいです。
というのも、
実際にフォントサイズを変えて、
テキストをみてみると、
割と16pxあたりが、
収まりがいいからです。
フォントサイズを比較してみる
これは比較の具体例になりますが、
フォントサイズを変えて、
それぞれのテキストサイズで画像を並べてみます。
こちらは14px
こちらは16px
こちらは18px
さすがに18pxまでくると、
スマホサイズには大きい感じですね。
(見出しに使う分には良いと思います)
と、それぞれスマホサイズでテキストのフォントサイズを
変えて、上記の画像のように比較してみましたが、
おそらく一般的な感覚だと、
16pxあたりが一番
収まりがきくサイズでしょう。
(人によっては14pxもありでしょう)
ということで、cssのスマホのフォントサイズは、
特に目的がなかったり、迷ったら、
16pxでやっておけば良いんじゃないですかね。
するとデザインの見た目的に収まりが良いです。
とはいえ、あなた自身がサイトを運営していて
自由にフォントサイズを決めれるなら、
あなたがいいなと思うサイズにしてもいいかもしれません。
そうすれば精神的に楽しいですからね。
フォントサイズをブラウザをみながら確認したい場合
で、ついでですが、あなたが実際にスマホサイズでの、
フォントサイズを試してみたい場合は、
デベロッパーツールを使いましょう。
デベロッパーツールを使って、
スマホサイズに画面を縮小して、
その上でフォントサイズをブラウザ上で変更しましょう。
(デベロッパーツールではブラウザ上で、
フォントサイズを変更できて、それが即座に、
テキストのサイズに反映されます。)
なのでその機能を使って、実際にあなたの目で、
みながら良い感じのフォントサイズを探すのも、
手ですね。
ちなみにデベロッパーツールで、
スマホサイズにする方法がわからない場合は、
こちらの記事にやり方書いてるのでどうぞ。
スポンサードサーチ
まとめ
ということで、まとめに入ります。
cssでスマホサイズの時のフォントサイズは、
いくらがいいだろう?ですが、
16pxがいいかなと思います。
また、自分で探る場合は、
デベロッパーツールでどうぞ。
ということで、スマホサイズのフォントサイズに
ついてでした。
それでは、読んでもらってありがとうございました。
チャーさん