Avatar of Sara Cope
Sara Cope on (Updated on )

Try Mailchimp today. MailChimp Tracking Pixel

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 behavior.

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.

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 IE 10 support subpixel layout; Opera and WebKit do not. The patch has landed, so WebKit now supports subpixel letter-spacing.
  • 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 reset letter-spacing: normal; on the child elements.
  • It is rarely if ever a good idea to letter space lower case letters.

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Most Works Works Works

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.