Webサイトを作る際、「なんとなく読みにくい」と感じる原因のひとつがフォントサイズや行間の設定です。

フォント自体が良くても、サイズや余白のバランスが悪いと、ユーザーにとってストレスのあるページになってしまいます。

今回は、読みやすいWebデザインにするためのフォントサイズと行間の基本ルールについて解説します。

フォントサイズが重要な理由

フォントサイズは、ユーザーの読みやすさに直結する重要な要素です。

小さすぎると読みにくく、大きすぎると違和感が出るため、適切なバランスが求められます。

適切なフォントサイズの目安

本文のフォントサイズ

一般的に、本文のフォントサイズは16px前後が読みやすいとされています。

スマートフォンでも読みやすさを保つためには、16px〜18px程度がおすすめです。

見出しのフォントサイズ

見出しは本文よりも大きく設定し、情報の階層が分かるようにしましょう。

• h1：28px〜36px
• h2：24px〜28px
• h3：20px〜24px

行間（line-height）の基本

行間は、文字の読みやすさを大きく左右するポイントです。

行間が狭すぎると詰まった印象になり、広すぎると文章がバラバラに感じてしまいます。

読みやすい行間の目安

本文の場合は、1.6〜2.0程度の行間が読みやすいとされています。

特にスマホでは、少し広めに設定することで可読性が向上します。

スマホでの見え方に注意する

現在はスマートフォンでの閲覧が多いため、モバイルでの読みやすさは非常に重要です。

PCで問題なくても、スマホでは読みにくくなるケースがあるため、必ず確認しましょう。

よくあるNG例

文字が小さすぎる

ユーザーにとってストレスになり、離脱の原因になります。

行間が狭すぎる

文章が詰まって見え、読みづらくなります。

余白が少ない

全体的に圧迫感が出てしまい、見づらい印象になります。

まとめ

フォントサイズと行間は、Webサイトの読みやすさを大きく左右する重要な要素です。

適切なバランスを意識することで、ユーザーにとって快適なページを作ることができます。

デザインに迷った場合は、まずは基本の数値を参考に調整してみましょう。