word-spacing：単語同士の間隔を指定する

word-spacingプロパティの説明

word-spacingは、単語同士の間隔を指定します。この機能は、英文などの単語を半角スペースで区切る言語において、ホワイトスペースの幅を定義します。

既定値では、半角スペースの幅はフォントやブラウザによって定義されている寸法で表示されますが、word-spacingによって間隔を調整することが可能です。半角スペースで区切られていない文字には影響しません。マイナスの値を与えて幅を詰めることもできます。

連続する文字同士の間隔を指定するには、letter-spacingを使用して下さい。カーニングの規則を変える場合は、font-kerningというプロパティが用意されています。

word-spacingに指定できる値

normal

フォントやブラウザで定義された通常の間隔で表示します。これが初期値です。

<length>

通常の間隔に追加する幅の寸法を指定できます。CSSで使用できる長さを表す単位付きの数値です。

<percentage>

文字の贈り幅（advance width）に追加する幅の量をパーセンテージで指定します。

word-spacingの使い方とサンプル

word-spacingプロパティの構文は以下の通りです。

/* キーワード値 */
word-spacing: normal;

/* <length>値 */
word-spacing: 3px;
word-spacing: 0.3em;
word-spacing: -0.5rem;

/* <percentage>値 */
word-spacing: 24%;
word-spacing: 50%;
word-spacing: -10%;

/* グローバル値 */
word-spacing: inherit;
word-spacing: initial;
word-spacing: revert;
word-spacing: unset;

word-spacingの実例

それでは実際にword-spacingプロパティの書き方を見ていきましょう。以下の例は、同じ内容のテキストに対して異なる間隔の幅を指定した場合の比較です。マイナスの値を指定すると、単語同士の幅が切り詰められます。間隔を広げすぎると意味が読み取れなくなる可能性があるため、気をつけましょう。

パーセンテージによる指定は対応していないブラウザが多いため、フォントサイズやピクセル単位での指定を推奨します。

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
.samp_box > section {
	overflow: auto;
	margin: 1rem 0 0;
	padding: 0 1rem 1rem;
	background-color: #fff;
}
section > h1 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
section > p {
	margin: .5rem 0 0;
}
#item_1 > p {
	word-spacing: normal;
}
#item_2 > p {
	word-spacing: 10px;
}
#item_3 > p {
	word-spacing: -10px;
}
#item_4 > p {
	word-spacing: 2em;
}
#item_5 > p {
	word-spacing: -2em;
}
#item_6 > p {
	word-spacing: 20%;
}
#item_7 > p {
	word-spacing: -20%;
}

<div class="samp_box">
	<section id="item_1">
		<h1>word-spacing: normal;</h1>
		<p>Text text text text. 連続する文字は変化なし。</p>
	</section>
	<section id="item_2">
		<h1>word-spacing: 10px;</h1>
		<p>Text text text text. 連続する文字は変化なし。</p>
	</section>
	<section id="item_3">
		<h1>word-spacing: -10px;</h1>
		<p>Text text text text. 連続する文字は変化なし。</p>
	</section>
	<section id="item_4">
		<h1>word-spacing: 2em;</h1>
		<p>Text text text text. 連続する文字は変化なし。</p>
	</section>
	<section id="item_5">
		<h1>word-spacing: -2em;</h1>
		<p>Text text text text. 連続する文字は変化なし。</p>
	</section>
	<section id="item_6">
		<h1>word-spacing: 20%;</h1>
		<p>Text text text text. 連続する文字は変化なし。</p>
	</section>
	<section id="item_7">
		<h1>word-spacing: -20%;</h1>
		<p>Text text text text. 連続する文字は変化なし。</p>
	</section>
</div>