normalフォントとブラウザーに任せる
初期値です。フォントが持つ通常の単語間隔をそのまま使い、追加の間隔は加えません。
word-spacing
文章に含まれる単語と単語のあいだへ加える単語間の空白を調整するプロパティ。単語内の文字間隔は変えず、区切りとなる空白だけを動かして比べます。
CSSのword-spacingとは？
単語どうしの間隔をライブプレビューで狭めたり広げたりしながら、normal・長さ・割合・負の値・継承を初学者向けに解説します。
遊んでみよう
単語内の字間は保ち、空白の幅だけを変更
SEE MOVE COMPARECSS changes the space between words.見て 動かして 比べる
CSS
.element word-spacing: 0px;
値のパターン
word-spacingの構成要素
<length-percentage>通常の間隔へ値を加える
px・em・%などで指定します。正の値は広げ、負の値は単語を近づけます。
inherit子要素へ受け継がれる
word-spacingは継承されるため、親へ指定すると中の文章にも同じ単語間隔が使われます。
早見表
初期値はnormalです。長さや割合は通常の単語間隔へ加算され、負の値も使えます。まずは短い英文で変化を確かめます。
01
normalフォント本来の単語間隔を使う初期値02
0追加する間隔を0にする基準03
-2px単語を少し近づける負の値04
4px一定の長さだけ広げる固定長05
0.2em文字サイズに合わせて広げる相対長06
10%文字サイズの10%を間隔へ加える割合07
inherit親の指定値を受け継ぐグローバルよくある使い方
01
英語の見出しにゆとりを加える
短い英語見出しの単語間を少し広げると、単語のまとまりを保ったまま余白を整えられます。
.hero-title { word-spacing: 0.12em; }02
短いメッセージの区切りを強める
キャッチコピーの単語間へ控えめな余白を足し、ひと続きの文章でも区切りを見つけやすくします。
.tagline { word-spacing: 6px; }03
親要素から文章全体へ適用する
継承を利用して文章の親へ指定すると、子要素をまたぐ単語間隔もまとめて調整できます。
.article { word-spacing: 0.08em; }ポイント
広げすぎ・詰めすぎは、単語のまとまりを壊す。
word-spacingはすべての要素と::first-letter・::first-lineに適用でき、子要素へ継承されます。割合は、その文章で使われる文字サイズを基準に計算されます。大きすぎる正の値では単語が離れ、負の値では単語が重なって読みにくくなるため、使用するフォントと実際の文章で確認します。HTMLで連続する空白は通常1つにまとめられ、空白のない日本語の語句へword-spacingを指定しても新しい区切りは作られません。空白と改行そのものの扱いはwhite-spaceで指定します。
関連するCSSも見てみよう。
word-spacing と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。