Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
1
12
1
1
18
1
normal
1
12
1
1
18
1
その他

word-spacing 属性は、単語間の間隔の動作を指定します。

1
12
1
1
18
1
1+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS
.wide-spacing {
  word-spacing: 0.3em;
}
.tight-spacing {
  word-spacing: -0.05em;
}

ライブデモ

Normal(default)

CSS Normal(default) demo.

プレビュー全画面表示

Widespacing(0.3em)

CSS Widespacing(0.3em) demo.

プレビュー全画面表示

Narrowspacing(-0.05em)

CSS Narrowspacing(-0.05em) demo.

プレビュー全画面表示

実務での使いどころ

  • 見出しの単語間隔調整

    大きなフォントサイズの見出しで単語間のスペースを微調整し、バランスの取れたタイポグラフィを実現します。

注意点

  • 過度な word-spacing は可読性を著しく損なうため、em単位で小さな調整値を使用してください。

アクセシビリティ

  • 単語間隔の変更はディスレクシアのあるユーザーの読みやすさに影響する場合があるため、極端な値は避けてください。