フォントサイズと行間(line-height)の関係性


こんにちは。櫻井です。
前回はフォントサイズに使う単位について考えましたが今回は本文のフォントサイズとline-heightの値に関係性があるのかどうかを調べて行きたいと思います。

実験方法

今回扱うデータはジャンプ率について調べた時に見たサイトと同じサイトからPCとスマートフォンのline-heightの値を一箇所抜粋して扱って行きます。
ジャンプ率同様カテゴリによって値の関係性に差があるとは思いますが今回はあくまでカテゴリに関係なく関係性があるのかどうかを探って行きます。
同時にスマートフォンでline-heightの値がどう変化するかも調べていこうと思います。
まずはPCのフォントサイズとline-heightの関係性について見て行きましょう。

イメージ

やっぱり表だとわかりずらいのでグラフにしていきます。
今回は関係性をわかりやすくするため散布図にしていきましょう。

イメージ

かなり広域に点が散りばめられているようにも見えますが若干右肩下がりになっているようにも見えなくはありません。
少し詳しく見ていきましょう。

関係性があるのかないのかわかりづらいので相関係数を見ていきます。
相関係数は関係性がどれくらいあるかを示す値でその値は必ず-1から1までの間になり、関係性がないときは0になります。
値がマイナスだ右肩下がりに、値がプラスだと右肩上がりの散布図になります。
詳しい計算式は省きますが相関係数は-0.3でした。これはやや相関関係があることを表しています。
つまり、フォントサイズが大きいと行間は狭くなりがちで、フォントサイズが小さいと行間は広くなりがちということです。

次にスマホだとどうなるかも見ていきましょう。

イメージ

こちらも散布図にしていきましょう。

イメージ

スマホの方がわかりやすく右肩下がりになっていますね。
スマホの場合は相関係数が-0.5でした。
PCと比べても相関関係が強いと言えます。

これでフォントサイズと行間は相関関係にあり、フォントサイズが大きくなると行間は狭くなりがちで、逆に小さくなると行間は広くなりがちな傾向があり、スマホではさらにその傾向が強くなることがわかりました。
最後にPC表示でのline-heightがスマホに変わった時にどのように変わるのか見ていきましょう。
おそらくスマホで相関関係が強くなっていることからline-heightの値も少し下がっているのではないかと思います。

イメージ

ほとんど値は一緒で変わったとしても値が大きくなるものは見当たらないですね。
こちらも散布図にしていきましょう。

イメージ

散布図にすると傾向や関係性が見やすくていいですね。
大体のサイトがpcと同じか少しだけ下げていることが見て取れると思います。

まとめ

今回はフォントサイズと行間(line-height)についてとline-heightがスマホでどう値が変化するのか見ていきました。
上でも少しまとめましたがフォントサイズと行間は相関関係にあり、フォントサイズが大きくなると行間は狭くなりがちで、逆に小さくなると行間は広くなりがちな傾向があり、スマホではline-heightの値が大きくなることはなくほとんどが同じ、または小さくなる傾向があり、フォントサイズとline-heightの関係はPCの時よりもかなり強い相関関係にあることがわかりました。

とはいえ、ジャンプ率を調べた時にも言いましたが今回用意したデータは20サイトだけです。 100サイト分のデータを用意すれば多少違った結果になるかもしれませんし、カテゴリーによっては違う結果を示すかもしれません。 あくまで今回の結果は参考程度だと思っていただけると幸いです。

Scroll to top