【CSS】文字の間隔を調整するにはletter-spacingを使う

「文字の間隔を狭めたい！」

という時に有効なのが、letter-spacingプロパティだ。

単語の意味としては

• letter＝文字
• spacing＝間隔

なので、letter-spacing＝文字の間隔を調整するプロパティと覚えておくと良いと思う。

通常は使うことは少ないかもしれないけど、カタカナの文字を見出しに使う時が私はたまにある。

リニューアルオープン

という題名のページを作る時などに、

「文字間隔が広すぎだなぁ、、、」

と感じる時に使っている。

letter-spacingを使うと、↓のように

リニューアルオープン

見た目的に丁度いい文字間隔に調整することが出来るのだ。

コードの記述例は下記のような感じだ。

ちなみにemってのはfont-sizeの高さを１とする単位。

letter-spacing:0.1em　というのは文字間隔をfont-sizeの高さの0.1の幅空けるって意味だ。