letter-spacing
letter-spacing は CSS のプロパティで、テキストの水平方向の字間のスペースに関する挙動を設定します。この値はテキストを描画する際に文字間の自然な空間に追加されます。letter-spacing が正の値であった場合は、文字と文字の間が開き、letter-spacing が負の値であった場合は、文字と文字が互いに近づきます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
normal | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| letter-spacing 属性は、テキスト文字間の間隔を制御します。 | 1 | 12 | 1 | 1 | 18 | 1 |
基本構文
CSS
h1 {
letter-spacing: 0.05em;
}
.uppercase {
text-transform: uppercase;
letter-spacing: 0.1em;
}ライブデモ
実務での使いどころ
-
見出しの字間調整
見出しテキストの文字間隔を広げて視認性と高級感を向上させ、本文との視覚的な差別化を図ります。
注意点
- 過度な字間の拡大は可読性を低下させます。特に本文テキストでは控えめな値を使用してください。
アクセシビリティ
- letter-spacingが大きすぎると認知障害のあるユーザーにとって読みにくくなる場合があります。WCAGでは最低1.12倍の行間が推奨されていますが、字間も適度に保つことが重要です。