目次
- はじめに｜文字間隔を触ると、サイトが急に“それっぽく”なる
- CSSで文字間隔を調整するとは
- まずは行間を整える（line-heightが先。だいたいこれで改善する）
- line-heightの基本ルール
- 読みやすい行間の目安（まずはこの辺から）
- 字間を調整する（letter-spacingの基本）
- letter-spacingの特徴
- letter-spacingの値の考え方（0から動かす）
- 日本語におすすめのletter-spacing（やりすぎない目安）
- 字間と行間をセットで整える“鉄板”設定（コピペ用）
- 見出しだけ字間を広げると、読みやすさが跳ねる
- 文字間隔が広がりすぎる原因（よくある“事故”）
- 原因1：親要素にletter-spacingをかけて、全部に継承されている
- 対策（本文だけに絞る）
- 原因2：単位ミス（pxで広げすぎる）
- 原因3：フォントと相性が悪い（明朝×広い字間は“離れる”）
- 原因4：line-heightが低すぎて、字間を広げても読みにくい
- DevToolsで「どの値が効いてるか」を確認する（差別化ポイント）
- 確認手順（Chrome）
- ここを見ると早い
- スマホで詰まる・間延びする時の調整（スマホ崩れ対策）
- 横スクロール問題につながるケース（地味にハマる）
- 対策例（折り返しと溢れを整える）
- チェックリスト｜文字間隔で迷ったらこれで整う
- よくある質問
- letter-spacingとline-height、どっちから触ればいい？
- 文字間隔を変えるとSEOに影響する？
- まとめ｜行間を整えて、字間は“少しだけ”が勝ち
はじめに｜文字間隔を触ると、サイトが急に“それっぽく”なる
Webサイトを作っていて、レイアウトは整ってるのに、なぜか野暮ったい。
見出しがギュッと詰まって見える。本文が目に入ってこない。
これ、かなりの確率で「字間・行間」の問題です。
- 見出しが窮屈で、パッと読めない
- 本文が詰まりすぎて、読む気が落ちる
- 逆に広げすぎて、間延びして見える
私も最初は、デザインが微妙な時に色やフォントばかり変えてました。
でも原因はシンプルで、line-height が低すぎただけ、ということが何度もありました。
そこ直したら一発で「読みやすい」になって、ちょっと悔しかったです。
ここでは「css 文字 間隔」で迷子になりにくいように、基本から実務の落とし穴、DevToolsでの確認までまとめます。
CSSで文字間隔を調整するとは
スニペット向けに一文でまとめます。
CSSで文字間隔を調整するとは、letter-spacingで字間、line-heightで行間をコントロールして、読みやすさと見た目のリズムを整えることです。
主に使うプロパティはこの2つです。
letter-spacing：文字と文字の間（字間）line-height：行と行の間（行間）
この2つを押さえるだけで、文章の印象が変わります。
まずは行間を整える（line-heightが先。だいたいこれで改善する）
字間より先に、行間を整える方が効きます。
理由は単純で、行間は「読める・読めない」を左右するからです。
body {
line-height: 1.6;
}line-heightの基本ルール
- 数値指定が一番扱いやすい（
1.6みたいな） - フォントサイズに合わせて自動で伸び縮みする
- px指定より崩れにくい
読みやすい行間の目安（まずはこの辺から）
サイトの雰囲気やフォントで変わりますが、迷ったらこの目安が強いです。
- 本文：
1.6〜1.8 - 見出し：
1.2〜1.4
body {
font-size: 16px;
line-height: 1.7;
}
h2, h3 {
line-height: 1.3;
}本文は「息ができるくらい」に。
見出しは広げすぎると間延びするので控えめに。
字間を調整する（letter-spacingの基本）
次に字間です。
p {
letter-spacing: 0.05em;
}letter-spacingの特徴
- 文字同士の間隔を広げたり詰めたりできる
- 日本語は「ほんの少し」で効く
- 見出しやボタン、キャッチコピーで差が出る
letter-spacingの値の考え方（0から動かす）
h2 {
letter-spacing: 0.1em;
}0：初期値（通常）- 正の値：広がる
- 負の値：詰まる
負の値も使えます。
h2 {
letter-spacing: -0.02em;
}ただ、詰めすぎると読みにくくなります。
特に日本語は潰れて見えやすいので、負は“最終手段”くらいが安全です。
日本語におすすめのletter-spacing（やりすぎない目安）
日本語は「ちょい足し」がきれいです。
- 本文：
0.02em〜0.06em - 見出し：
0.06em〜0.12em - 英字見出し（ALL CAPSなど）：
0.08em〜0.2em（少し強めでも成立）
body {
letter-spacing: 0.04em;
}
h2 {
letter-spacing: 0.08em;
}「0.05emが万能」みたいに言われがちですが、フォントによって最適は変わります。
まずは 0.03em〜0.05em から触ると事故が少ないです。
字間と行間をセットで整える“鉄板”設定（コピペ用）
迷ったら、とりあえずこれでスタートできます。
body {
font-size: 16px;
line-height: 1.7;
letter-spacing: 0.04em;
}見出しは別で整えるとさらに良いです。
h2 {
line-height: 1.3;
letter-spacing: 0.08em;
}見出しだけ字間を広げると、読みやすさが跳ねる
見出しは文字数が少ないので、少し広げても崩れにくいです。
逆に本文で広げすぎると、読むスピードが落ちます。
h2 {
letter-spacing: 0.1em;
}
p {
letter-spacing: 0.04em;
}「見出しだけ気持ち広め」にすると、情報の区切りが見えるようになります。
文字間隔が広がりすぎる原因（よくある“事故”）
原因1：親要素にletter-spacingをかけて、全部に継承されている
これ、地味に多いです。
body {
letter-spacing: 0.1em;
}見出しは良いけど、本文やボタン、フォームまで全部広がって「なんか間延び」になります。
本文が多いサイトほどダメージが出ます。
対策（本文だけに絞る）
body {
letter-spacing: normal;
}
p, li {
letter-spacing: 0.04em;
}原因2：単位ミス（pxで広げすぎる）
p {
letter-spacing: 2px;
}pxだと環境差が大きくなりやすいです。
日本語本文に2pxは広すぎることが多いので、emに寄せる方が安全です。
p {
letter-spacing: 0.04em;
}原因3：フォントと相性が悪い（明朝×広い字間は“離れる”）
- 明朝体 ×
0.08em以上 → 文字がバラけて見えやすい - 細いフォント × 広い行間 → スカスカに見えやすい
フォントを変えずに対応するなら、字間を控えめにして行間で読みやすさを作るのがやりやすいです。
原因4：line-heightが低すぎて、字間を広げても読みにくい
字間を触る前に、行間が詰まっていると勝てません。
p {
line-height: 1.2; /* これだと詰まりがち */
letter-spacing: 0.05em;
}まず行間を戻します。
p {
line-height: 1.7;
letter-spacing: 0.04em;
}DevToolsで「どの値が効いてるか」を確認する（差別化ポイント）
「なんか広い」「自分の指定が効いてない」
この時はDevToolsが最速です。
確認手順（Chrome）
- 対象テキストを右クリック → 検証
- Elementsで該当要素を選択
- 右側の Styles で
letter-spacing/line-heightを探す - Computed で最終的な値を見る
- 打ち消し線が付いていたら、その指定は負けています
ここを見ると早い
line-heightが想定より小さくなってないかletter-spacingが親要素から継承されてないか- メディアクエリでスマホだけ値が変わってないか
スマホで詰まる・間延びする時の調整（スマホ崩れ対策）
スマホは画面が狭いので、字間を広げると「1行が短くなって余計に読みにくい」ことがあります。
なのでスマホだけ少し戻すのは普通にアリです。
body {
line-height: 1.7;
letter-spacing: 0.04em;
}
@media (max-width: 768px) {
body {
letter-spacing: 0.02em;
line-height: 1.75;
}
}字間を少し詰めて、行間で読みやすさをキープする感じです。
横スクロール問題につながるケース（地味にハマる）
文字間隔そのものが横スクロールの原因になることは多くないですが、組み合わせで起きます。
white-space: nowrap;で折り返し禁止- 長い英数字（URL、商品コード、メールアドレス）
- ボタン内テキストに大きい
letter-spacingを付与 vwで幅を作っている要素の中に、字間広めの長文
対策例（折り返しと溢れを整える）
.long-text {
overflow-wrap: anywhere;
word-break: break-word;
}ボタンは字間を強くしすぎない方が安全です。
チェックリスト｜文字間隔で迷ったらこれで整う
- まず
line-heightを1.6〜1.8にしたか - 本文の
letter-spacingは0.02〜0.06emに収まっているか - 見出しは本文より少し広めにしているか
bodyに大きめのletter-spacingを入れて全要素に継承していないか- スマホ（幅375px前後）で詰まり/間延びを確認したか
- DevToolsのComputedで最終値を見たか
よくある質問
letter-spacingとline-height、どっちから触ればいい？
先に line-height。
本文が読みやすくなるだけで、字間をいじらなくても整うことが多いです。
文字間隔を変えるとSEOに影響する？
直接の順位要因ではありません。
ただ、読みやすさが上がると離脱が減ったり、読了率が上がったりするので、結果的にプラスになりやすいです。
まとめ｜行間を整えて、字間は“少しだけ”が勝ち
CSSで文字間隔を調整するなら、まずこれです。
- 行間：
line-height（本文は1.6〜1.8） - 字間：
letter-spacing（本文は0.02〜0.06em） - 見出しは本文より少し広めが映える
- 広げすぎは一気にダサくなるので注意
- 迷ったらDevToolsで最終値を確認
「css 文字 間隔」で探しているなら、まずはこの基本セットをコピペして、見出しだけ少し広げてみてください。
それだけで、文章の見え方がガラッと変わります。
--- ここまで ---