このページはAIの支援を受けて翻訳されました。正文は英語の原文です。
テキストの行と行のあいだの空間 — 印刷ではレディング(行送り)、CSS では line-height — は、画面上のタイポグラフィにおいて最も影響の大きい設定のひとつです。その役割はナビゲーションにあります。行間に十分な余白があれば、目は一行を読み終え、左マージンへの長い戻りの動き(リターンスイープ)を実行し、同じ行を読み直したり先の行に飛んでしまったりすることなく、正しい次の行に着地できます。2005年版はフォントサイズの約140%を推奨し、100〜120%というブラウザのデフォルトは、特にロービジョンの読者にとって狭すぎると指摘していました。この推奨は時を経てもよく持ちこたえています。むしろ、実践と標準はそこからわずかに先へ進みました。
2005年以降に変わったこと
約1.4というもとの数値は時代を先取りしたものでしたが、いまでは主流の実践のなかで保守的な側に位置します。2026年の丁寧に組まれたサイトの本文はおおむね1.4〜1.6のあいだで設定されており、アクセシビリティ上の下限も正式化されました。WCAG の達成基準 1.4.12 テキストの間隔(レベル AA)は、ユーザーがフォントサイズの1.5倍の行間を適用しても、コンテンツや機能が失われないことを要求します。さらに古い 1.4.8 視覚的提示(レベル AAA)は、段落内の行間を最低でも1.5とすることを端的に求めています。実務的に読み解けば、1.5 は努力目標ではなく、レイアウトが最低限許容しなければならない値であり — そしてほとんどの本文設定にとって、単純に良いデフォルトです。
2つ目の変化は、行間の指定方法です。2005年、デザイナーは行送りをピクセルやパーセントで設定していました。現代の CSS の実践は明確です。単位なしの値を使うこと(24px や 150% ではなく line-height: 1.5)。この違いが重要なのは継承のためです。単位なしの値は比率として継承され、各要素自身のフォントサイズに対して再計算されます。ピクセルやパーセントの値は一度だけ計算され、固定の長さとして継承されます。ページの body に line-height: 24px を設定すると、その中の 32px の見出しは行が重なって表示されます。単位なしの line-height はカスケード全体を正しくスケールさせます — これはユーザーがテキストを拡大したときにレイアウトが崩れない理由でもあります。
3つ目に、レイアウトそのものが変わりました。高さ固定のテキストコンテナは2005年には一般的でしたが、1.4.12 の要件の主な犠牲者です。line-height 1.3 でちょうど3行分に高さを合わせたボックスは、読者が 1.5 に上書きするとコンテンツが切り取られます。テキストを収めるコンテナはコンテンツから自らの高さを決めるべきで、最小値が必要な場合は min-height を使い、固定の高さは決して使わないでください。
行間と行長はひとつの決定
もとの章に対する最も重要な補強は、行間を単独で選ぶことはできないという点です。行間と行長(measure)は相互に依存しており、その仕組みがリターンスイープです。短い行では、目の左への戻りは短いジャンプで、着地を誤ることはまれなので、詰まった行間でも許容できます。長い行では、リターンスイープは長く不正確になります。ゆとりのある行間は目により広い「着陸帯」を与え、同じ行を読み直してしまうダブリングをはるかに起きにくくします。これは判読性研究の古くからの知見であり、印刷の研究以来観察されてきました。許容できる行間は行長とともに増加します。
実践的には、45字のサイドバー注記は 1.4 で快適に読めますが、75字の記事カラムには 1.6 以上が必要です。レイアウトの都合で行が長くならざるを得ないなら、行間で補ってください。より良いのは、行長を制約して(次章の主題です)、行間を快適な中間域にとどめることです。
もとの版で指摘された書体ごとのばらつきも、いまなお当てはまります。line-height はフォントサイズから計算されますが、読者が知覚するのは、ある行の視覚的な塊と次の行とのあいだの白いチャネルです — そしてそれはエックスハイト、アセンダーとディセンダーの長さ、ストロークの太さに依存します。Verdana のようなエックスハイトの大きい書体はエムをより密に満たすため、同じ line-height でもエックスハイトの小さい書体より詰まって見えます。同様に、濃く、太く、あるいはコンデンスドな書体はより多くの空気を必要とします。行間は数値を信じるのではなく、組まれた段落を見て判断してください。
見出しは別物
1.4〜1.6 という指針は、連続する本文に適用されるものです。見出しは逆の論理に従います。大きなサイズでは、比例した行間は折り返した行のあいだに巨大な隙間を残し、見出しを視覚的に自分自身から切り離してしまいます。複数行の見出しは詰めて組むのが最も読みやすく — 通常は 1.1〜1.25、非常に大きなディスプレイ設定では 1.0 に近づきます。単位なしの line-height は比率として継承されるため、見出しのスタイルは本文の行間を継承するのではなく、自身のより詰まった値を明示的に設定すべきです。WCAG の間隔要件はテキストブロックに関するもので、ディスプレイ見出しは対象外ですが、ユーザーが上書きを適用したときに見出しが切り取られてはならないことに変わりはありません — 高さ固定のヒーローコンテナを避けるべきもうひとつの理由です。
小さな注意点が2つあります。第一に、極端はどちらの方向でも害になります。過剰な行間に対するもとの版の警告はいまも有効です。あまりに多くの余白に浮かんだ行は次の行の探索を難しくし、段落をひとつのまとまりとして分断します — おおよそ 2.0 を超えると、本文は崩壊し始めます。第二に、インターフェイスもまたテキストです。ボタン、フォームラベル、ナビゲーションには、折り返しやユーザーの上書きに耐えられるだけの妥当な line-height が必要で、決して折り返さない前提のトリックで1行の UI テキストを中央揃えする、というよくある習慣は、1.4.12 の失敗として繰り返し現れます。
CSS では
body { line-height: 1.5; } /* unitless — scales with size */
h1, h2 { line-height: 1.15; } /* display sizes want less */
figcaption { line-height: 1.4; }
/* Longer measures need more leading: */
.wide-column { line-height: 1.6; }推奨事項
- 本文の行間はデフォルトとして 1.5 に設定し、書体と行長に応じておおよそ 1.4〜1.7 の範囲で調整する。
- 比率が継承されて正しくスケールするよう、line-height には常に単位なしの値を使う。
- 行長が伸びるにつれて行間を増やす。長い行長はリターンスイープのためにより多くの空気を必要とする。
- 見出しはおおよそ 1.1〜1.25 に詰め、見出しスタイルに明示的に設定する。
- テキストを収めるコンテナの高さを固定しない。コンテンツに高さを決めさせ、必要な場合は min-height を使う。
- テキスト間隔の上書き(WCAG 1.4.12 に基づく行間 1.5)と 200% ズームでテストし、何も切り取られたり重なったりしないことを確認する。
- 行間は書体ごとに視覚的に評価する — エックスハイトとウエイトによって、同じ数値の見え方は変わる。