モダンなwebメディアに学ぶ読みやすい文字のジャンプ率

以前に文字のジャンプ率の記事を書きました。
こちらの記事はメインビジュアルなどを参考に、情緒的に見せたい場合についてのまとめだったため、本文など読みやすさの優先度が上がる場面でのジャンプ率を考えていきたいと思います。

そこで、本記事は主にモダンなメディアサイトの文字比率を見ながら、その傾向について分析していきたいと思います。

参考データ

まずはじめに、今回リサーチしたサイトと、そのサイトの文字比率を以下にまとめています。
いずれもp（本文サイズ）を基準にした場合の比率です。

※いくつかの記事を見て確認できなかったパーツは空欄にしています。
※ブラウザ幅1440pxの時の比重です。ブラウザ幅によって異なる文字比率になる設計になっている場合があります。

ちなみに、上記の表だと本文サイズが分かりづらいと思うので、本文サイズだけまとめたものが以下の表です。

こちらの情報から気づいたことを以下にピックアップしていきます。

本文サイズは14〜18px

今回リサーチした全てのサイトが本文サイズは14〜18pxの範囲に収まっていました。

特に多かったのは16pxで、品や高級感のある印象を与えたい場合は14〜15px、広いターゲットに訴求したい場合や明るい印象を与えたい場合は17〜18pxに設定している場合が多いように感じます。

見出しサイズ（h2）は本文の1.5〜2倍

本文中に入る見出しは本文の1.5〜2倍のサイズになっていることが多かったです。
なお、ある程度の傾向は見られたものの見出しと本文を比較した時に綺麗な倍率になっているケースは少なかったので、ある程度の目安は持ちつつも数字に捉われず最後は感覚値で心地よいバランスを探るのがよいバランスを生む秘訣かもしれません。

記事タイトル（h1）は本文の2倍以上に

記事タイトルは本文の2〜3倍の範囲になっていることが多かったです。
傾向としてはh2（見出しサイズ）より大きいが、h2の1.5倍以内には収まっているケースが多いように感じます。

また、落ち着いた印象を与えたい場合などはあえてh1とh2をほぼ同じ文字サイズにしているケースもありました。

サブ要素は本文の80〜90%に。

ここでいうサブ要素とは、網掛け/引用文や画像のキャプション、注釈などを指します。
これらの要素は、本文を補足する役割になるため、本文より少しだけ小さくすることが一般的でした。

まとめ

いかがだったでしょうか？
心地よい文字バランスは最終的には感覚で整える必要がありそうですが、一方である程度の傾向は見える結果だったかと思います。

ちなみに、今回はPC時を参考にご紹介しましたが、スマホでは若干見出しのジャンプ率がPCよりも小さくなる傾向などもありそうなので、環境に応じたバランスを考えていくのも大切そうです。

こういった内容を、メディアサイトやブログを作る時だったり、そうでなくても下層ページなどの文字設計を考える時にも参考にしていければと思います。