ウェブの行間って何なの？line-heightを数値的に考察してみた。

どこを見てもあまりピンとこない行間についてすこしでも考えて決められるようにline-heightについて考えてみた

デザイナーとして2年目になった宮田です。

最近はバナーデザインばかりでwebデザインはほとんどできていないですが、デザインするときには必ず可読性を意識して行間などは決めています。

正直行間設定どうしてるって言われて、コーディングを自分ですべてやっていないのでわからない。

行間ってそもそもどういったもの？
行間は行と行の間隔の幅こと
行間を読めと言われたら何センチか教えてあげれば喜ばれるかもしれない。

ウェブデザインにおいてはpxやemのような単位を付けて設定するより、倍率や比率で設定するほうが都合がいい。
今回は比率で考えていく。

”font-size”：”line-height”
＝ 16px：25.6px
＝1：1.6
よってline-height＝1.6

のような具合だ。（どんな具合だ？）


別にそこまで書くことないんじゃないかなって思ったんですが、思いのほか情報が多かったので最初にまとめます。

まとめ
・英語と日本語の差はline-height:0.2以上
・日本語のデフォルトフォントの違いでも若干差が出る

1.日本語と英語における行間の違い

日本語と英語では行間を決める上での基準が全く違います。
同じデザイン、同じ行間で日本語と英語でどう見えるのか比べると一目瞭然です。

英語の行間 line-hegiht:1.4~1.8
日本語の行間　line-height:1.6~2.0;

最近は英語圏もだいぶ行間が広くなってきているようですが、それでも日本との行間には差があります。
別に日本語が主体なんだから1.6~2.0に設定をすればいいじゃん。
わざわざ説明なんているの？なんて思う人もいるかも。。
実際そうかもしれないですが、自分で決めた数値に理由があってこそのデザイン。数値について理解しておけば、どんな場面にも対応した数値を決めることができます。

では、行間が日英で違うのはわかりましたが、具体的になぜ違いが存在して何を基準に設定し直せばいいのかについて考えていきます。

以下の図は勉強してたらいつか見る文字の高さやらなんかの説明です。（詳しくは省く）
これを見たらわかる通り、英語というのは、xの高さが基準(x-height)になっているんです。他の部分は部分的にはみ出しているけれど、基本的にはx-heightを基準にline-hegiht:1.45;以上を行間としています。

x-height基準と字面では大分差があります。英語と日本語を並べたら一目瞭然

さて、一旦結論です。

アルファベットとひらがなで同じフォントサイズにしたとしても、一文字が持つ余白が大きく異なります。ひらがなは基本的に余白が少なく、高さが均一なので、英語に合わせた行間にしてしまうと文字が詰まった印象になってしまうんです。

だから、英語圏と日本語圏では行間の設定が異なるわけです。

ひらがなの方が大きいとして、次は行間はどう変わるのか？
細かく比較して、適切な行間がどの程度となるのか確認します。

方法は、x-heightとひらがなの行間が一致するときのline-heightの差を見ていきます。

図を見てわかるようにheight:1.6;に設定した場合も、line-height:1.8;に設定した場合も、倍率の差は0.2あるとわかりました。
もし、何か海外のサイトデザインを参考にするときには行間の差が0.2あることを意識しておけば、
デザインの雰囲気を崩すことなく再現できるはずです。

2.日本語フォントの字面の違い

日本語フォントでも字面が違えば行間を変える必要が出てきます。
今、ほとんどのウェブサイトに使われているフォントは以下のものです。

それぞれのフォントを比較してみると少しではありますが、隙間に差が出ています。
漢字はほぼそろっていますがひらがなとカタカナの違いが顕著にでています。
ぶっちゃけこの程度と思うかもしれませんが、知ってやらないのと知らないでやらないでは印象くらいは違うかもしれない。

ウェブフォントを指定していない場合これらのどれかになるので1.6～2.0に収まってればいいやではなく、どこを基準にすれば印象を変えないかも考えてみるのもいいんじゃないでしょうか。

もう一度まとめ
・英語と日本語のline-height差は0.2ほど
・日本語のデフォルトフォントの違いでも若干差が出る

徹底的に決めるならをコンセプトに行間を考察してみました。
正直なところ、自分で決めるときここまで考えていたら面倒くさそうだなって思いました。

黄金比なんて数値的な法則があるんですから、もっといろんなことに数値的な関連性を見出してみるのはどうでしょうか？