行間

定義

行間(line height)とは、ある行の文字と、その下の行の文字とのあいだにできる 縦方向のすきまのことです。ふつうは文字サイズに対する倍率で表し、1.5なら文字 サイズの1.5倍だけ行の間隔をとる、という意味になります。正確には文字そのものの 高さまで含んだ値なので、文字の上下に振り分けられて付く余白だとイメージすると 分かりやすいでしょう。この値が狭すぎると行同士がくっついて、息苦しくぎゅうぎゅう に見えます。逆に広すぎると、同じ段落なのに行がばらばらに離れて、ひとつのまとまり として読めなくなります。つまり行間は、複数行の文章をどれだけ楽に読み進められるか を左右する値なのです。

なぜ重要か

人が長い文章を読むとき、目は一行を読み終えると、次の行の始まりへ正確に戻って こなければなりません。行間が適切ならこの移動はなめらかにつながりますが、狭すぎ ると目が上下の行を取り違え、同じ行をもう一度読んだり、行を飛ばしたりしてしまい ます。逆に広すぎると行と行のすきまが開き、段落がばらけて見えて、どこまでがひと まとまりなのか感覚がつかめなくなります。ほどよい行間は、文章に呼吸できる余裕を 与えつつ、ひとつの段落をひとつの塊としてまとめてくれます。とくに本文のように 長く読ませる文章では、行間ひとつを整えるだけで体感の読みやすさが目に見えて上がり、 ユーザーが最後まで読み切ってくれる確率も高まります。画面に載る文章が多いほど この効果は大きくなるので、長文を扱うページなら、行間はまっさきに見直したい値だと 考えておくとよいでしょう。

よくある間違い

• 本文と見出しに同じ行間をそのまま使ってしまうことです。何行にもわたる本文に 合わせたゆったりした行間を、一〜二行だけの大きな見出しにそのまま当てると、 見出しの行が開きすぎて浮いて見え、見出しとしてのまとまりが弱くなります。
• 一行がとても長いのに行間を狭いままにしてしまうことです。行が長いほど次の行を 見つけにくくなりますが、そこに狭い行間まで重なると、目がしょっちゅう行を見失い、 一気に読みづらくなります。
• 行間を広げようとして、段落と段落のあいだに空行をいくつも入れてしまうことです。 行同士の間隔は行間で、段落と段落の間隔は別の余白で調整してこそ、構造がすっきり と保たれます。

実務のヒント

• 本文はだいたい1.5〜1.7のあいだが読みやすく、見出しはそれより狭く1.1〜1.3くらいで とりましょう。大きな文字はそれ自体で存在感が強いため、行間を詰めたほうがひとつの 塊としてまとまって見えます。
• 一行が長いときは、行間を少しだけゆったりめにとりましょう。行の長さと行間はいっしょ に動く値なので、広い画面で本文が長くなるときは行間も小幅に上げてやると、ぐっと 読みやすくなります。
• 行間は固定のpxよりも、倍率(単位なしの値)で指定しましょう。文字サイズが変わっても 比率が保たれるので、大きい文字にも小さい文字にもバランスのとれた間隔が自動で合い、 サイズを変えるたびに行間を手直しする必要がなくなります。

関連概念