The letter-spacing Property

The letter-spacing property is used to adjust the space between letters. The letter-spacing property reduces or increases the width of the em boxes of letters. Note that this property does not change the distance between the em boxes, which is always zero.

The letter-spacing property can be applied to any element. It can take length values and the keywords normal and inherit. It is an inherited property. The initial values is normal. A length of 0 is equivalent to normal. Negative values are allowed; they reduce the width of em boxes.

Note 1: The em box is the box that a glyph occupies.

Note 2: The letter-spacing property does not take percentage values.

Note 3: When the letter-spacing property has a length value, the letter spacing of the text cannot be changed by the text-align property.

letter-spacing with px values

The number of px declared in the letter-spacing declaration is the number of extra pixels of width added to the em boxes it is applied to.

Example 1a): <p style="font-family:'Times New Roman';font-size: 35px"><span>t</span><span>h</span><span>e</span> <span>t</span> <span>h</span> <span>e</span> brown fox @&Acirc;</p>

 

In the above example, there is no letter-spacing declaration, therefore the em boxes are of default width. The default em box sizes for the letter is "t" is 10px, "h" is 18px, and "e" is 15px.

Example 1b): <p style="font-family:'Times New Roman';font-size: 35px;letter-spacing: 10px"><span>t</span><span>h</span><span>e</span> <span>t</span> <span>h</span> <span>e</span> brown fox @&Acirc;</p>

In the above example, the width of the em boxes of the <p> and its descendants have been increased by 10px. Therefore, the width of the em boxes are: "t" 20px, "h" 28px, and "e" 25px.

Example 2: <p style="font-family:'Times New Roman';font-size: 35px;letter-spacing: -3px">the <span>t</span> <span>h</span> <span>e</span> brown fox @&Acirc;</p>

In the above example, the letter-spacing value is negative. This results in the following em box widths: "t" 7px, "h" 15px, and "e" 12px.

letter-spacing with em values

When letter spacing is declared in em, the em value is multiplied with the font-size to give the number of pixels that are added to the width of the em boxes in the element.

Example 2: <p style="font-family:'Times New Roman';font-size: 35px;letter-spacing: 0.5em"><span>t</span><span>h</span><span>e</span> <span>t</span> <span>h</span> <span>e</span></p>

In the above example, the declared em value (0.5em) is multiplied with the font-size to give 17.5px (0.5 * 35). This is added to the width of the em box. This results in the following em box widths: "t" 28px, "h" 36px, and "e" 33px.

However, Internet Explorer 6 and Internet Explorer 7, calculate em letter-spacing declarations to a much smaller value due to a bug.

letter-spacing:normal

letter-spacing:normal restores the em box width to the default sizes. Since letter-spacing is an inherited property, the normal keyword can be used to restore the default letter spacing in an element that has inherited a modified letter spacing declaration.

letter-spacing:inherit

letter-spacing:inherit is used to override another letter-spacing declaration that has been applied to an element, and to restore the default behavior of inheriting the parent element's letter spacing.

Internet Explorer 6 and Internet Explorer 7 do not support letter-spacing:inherit, they ignore it.

Conclusion

For consistent results in all browsers, letter-spacing with em values should be avoided (Internet Explorer 6 and Internet Explorer 7 calculate them incorrectly).

letter-spacing:inherit should also be avoided because Internet Explorer 6 and Internet Explorer 7 do not support it.

letter-spacing declarations in px are supported in all browsers and is therefore the recommended way of using the property.