【UIデザイン】モバイルアプリのフォントサイズはどうする？

こんにちは！
今回はアプリのUIデザインをする際に、モバイルアプリのフォントサイズはどうすれば良いかをまとめてみました。
トレースなどをすることである程度の基準とすべきフォントサイズが見えてきました。

基準にするフォントサイズは？

ここでの基準フォントサイズとは、読ませたい部分などアプリの中心となるフォントサイズのことを指します。
Webのフォントサイズは、ブラウザのデフォルト値が16pxであり、PCのフォントサイズ＞＝スマホのフォントサイズとあることから、モバイルアプリの基準フォントサイズの最大は16pxで良いかなと思います。
また、トレースをしてみたところ、最小は13pxで良いと感じました。
なので、基準にするフォントサイズは13px〜16pxに設定すれば、問題ないと思います。
実際にコンテンツを読ませるNewsPicksのアプリでは、トレースをした感じだと14pxにしています。
他のアプリも13pxか14pxが多かったので、この辺りが妥当かなと思います。

見出しで使用するフォントサイズは？

ページの見出し、各セクションの見出しでのフォントサイズはどれぐらいにすれば、良いのか？
この答えは16px〜24pxぐらいが適切かと思います。
基準とのジャンプ率を大きくしたい場合などで、基準サイズとの関係性はアプリによって違ってくるとは思いますが、24pxを最大と考えておけば問題ないと思います。（もちろん特別にもっと大きく見せたいなどある場合もあるので、その時は臨機応変に）

タブバーで使用するフォントサイズは？

タブバーとは、アプリ画面の下にあるバーのことを指します。
タブバーでは多くの場合、アイコンを使用しており、そこに補助的な役割としてテキストがあります。
このテキストの適切なサイズは10px or 11pxです。

実際にメルカリ、spotify、NewsPicksなどをトレースしてみると、10pxか11pxでした。
また、10pxの場合はフォントの太さが太く、11pxの場合は細く設定している場合が多いかなと感じました。

その他のフォントサイズは？

基準と見出し、タブバーのフォントサイズはわかったけど、その他のフォントサイズはどうすれば良いのか？
基本的に10px以上で基準サイズ以下を設定すれば、問題ないかと思います。
ここで大切なのは3点かなと思います。

• 10px以下にしないこと

• 太さを変えて表現すること

• 色を変えて表現すること

まず、10px以下にしないこと、これは大切でトレースをしてもわかる通り、10px 以下のフォントサイズはありませんでした。ですので、最小サイズは10pxだと思っておきましょう。（例外はあるかもしれませんが）

フォントの太さと色も大切なので、その調整も必要です。（今回はフォントサイズがメインなので、詳しくはまとめません。）

⭐️まとめ

今回はモバイルアプリのUIデザインを作成する時のフォントサイズについて、トレースなどをした経験を元にまとめてみました。

• 基準フォントサイズ：13px〜16px

• 見出しフォントサイズ：16px〜24px（もっと目立たせたい場合は24pxよりも大きくするべき）

• タブバーフォントサイズ：10px or 11px（10pxの場合はフォントを太く、11pxの場合はフォントを細く）

• その他フォントサイズ：10px〜基準サイズ以下

このような感じでフォントサイズを設定すれば、良いかなという結論に至りました。
今回も読んでいただき、ありがとうございました！
もっといい情報をまとめていけるように、実務と学習を頑張っていきます！