letter-spacing

The letter-spacing property controls the amount of space between each letter in a given element or block of text. Values supported by letter-spacing include font-relative values (em, rem), parent-relative values (percentage), absolute values (px) and the normal property, which resets to the font’s default.

Using font-relative values is recommended, so that the letter-spacing increases or decreases appropriately when the font-size is changed, either by design or by user behaviour.

p {
    /* 16 * 0.0625 = 1px */
    letter-spacing: 0.0625em;
}

The most important point to note when using letter-spacing is that the value specified does not change the default, it is added to the default spacing the browser applies (based on the font metrics). letter-spacing also supports negative values, which will tighten the appearance of text, rather than loosening it.

<p>This type has no additional letter-spacing applied.</p>

<p class="loose">This type is letter-spaced loosely at <code>2px</code>.</p>

<p class="tight">This type is letter-spaced tightly at <code>-1px</code></p>

.loose {
  letter-spacing: 2px;
}
.tight {
  letter-spacing: -1px;
}

Points of Interest

• Subpixel values: in most browsers, specifying a value that computes to less than 1px will result in no letter-spacing being applied. Currently Firefox 14+ and IE10 support subpixel layout; Opera and Webkit do not (however, a patch for Webkit support was submitted 10 months ago. Current status is unknown, but it is coming.)
• The letter-spacing property is animatable with CSS Transitions.
• One of the ways to fight against the space between inline block elements is setting letter-spacing: -4px; on the parent container of inline-block elements. You will then need to resetletter-spacing: normal; on the child elements.
• It is rarely if ever a good idea to letter space lower case letters.

Related Properties

• word-spacing

Browser Support

A note on mobile browser support: some versions of Opera Mobile, non-standard Webkit implementations, and the NetFront browser do not support letter-spacing. The specifics are detailed in the QuirksMode link above.