テキスト

letter-spacing

letter-spacing は、文字と文字の間に足す空きを指定します。負の値にすると詰まります。

構文

normal | <length-percentage>

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  letter-spacing: 0.2em;
}

letter-spacing0.2em

0.1em のように em で書くと、文字の大きさに対する割合になるので、font-size を変えても見た目のバランスが保たれます。px で書くと、小さい文字ほど空きが目立ちます。初期値の normal はフォント本来の間隔です。

空きは各文字のうしろに足されるので、行の最後の文字のあとにも付きます。text-align: center で中央にそろえると、そのぶん左に寄って見えます。気になるときは、同じ量の padding-left を足してつり合わせます。

日本語の見出しを詰めたいときは、全体を一律に詰める letter-spacing より、フォントに入っている文字ごとの詰め情報を使う font-feature-settings: "palt" のほうが自然に仕上がることがあります（対応しているフォントだけ）。