【CSS】字間の調整 letter-spacing

目次

letter-spacingプロパティとは

CSSのletter-spacingプロパティを使えば、文字と文字の間隔(字間)を調整できます。値はnormalが初期値になっていて、pxやemでも指定できます。

letter-spacingプロパティは、字間を調整して文字を読みやすくしたいときや、タイトルなどの装飾としても使われます。

読みやすい字間

まずはletter-spacingを指定しない場合の見え方を確認してみます。

これでも普通に読むことはできますが、少し字間が詰まっていて窮屈な印象を受けます。

↓次の例ではletter-spacingを0.8pxにしてみました(※数値を小数で指定する場合は、最初の0は省略できます)。


字間に余裕ができて、ストレスなく読めるようになったかと思います。

また、字間を空けすぎると文字がスカスカに見えてしまうため、フォントの種類やサイズにもよりますが、微調整しながら適切な字間を見つけましょう。目安としては、フォントサイズが16pxのpタグであれば、0~1.2pxあたりがいいのではないでしょうか。

字間を調整してタイトルをおしゃれに

例えば、下のバナーのようなものを作ったとします。しかし、これだとデザインとしてはいまいちな気がします。

↓letter-spacingを10pxにしてみると、それらしいものができました。

こういった感じで、字間を調整するだけでも文字に違った雰囲気を出すことができるので、ぜひletter-spacingの使い方は覚えておきましょう。