フォントジャンプ率のセオリーを考える
つみきのデザイナー若月です。フォントの話 第6話。
今回はフォントのジャンプ率について。
デザインをしていると、本文と見出しのサイズ感が決まらず、
地道に1px増やしたり減らしたりして気持ちいいバランスを探ることがあります。
結構時間がかかるし、もう少しテンプレ化してもいいんじゃないかなと感じ
本文と見出しのジャンプ率の差ってどのくらいが適切なのか？
セオリーはあるのか？調べてみました。
ちなみにフォントのジャンプ率とは？
本文の文字サイズに対する見出しの文字サイズの比率のことを言います。
一般的にジャンプ率の差が大きいと躍動的、若年向けといった印象に、
小さいと落ち着いた、高級、大人っぽい印象になります。
僕の場合
先日弊社よりリリースしたiPhoneアプリ「RIZM」のスクリーンショット。
実際は下記のフォントサイズで作成をしています。
【大】見出し：120px
【中】見出し：72px
【小】本文：48px
比率は「1:1.5:2.5」になっています。
今まで作成した他のデザインを見ると、
おおよそ「1：1.5～1.7：2.2～2.5」くらいのバランスで作成しています。
有名Webサイトの場合
いくつか有名サイトを見てみます。 （※比率は小数点第2位以下を四捨五入）
Apple
【大】見出し：76px
【中】見出し：34px
【小】本文：16px
比率は「1:2.1:4.8」になっています。
無印良品
【大】見出し：48px
【中】見出し：32px
【小】本文：16px
比率は「1:2:3」になっています。
NIKE
【大】見出し：50px
【中】見出し：22px
【小】本文：12px
比率は「1:1.8:4.1」になっています。
ポカリスエット
【大】見出し：50px
【中】見出し：22px
【小】本文：12px
比率は「1:1.8:4.1」になっています。
ZOFF
【大】見出し：58px
【中】見出し：22px
【小】本文：14px
比率は「1:1.6:4.1」になっています。
au
【大】見出し：21px
【中】見出し：14px
【小】本文：12px
比率は「1:1.2:1.8」になっています。
早稲田大学
【大】見出し：40px
【中】見出し：30px
【小】本文：15px
比率は「1:2:2.7」になっています。
【参考リンク】新聞や雑誌の場合
「新聞・雑誌は3～5倍！『ジャンプ率』を意識して見やすいWebサイトをデザインしよう」
紙媒体の歴史に裏づけされた文字感覚は検討する価値はがありますね。
検証のサンプルがまだまだ少ないので、セオリーとはいきませんが、
Nikeとポカリスエットが同じなど、なかなか面白い結果になりました。
特に大見出しのサイズ感は、どのサイトもかなり大きいなという印象。
今のところ「1：1.8：3.5」が平均。
もう少し検証を続けて、セオリーを作れればと思います！