適切な見出しの余白サイズを探る

つみきのデザイナー若月です。フォントの話 第11話。
今回は見出しと本文の間の余白サイズについて。

Webデザインをしているとキリが良い数字、 例えば5や10の倍数などで余白を設定した経験がある人は多いのではと思います。
割とそこには根拠があまり無くなんとなく決めてしまった人も居ると思います。
そこで、他サイトの余白の空きを調査して、何かルールがあるか調べてみました。

※今回はPCサイトに絞って調査しています。


いくつか有名サイトを見てみます。

調査項目は

  • 見出しのフォントサイズ
  • 見出し下の余白のサイズ
  • 余白÷見出しの比率(※比率は小数点第2位以下を四捨五入)

Apple

【A】【B】
見出し52px32px
余白52px32px
比率1.01.0

Google+

【A】【B】
見出し30px16px
余白20px20px
比率0.671.25

Google

見出し18px
余白12px
比率0.67

無印良品

見出し28px
余白41px
比率1.46

FONTWORKS

見出し37px
余白24px
比率0.65

ADOBE

見出し30px
余白35px
比率1.17

Line

見出し54px
余白42px
比率0.78

Microsoft

【A】【B】
見出し44px24px
余白44px14px
比率1.00.58

Roland

見出し45px
余白38px
比率0.84

GEORGIA

見出し48px
余白30px
比率0.63

調査結果『比率:0.63~0.67』が多かった

今回の調査では表題の比率が多かったようです。
ですが、所感としてはサイズはあまり統一性が感じられないというのが印象でした。
また、見出しのサイズに応じて余白を変更するサイトが多かったですが、
画一的にピクセル数を指定をしているところもありました。

デザインのトンマナによってゆったりと見せたい時は余白を広めにとるなど、
意図的に余白を広げたりすることもあるので正解を出すのは難しいですが、
大事なのはルールをきちんと作れているかという所かなと思います。
例えばAppleであれば見出しとその直下の余白は見出しのフォントサイズと同一にしています。
ルールや意味づけをどれだけ出来るかが、余白を決める時も大事だなと感じました!

スマホアプリ制作、Web制作、UIコンサルなどのご依頼はこちら

お問い合わせ