word-spacingで単語の間隔を指定する【CSS】

word-spacingは単語の間隔を指定するプロパティです。

「normal」を指定すると、単語の間隔は調整されないので、フォント標準の間隔になるんですが、単位つきの数値を指定することで、単語の間隔を調整することができます。

word-spacingの指定方法

word-spacingプロパティでは単位つきの数値で単語の間隔を指定します。

単位に関しては、『CSSにおける長さ・大きさ・角度・時間の単位について【CSS】』の記事を参考にしてみてください。

文字間隔の数値には負の値、つまりマイナスの数値を指定することも可能です。

正の値を指定すると、単語の間隔は広がりますが、負の値を指定すると、単語の間隔は狭くなります。

以下はword-spacingプロパティを指定した例です。

If You Can Dream It, You Can Do It.
If You Can Dream It, You Can Do It.
If You Can Dream It, You Can Do It.

『text-transformで英字の大文字・小文字を指定【CSS】』の記事でも使いましたが、ウォルト・ディズニーの名言「If you can dream it, you can do it.（夢見ることができれば、それは実現できる。）」を例で使いたいと思います。

上記の例は、上から順番にword-spacingプロパティで「10px」、「1.2em」、「-5px」と指定したものです。

If You Can Dream It, You Can Do It.

標準の間隔だとこのような感じ。単語の間隔を広くしすぎたり狭くしすぎると、かえって読みづらくなってしまうので、微調整程度に使うのがいいかと思います。

ちなみに半角スペースが基準になるので、日本語の文章でも半角スペースが入る箇所にはword-spacingプロパティが適用されます。