こんにちは、kraftの岡田です。
Webデザインを考える際に問題となるのがフォントサイズ(文字の大きさ)だと思います。
経験が浅いと尚更この点に悩む方も多いのではないでしょうか。
今回は、適切なフォントサイズの目安説明と事例を交えた解説を行なっていきます。
ぜひ参考にしてみてください。

文字サイズの分類

今回考えていく項目は以下になります。

• 本文
• 見出し

この他にもボタン内の文字サイズ・メニューの文字サイズなど様々ありますが、本文・見出しのフォントサイズがサイト上でもメイン部分となりますので
今回はこの2つにフォーカスして考えていきます。

具体的な事例一覧

有名なプラットフォームを確認しながら一緒に見てみましょう。
今回見ていくプラットフォームは以下の通りです。

note

https://note.com/


Wanatedly

https://www.wantedly.com/projects


Brain

https://brain-market.com/

事例から見るフォントサイズ

note

パソコン版

• 見出し(h2)：28px
• 見出し(h3)：20px
• 本文：18px

スマートフォン版

• 見出し(h2)：20px
• 見出し(h3)：18px
• 本文：16px

Wantedly

パソコン版

• 見出し(h2)：28px
• 本文：15px

スマートフォン版

• 見出し(h2)：20px
• 本文：15px

Brain

パソコン版

• 見出し(h2)：24px
• 見出し(h3)：18px
• 本文：16px

スマートフォン版

• 見出し(h2)：24px
• 見出し(h3)：18px
• 本文：16px

事例から考えるフォントサイズの目安

例としてあげたものをまとめると以下のようになります。

パソコン版

• 見出し(h2) : 28px 〜 24px
• 見出し(h3)：20px 〜 18px
• 本文：18px 〜 15px

スマートフォン版

• 見出し(h2) : 24px 〜 20px
• 見出し(h3)：18px前後
• 本文：16px 〜 15px前後

1つ覚えておかなければいけないのが、日本語と英語とで同じフォントサイズでも若干違いが出てくる点です。
以下が24pxで表示した際の例です。


若干英語の方が小さく見えると思います。
体感として日本語と揃える場合は、約1.3倍のフォントサイズにすると良いでしょう。
例) 24px → 32px前後

注意点

今回紹介したフォントサイズは、参考として考えていくのが良いでしょう。
Webデザインを考える時には、制作するサイトの目的やターゲットなど様々な事を考慮する必要があります。
ある程度の基準を持っておき、そこから派生して最終的なフォントサイズを決定していきましょう。

まとめ

今回はフォントサイズについてを話していきました。
デザインによって、設定すべきサイズは異なりますが一般的な見やすいサイズは今回紹介したものを参考にしてみると良いでしょう。
最後まで読んでいただきありがとうございました。