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

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

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

単語の意味としては

• letter＝文字
• spacing＝間隔

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

通常は使うことは少ないかもしれないけど、カタカナの文字を見出しに使う時がプログラミング小僧としてはある。

リニューアルオープン

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

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

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

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

リニューアルオープン

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

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

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

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