CSS辞書

letter-spacing

テキスト・フォント

文字間のスペース(字間)を指定するプロパティです。pxやemで指定し、可読性やデザイン調整に使われます。見出しでは広めに、本文では狭めに設定することが一般的です。

構文

Syntax
letter-spacing: normal | <length>

Tailwindでは

tracking-tightletter-spacing: -0.025em
tracking-normalletter-spacing: 0
tracking-wideletter-spacing: 0.025em

任意値: tracking-[0.2em]

インタラクティブデモ

Try it

コントロール

0px
-2px10px

プレビュー

サンプルテキスト

生成されたCSS

.element { letter-spacing: 0px; }

コード例

1

letter-spacing: 0.1em;
実行結果
CSS Dictionary サンプルテキスト
letter-spacing: 0.1em

文字間をやや広げる

2

letter-spacing: -1px;
実行結果
CSS Dictionary サンプルテキスト
letter-spacing: -1px

文字間を詰める

💡 TIPS

em単位で指定するとフォントサイズに応じて調整できる。日本語Webフォントでは詰めすぎに注意。

⚠️ よくある間違い

負の値を使いすぎると文字が重なって読みにくくなる。

🤖 AIがよく間違えるポイント

letter-spacingは最後の文字の後ろにも付くため、中央寄せテキストがわずかに左にずれて見えます(見出しで顕著)。AIはこの相殺(text-indentやpadding調整)まで気が回りません。日本語の見出しでは0.02〜0.08em程度の字間がよく使われますが、本文への広い字間は可読性を下げます。

💬 AIへの頼み方

中央寄せ見出しにletter-spacingを付けたら中心がずれて見える問題を修正して

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

このプロパティを使ったUIレシピ

ブラウザサポート

Baseline 広く利用可能
Chrome
1+
Firefox
1+
Safari
1+
Edge
12+