CSS letter-spacing

The CSS letter-spacing property is used to increase or decrease the spacing between text characters. It's inherited and applies to all elements.

letter-spacing: length
letter-spacing: 0;        /* default spacing */
letter-spacing: 0.2em;    /* separate characters */
letter-spacing: -0.1em;   /* bring characters together */

Positive values increase spacing and negative values decrease it. The length is added to the normal spacing.

Browser Support: Full, letter-spacing is supported by all major browsers.

Spacing in Relative Units

Use em and rem units for letter spacing to scale with font size:

div.cont {
font-size: 2em; letter-spacing: 0.2em;
The letters in this text are spaced 0.2em more than normally.

Negative letter-spacing

Negative values cause the letters to be closer together:

div.cont {
font-size: 2em; letter-spacing: -0.05em;
The letters in this text are spaced 0.05em less than normally.

How letter-spacing Works

Rather than actually spacing the characters, what letter-spacing does is adding/substracting to the characters width.

What this means is that if letter-spacing is positive, CSS adds some whitespace to the right of each letter. It is noticeable in the last letter of inline elements:

Each character has some whitespace to its right

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>