---
title: "行間が詰まりすぎ・文字が重なるときの原因と直し方"
description: "行間が詰まりすぎて文字が上下に重なる、フォント変更後に急に窮屋になったと感じる制作者向け。line-heightの単位ミス・固定px・Webフォントのメトリクスという三つの原因を整理します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/line-height-text-overlap"
markdown: "https://giga-site.com/articles/line-height-text-overlap/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 行間が詰まりすぎ・文字が重なるときの原因と直し方

行間が極端に詰まって上下の行が重なる、あるいはフォントを変えたら急に窮屈になった。原因はline-heightの単位指定の誤り、固定px指定、そしてWebフォント固有のメトリクスにあります。この記事では重なりの典型を切り分けて直す方法をまとめます。

> Source HTML: https://giga-site.com/articles/line-height-text-overlap
> Article index: https://giga-site.com/articles/index.md

## 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フォントを含む状態でレビュアーに見てもらえるので、メトリクス差まで正確に確認できます。公開期限を設定すれば期限後に自動で閲覧不可になります。

## よくある質問

### line-heightは単位ありとなしのどちらがよいですか

単位なしの数値が推奨されます。font-sizeに対する倍率として計算され、サイズ変更時も比率が保たれて重なりを防げます。

### 本文のline-heightの目安はどれくらいですか

単位なしで1.5前後が読みやすさの目安です。見出しは1.2前後に詰めるとバランスが取りやすくなりますが、最終的には実際の見た目で調整します。

### フォントを変えたら行間が詰まりました

フォントごとのメトリクスの違いが原因です。使用するフォントを確定させてから、そのフォントに合わせてline-heightを微調整してください。

### 行間を広げても重なりが直りません

高さ固定(height)やoverflowで文字が切れている、あるいは別要素が重なっている可能性があります。line-height以外の原因を開発者ツールで確認してください。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [長い英数字・URLがはみ出して折り返さないときの対処](https://giga-site.com/articles/long-text-overflow-no-wrap/index.md)
- [transformやscaleを使った要素の文字がにじむときの対処](https://giga-site.com/articles/transform-blurry-text/index.md)
- [プレースホルダーの文字が切れる・見えないときの対処](https://giga-site.com/articles/placeholder-text-cut-or-invisible/index.md)
- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)
- [公開したHTMLのフォームが送信できないときの対処](https://giga-site.com/articles/form-not-submitting/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "行間が詰まりすぎ・文字が重なるときの原因と直し方",
  "description": "行間が詰まりすぎて文字が上下に重なる、フォント変更後に急に窮屋になったと感じる制作者向け。line-heightの単位ミス・固定px・Webフォントのメトリクスという三つの原因を整理します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/line-height-text-overlap",
  "url": "https://giga-site.com/articles/line-height-text-overlap",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "line-heightは単位ありとなしのどちらがよいですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "単位なしの数値が推奨されます。font-sizeに対する倍率として計算され、サイズ変更時も比率が保たれて重なりを防げます。"
      }
    },
    {
      "@type": "Question",
      "name": "本文のline-heightの目安はどれくらいですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "単位なしで1.5前後が読みやすさの目安です。見出しは1.2前後に詰めるとバランスが取りやすくなりますが、最終的には実際の見た目で調整します。"
      }
    },
    {
      "@type": "Question",
      "name": "フォントを変えたら行間が詰まりました",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "フォントごとのメトリクスの違いが原因です。使用するフォントを確定させてから、そのフォントに合わせてline-heightを微調整してください。"
      }
    },
    {
      "@type": "Question",
      "name": "行間を広げても重なりが直りません",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "高さ固定(height)やoverflowで文字が切れている、あるいは別要素が重なっている可能性があります。line-height以外の原因を開発者ツールで確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```