行間が詰まりすぎ・文字が重なるときの原因と直し方

line-heightの単位指定が重なりを生む

line-heightをpxで固定すると、後からfont-sizeを大きくしたときに行の高さが追いつかず、文字が上下で重なります。例えばline-height:16pxのままfont-sizeを24pxにすると、文字が行高をはみ出して重なります。

単位なしの数値(line-height:1.5など)で指定すると、その要素のfont-sizeに対する倍率として計算され、font-sizeを変えても比率が保たれます。重なりを防ぐ基本はこの単位なし指定です。

一方、emやpxで指定したline-heightは継承時に計算済みの値が渡るため、子要素のfont-sizeが違うと意図しない行間になりやすい点に注意が必要です。

Webフォント差し替えで起きるメトリクスずれ

フォントごとに、文字本体の上下にある余白(アセンダー・ディセンダーなどのメトリクス)は異なります。同じline-heightでも、フォントを差し替えると行間の見た目が変わり、詰まって見えたり重なったりすることがあります。

特にシステムフォント前提で組んだ後にWebフォントを読み込むと、メトリクスの違いで行間が窮屈になる例が多いです。フォント確定後にline-heightを微調整するのが現実的な対処です。

Webフォントの読み込み前後で表示が切り替わる(FOUT)際にも一瞬行間が変わるため、読み込み完了後の状態で評価することが大切です。

症状別チェック表

行間が詰まりすぎ・文字が重なるときは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

重なりを切り分ける手順

行の重なりは、原因が単位かフォントかを切り分けると対処が決まります。

1. 対象要素のline-heightの指定値と単位を確認する
2. pxやemで固定されていれば単位なしの数値に変えて試す
3. font-familyを標準フォントに戻して重なりが消えるか確認する
4. Webフォントの読み込み完了後の表示で評価する
5. Computedでline-heightの実寸(px)とfont-sizeの比を確認する

適切な行間の目安

本文の行間は、読みやすさの観点から単位なしで1.5前後がひとつの目安とされます。見出しなど文字が大きい要素は、相対的に行間を詰めて1.2前後にすると締まって見えます。

ただし最適値はフォントや言語(日本語か欧文か)で変わるため、数値は出発点として実際の見た目で微調整します。日本語は文字の高さが揃っているため、欧文よりやや広めの行間が読みやすいことが多いです。

行間を広げても重なりが残る場合は、line-heightではなく要素の高さ固定(height)やoverflowで切れている別の問題を疑ってください。

フォント込みで実機確認する

行間とメトリクスの問題は、Webフォントを実際に読み込んだ環境でないと正確に判断できません。フォント差し替え前後やline-height候補を並べたサンプルを作り、実機で見比べるのが確実です。

確認用のHTMLとフォントをまとめて共有したいときは、CSS・JS・画像やフォントを含むZIPをそのままギガサイト便にドロップすると共有URLが発行できます。Webフォントを含む状態でレビュアーに見てもらえるので、メトリクス差まで正確に確認できます。公開期限を設定すれば期限後に自動で閲覧不可になります。