タイトル: letter-spacingプロパティ
SEOタイトル: CSS letter-spacing プロパティ完全ガイド（文字間隔・日本語の詰め）
| この記事の要点 |
|
letter-spacing の基本
letter-spacing は文字と文字の間隔（トラッキング）を調整する CSS プロパティです。タイポグラフィの仕上がりを左右する重要な値で、見出し・キャプション・ロゴなどに効きます。
/* 既定値 */
.a { letter-spacing: normal; } /* フォント側の定義に従う */
/* 絶対値（推奨しない・固定 px は拡縮に弱い） */
.b { letter-spacing: 2px; }
/* 相対値（推奨・フォントサイズに追従） */
.c { letter-spacing: 0.05em; } /* +5% */
.d { letter-spacing: -0.02em; } /* -2%（詰め） */
/* 単位ゼロは 0 のみで OK */
.e { letter-spacing: 0; }
/* CSS Custom Property + clamp() で可変 */
.f {
letter-spacing: clamp(0.02em, 0.05vw, 0.1em);
}値の単位と挙動
| 単位 | 意味 | 例 |
|---|---|---|
normal | フォント側のデフォルト（通常は 0） | letter-spacing: normal; |
px | 絶対値。拡大率変更に弱い | letter-spacing: 2px; |
em | 現在のフォントサイズ基準（推奨） | letter-spacing: 0.05em; |
rem | ルート要素のフォントサイズ基準 | letter-spacing: 0.1rem; |
ch | 「0」の文字幅基準（等幅 font 向け） | letter-spacing: 0.5ch; |
| 負の値 | 文字を詰める | letter-spacing: -0.02em; |
用途別のおすすめ値
| 用途 | 推奨値 | 狙い |
|---|---|---|
| 本文 | 0 〜 0.02em | 長文で疲れない範囲 |
| 見出し h1/h2 | -0.02em 〜 -0.04em | 大きい文字は詰めて引き締める |
| キャプション / 小さい文字 | 0.03em 〜 0.05em | 小サイズの可読性向上 |
| 全角オーバーライン見出し | 0.1em 〜 0.2em | 「メ ニ ュ ー」のような演出 |
| ロゴ・ボタン | 0.05em 〜 0.15em | 視認性 + 上品さ |
| 等幅コード | 0 | 等幅性を維持 |
日本語との相性: palt と組み合わせる
日本語フォントは標準だと文字ごとに同じ全角ボックスを使うので、「Tの右」と「.」の間がやけに空いて見えます。これを直すのが font-feature-settings: "palt"（プロポーショナル alternate）です:
/* 日本語見出しの定番セット */
h1, h2, h3 {
font-feature-settings: "palt"; /* プロポーショナル詰め */
letter-spacing: 0.02em; /* palt で詰めすぎた分を少し戻す */
}
/* font-feature-settings の代わりに font-kerning も使える */
.heading {
font-kerning: normal;
letter-spacing: -0.02em;
}palt 対応フォントとそうでないフォントがあります（游ゴシック・ヒラギノは対応、Web Font の Noto Sans JP は一部）。
letter-spacing が効かない / 期待通りにならない理由
- 等幅フォント (monospace) は 1 文字 1 セルなので、letter-spacing をかけると等幅性が崩れる
- Web Font の読込前は別フォントで描画されており、letter-spacing が変わって見える
- justify (text-align: justify) と組合せると、両端揃え用の追加スペースで意図しない見た目に
- 合字（リガチャ）を持つフォントで letter-spacing をかけると合字が解除される
- 2 行目以降のインデントに影響:
letter-spacingは最後の文字の後ろにも余白が付くので、見出しを中央揃えにしたとき微妙にずれる →padding-leftで補正
word-spacing との違い
| プロパティ | 対象 | 主な用途 |
|---|---|---|
letter-spacing | 文字と文字の間 | 全体のトラッキング |
word-spacing | 単語間のスペース幅（半角スペース部分） | 英文のスペースを広げる |
text-indent | 段落の最初のインデント | 本文の段落字下げ |
Tailwind CSS の tracking ユーティリティ
<!-- Tailwind のプリセット値 -->
<p class="tracking-tighter">-0.05em</p>
<p class="tracking-tight">-0.025em</p>
<p class="tracking-normal">0</p>
<p class="tracking-wide">0.025em</p>
<p class="tracking-wider">0.05em</p>
<p class="tracking-widest">0.1em</p>
<!-- 任意値（JIT モード） -->
<p class="tracking-[0.03em]">カスタム値</p>アニメーション
/* ホバーで文字が広がる演出 */
.btn {
letter-spacing: 0.05em;
transition: letter-spacing 0.3s ease;
}
.btn:hover {
letter-spacing: 0.2em;
}
/* タイプライター風（@keyframes） */
@keyframes spread {
from { letter-spacing: -0.5em; opacity: 0; }
to { letter-spacing: 0.05em; opacity: 1; }
}
.logo {
animation: spread 1s ease-out;
}FAQ
Q: letter-spacing: 0.05em と letter-spacing: 5% は同じ？
A: % 単位は仕様上は無効。em 系を使ってください。
Q: 「メ ニ ュ ー」のように全角スペースを入れずに均等な見出しを作りたい
A: letter-spacing: 0.5em 程度 + text-indent: 0.5em で「最後の余白をキャンセル」のテクニックを使います。中央揃えのとき左右の重心がずれにくくなります。
Q: Adobe Illustrator の「カーニング」とは違う？
A: letter-spacing はトラッキング（全体一律）。文字ペアごとに調整するのがカーニングで、CSS では font-kerning: normal でフォント側のテーブルを有効化します。