word-spacing
word-spacing はテキスト内の単語間スペースを調整するプロパティです。正の値で間隔を広げ、負の値で狭めることができます。見出しの字間調整やデザイン上の効果、特定のフォントでの読みやすさ改善に使用されます。letter-spacing(文字間)と組み合わせてテキストの見た目を細かく制御できます。
概要
word-spacing はテキスト内の単語間スペースを調整するプロパティです。正の値で間隔を広げ、負の値で狭めることができます。見出しの字間調整やデザイン上の効果、特定のフォントでの読みやすさ改善に使用されます。letter-spacing(文字間)と組み合わせてテキストの見た目を細かく制御できます。
対応ブラウザ
デスクトップ
Chrome 1+
Edge 12+
Safari 1+
Firefox 1+
モバイル
Chrome Android 18+
Safari iOS 1+
Firefox Android 4+
基本構文
CSS
.wide-spacing {
word-spacing: 0.3em;
}
.tight-spacing {
word-spacing: -0.05em;
} 実務での使いどころ
-
見出しの単語間隔調整
大きなフォントサイズの見出しで単語間のスペースを微調整し、バランスの取れたタイポグラフィを実現します。
注意点
- 過度な word-spacing は可読性を著しく損なうため、em単位で小さな調整値を使用してください。
アクセシビリティ
- 単語間隔の変更はディスレクシアのあるユーザーの読みやすさに影響する場合があるため、極端な値は避けてください。