行間・文字間隔の決め方｜読みやすい文字組みのコツ

3つの間隔を分けて考える

「余白を増やしたい」とき、全ての文字間隔を広げる必要はありません。本文がぎっしりなら行間、話題がつながって見えるなら段落間、と困っている場所を分けて調整しましょう。

同じ文章で、行の間を比較

行間を詰めた例

行間と段落間を整えた例

本文の行間は少しずつ試す

Web本文なら、文字サイズに対して行の高さを1.6〜1.9倍程度から試す方法があります。あくまで試作の目安で、日本語の書体・文字量・横幅によって調整が必要です。短い見出しに、そのまま同じ値を当てはめる必要はありません。

狭すぎると行が密集する

上下の行が近いと、長い文章で次の行を探しづらくなります。漢字が多い文章や太い文字では、特に密集して見えやすいので確認しましょう。

広すぎるとまとまりが弱くなる

行同士が離れすぎると、1つの段落なのか分かりにくくなります。少し広げて読んでみて、必要なら戻す、という順に調整しましょう。

行間の数値を読むときの注意

Webのline-heightは、一般に行全体の高さを指定する値です。「行の高さが文字サイズの1.8倍」と「文字と文字の間に1.8倍の空白がある」は違います。制作ツールの行間の数値も、倍率・ポイントなど表示方法が異なるため、そのまま別のツールへ移せるとは限りません。

たとえば文字サイズ16pxにline-height:1.8を指定すると、行の高さは計算上28.8pxです。これは上下の文字の見える部分の間が12.8pxと断定できる意味ではなく、字形やフォントの設計も影響します。

文字間隔は、まず標準から

本文は初期設定から始め、詰まって見える場合に少しだけ調整します。広げすぎると1行に入る文字が減り、改行が増えて文章のまとまりが弱くなることがあります。

見出しは、短い言葉で比較する

短い見出しなら、少し広げてゆったり見せる表現もできます。ただし、長い見出しに大きな間隔を付けると、スマホで細切れに折り返されがちです。意味が分かるまとまりで読めるかを確認しましょう。

見出しをおしゃれに見せたくて文字の間を広げたら、スマホで何行にもなりました。

PORT編集部

まず間隔を標準に戻し、見出しを短くできるか試しましょう。文字の間を広げるより、周りの余白を作るほうが、落ち着いた見出しになる場合もあります。

段落の区切りと1行の長さ

話題が変わるところで段落を分け、段落間には行間より分かりやすい区切りを作ります。1文ごとに大きな空白を入れると、流れが途切れることもあります。内容のまとまりを基準にしましょう。

• 長い行が続くなら、本文の横幅を見直す
• 同じ話題の文章は、1つの段落へまとめる
• 話題が変わるところに段落間の余白を作る
• 見出しの前後は、本文の行間とは別に調整する

区切り方は近接の基本、周りの空きは余白の取り方でも確認できます。行間だけで全ての問題を解決しようとせず、横幅と文字量も見直しましょう。

スマホで仕上げを確認

同じ本文を、標準・少し広めの2パターンで作って読みます。スマホで行を追いやすいか、見出しだけ1文字飛び出していないか、囲みの中で文字が切れないかを確認しましょう。

WebのWCAG「Text Spacing」は、利用者が間隔を変更しても内容が欠けないことを求めています。記載された値を、全てのデザインの初期設定にする規定ではありません。