【完全保存版】CSSで文字間隔を調整する方法｜letter-spacing・line-heightを初心者向けに徹底解説

Webサイトを作っていて、
「文字が詰まりすぎて読みにくい」「なんだか野暮ったい」
と感じたことはありませんか？

見出しが窮屈に見える
本文が読みづらい
デザインが素人っぽく見える

こうした悩みは、文字間隔の調整で一気に改善できます。

この記事では、「css 文字間隔」で検索した初心者の方に向けて、
CSSで文字間隔を調整する基本から、
実務で使えるおすすめ設定までを 分かりやすく解説 します。

CSSで文字間隔を調整するとは

CSSで文字間隔を調整するとは、
文字と文字の間、行と行の間の余白をコントロールすることです。

主に使うプロパティは次の2つです。

letter-spacing：文字と文字の間隔
line-height：行と行の間隔（行間）

この2つを理解すれば、
文章の読みやすさは大きく向上します。

文字と文字の間隔を調整する（letter-spacing）

文字間隔を調整する基本プロパティが、letter-spacing です。

p {
  letter-spacing: 0.05em;
}

letter-spacingの特徴

文字同士の間隔を広げたり、詰めたりできる
em指定が一般的
見出しやロゴによく使われる

letter-spacingの指定値の考え方

h1 {
  letter-spacing: 0.1em;
}

0：初期値（通常）
正の値：文字間隔が広がる
負の値：文字間隔が詰まる

h1 {
  letter-spacing: -0.02em;
}

※負の値は、使いすぎると読みにくくなるため注意しましょう。

日本語におすすめのletter-spacing設定

日本語テキストでは、
少しだけ文字間隔を広げるのが定番です。

body {
  letter-spacing: 0.05em;
}

行と行の間隔を調整する（line-height）

文字間隔とセットで重要なのが、行間です。

p {
  line-height: 1.6;
}

line-heightの特徴

行と行の間隔を調整できる
数値指定が最もおすすめ
フォントサイズに応じて自動調整される

読みやすい行間の目安

一般的なおすすめ値はこちらです。

本文：1.5〜1.8
見出し：1.2〜1.4

body {
  font-size: 16px;
  line-height: 1.6;
}

行間を広げるだけで、
文章のストレスは大きく減ります。

文字間隔と行間を同時に調整する例

body {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

この設定は、
初心者にとって最も無難で使いやすい組み合わせです。

見出しの文字間隔を調整する例

h2 {
  letter-spacing: 0.1em;
  line-height: 1.3;
}

見出しは文字数が少ないため、
本文より少し広めに設定するとバランスが良くなります。

文字間隔が広がりすぎる原因

letter-spacingをかけすぎている

p {
  letter-spacing: 0.3em;
}

文字がバラバラに見え、
読みにくくなります。

フォントとの相性が悪い

明朝体 × 広すぎるletter-spacing
細いフォント × 広い行間

フォントと間隔は、
セットで微調整するのがポイントです。

文字間隔を調整するときの注意点

広げすぎない
本文と見出しで設定を分ける
スマホ表示でも確認する

@media screen and (max-width: 768px) {
  body {
    letter-spacing: 0.03em;
  }
}

画面が小さい場合は、
文字間隔を少し狭めるのも有効です。

よくある質問

letter-spacingとline-heightはどちらが重要ですか

どちらも重要ですが、
まずは line-height を優先するのがおすすめです。

文字間隔を調整するとSEOに影響しますか

直接的な影響はありませんが、
読みやすさはユーザー評価に影響します。

まとめ

CSSで文字間隔を調整することで、
Webページの読みやすさと印象は大きく向上します。

文字間隔：letter-spacing
行間：line-height
日本語は少し広めが基本
広げすぎには注意

「css 文字間隔」で検索した方は、
まず letter-spacing と line-height の基本設定 をそのまま試してみてください。
文字間隔を整えるだけで、デザインの完成度は一段階アップします。

【完全保存版】CSSで文字間隔を調整する方法｜letter-spacing・line-heightを初心者向けに徹底解説