文字間のスペース(字間)を指定するプロパティです。pxやemで指定し、可読性やデザイン調整に使われます。見出しでは広めに、本文では狭めに設定することが一般的です。
letter-spacing: normal | <length>| tracking-tight | letter-spacing: -0.025em |
| tracking-normal | letter-spacing: 0 |
| tracking-wide | letter-spacing: 0.025em |
任意値: tracking-[0.2em]
サンプルテキスト
.element {
letter-spacing: 0px;
}letter-spacing: 0.1em;文字間をやや広げる
letter-spacing: -1px;文字間を詰める
em単位で指定するとフォントサイズに応じて調整できる。日本語Webフォントでは詰めすぎに注意。
負の値を使いすぎると文字が重なって読みにくくなる。
letter-spacingは最後の文字の後ろにも付くため、中央寄せテキストがわずかに左にずれて見えます(見出しで顕著)。AIはこの相殺(text-indentやpadding調整)まで気が回りません。日本語の見出しでは0.02〜0.08em程度の字間がよく使われますが、本文への広い字間は可読性を下げます。
中央寄せ見出しにletter-spacingを付けたら中心がずれて見える問題を修正して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。