見やすいサイトづくりのための文章レイアウト ー 行間編 ー

Webサイトで行の高さといえば、CSSのline-heightで指定するアレのことですが、今回はその行の高さのおはなしです。
行の高さ1つで文章の可読性はもちろんのこと、サイトの雰囲気も変わってきます。
お客さんから「文字が見づらい」と言われた場合、まず考えてしまうのはフォントサイズかもしれませんが、行の高さの調整で解決することもあります。

タイトルで「行間」と書きましたが本当は「行の高さ（line-height）」です。行間の方がピンとくるかなと思って。すみません…。諸事情により「行間」と書いているところもありますが、お目こぼしください…。

目次

• 見やすい行間は？
• 行長によってふさわしい行間の数値も変化する
• 見出しの場合はその限りではない
• 「行間」「行の高さ（line-height）」「行送り」の違い

見やすい行間は？

WCAG 2.0では

行の高さが文字サイズの1.5～2倍程度あると、前の行を読み終えて次の行へより簡単に読み進めていけるようになる。

とされています。
以前読んだDTP系の本にも同じようなことが書いてあったような記憶がうっすらあります。
フォントの種類にもよると思いますが、文字サイズの1.5倍（line-height: 1.5;）ってこんな感じです。

1行の長さに対して行間が少し狭い印象です。

文字サイズの2倍（line-height: 2;）にしてみるとこんな感じです。

1.5倍の時と印象が変わりましたね。私は1カラムのレイアウトではこの設定にしています。

行長によってふさわしい行間の数値も変化する

行長というと少しピンとこないかもしれませんが、テキストボックスの幅と言いかえるとわかりやすいでしょうか。
行長が長いときはline-heightを広めに、行長が短いときはline-heightを狭めに設定します。

２カラムになった場合

line-height: 2;の場合

line-height: 1.5;の場合

どちらも許容範囲のような気がしますが、line-height: 2;だと少し行間の空きが気になります。

3カラムになった場合

line-height: 2;の場合

line-height: 1.5;の場合

line-height: 1.4;の場合
0.1の差ですが、このくらいがちょうどよいかなと思っています。

行間のとりかたで印象が変わる

line-height: 2;は行長に対して行間が広すぎるので、1カタマリ感が薄れてしまい、かえって読みづらくなってしまっています。
行長が短い場合は視線の移動が少ないので、行間が狭くても次に読む段を間違えにくいのです。

可読性の問題以外にも、サイトの目指す雰囲気やテーマによってもline-heightを調整します。
行長とも関連してくるのですが、行間を詰めると硬い印象、広めにとると柔らかい印象になるかと思います。

私の設定はこんな感じ

この記事を書いている時点では、本文16pt、PC用はline-height: 2;、モバイル用はline-height: 1.8;と設定することがほとんどです。
PC用は50％ずつの2カラムだったらline-height: 1.8〜1.6;、3カラム・4カラムの時はline-height: 1.4;としています。

状況やサイトの目的によって様々なので具体的な数値を挙げてもあまり意味がないかと思いますが、私はこんな感じでやっています。

今回はWebサイトでの文字の扱いなので横書きを前提としていますが、縦書きの場合やDTPの場合も基本的な考え方は同じです。

「行間」「行の高さ（line-height）」「行送り」の違い

行間・行の高さと言っててきましたが、簡単に説明するとこんな感じです。

行間

文字の下から次の行の文字の上までの字と字の間。

行送り

文字のサイズ+行間のこと。
Webではあまり聞かないと思いますが、Illustratorでは行送りを使っています。どこを基準にするかはざっくり分けて文字の上か中央（イラレのデフォルトは中央）か下かを選択できます。画像では中央を基準としています。

line-height（行の高さ）

line-heightからfont-sizeを引いて2で割った数値を文字の上下に足したもの。

見出しの場合はその限りではない

今までは本文の話をしてきましたが、見出し（hタグ）は少し狭めに設定しています。
フォントサイズも本文より大きいし、本文のように5行も６行も見出しが続くことはまずないと思います。
そのため私の場合、見出し要素に対してはline-height: 1.4〜1.6と指定することが多いです。

1つのサイト内に複数のline-heightの設定があってはいけないことはありません。要素に応じて読みやすい行間を設定するのがよいと思います。