# letter-spacing

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

- カテゴリ: テキスト・フォント
- URL: https://www.css-dictionary.com/property/letter-spacing/

## 構文

```css
letter-spacing: normal | <length>
```

## Tailwindでは

- `tracking-tight` → letter-spacing: -0.025em
- `tracking-normal` → letter-spacing: 0
- `tracking-wide` → letter-spacing: 0.025em
- 任意値: `tracking-[0.2em]`

## ブラウザ対応

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

## コード例

### 例1: 文字間をやや広げる

```css
letter-spacing: 0.1em;
```

### 例2: 文字間を詰める

```css
letter-spacing: -1px;
```

## TIPS

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

## よくある間違い

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

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

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

## AIへの依頼文例

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

## 関連プロパティ

- [font-size](https://www.css-dictionary.com/property/font-size.md)
- [text-spacing-trim](https://www.css-dictionary.com/property/text-spacing-trim.md)