この記事の要点

letter-spacing: 0.05em のように相対値（em / rem）で指定するのが基本 normal が既定値（フォント定義に従う）。負の値で文字を詰められる 日本語フォントでは font-feature-settings: "palt"（プロポーショナル詰め）と併用するとプロっぽい 見出し（h1, h2）は letter-spacing: -0.02em 程度のマイナス調整で引き締まる Tailwind CSS では tracking-tight / tracking-wide ユーティリティで指定

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 でフォント側のテーブルを有効化します。