「文章が読みにくい」「文字が詰まって見える」そんなときに活躍するのが CSSのline-height（ラインハイト）です。
行間を調整することで、テキストの読みやすさを大きく向上させることができます。この記事では、line-heightの基本とおすすめの使い方を紹介します。

line-heightとは？

line-heightは、テキストの「行の高さ＝行間」を指定するCSSプロパティです。
行間が広すぎたり狭すぎたりすると、読みにくくなってしまうため、適切な設定が重要です。

主な指定方法

基本的な使い方

① 標準的な行間を指定（1.6倍）

p {
  line-height: 1.6;
}

② 小さめの行間（1.2倍）

.compact-text {
  font-size: 14px;
  line-height: 1.2;
}

③ 固定ピクセルでの指定（例：24px）

.fixed-line {
  font-size: 16px;
  line-height: 24px;
}

おすすめのline-height値

• 本文用：1.5〜1.8 程度が読みやすい
• 見出し用：やや詰めて 1.2〜1.4
• モバイル：余白を意識してやや広め

おわりに

line-heightを適切に設定するだけで、文章の見やすさ・印象は大きく変わります。
特にWebサイトでは、画面サイズによって印象が変わるので、レスポンシブ対応も意識して行間を調整してみましょう！