Grow your CSS skills. Land your dream job.

letter-spacing

Last updated on:

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.

Check out this Pen!

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

Comments

  1. Christopher Mischler
    Permalink to comment#

    Looks like subpixel letter-spacing made it into Chrome. Idk what version it was added, but it’s working as of 30.0.1599.101. Unfortunately it’s specific to the Blink engine (not WebKit) so it still doesn’t work in Safari (at least as of 6.0.5; I’ll have to test it on 7/Mavericks when I get home).

    With Chrome, IE & Firefox all supporting it, it’s pretty standardized at this point, which is great. The difference between 1px and 0.5px at small font sizes is huge.

  2. ‘It is rarely if ever a good idea to letter space lower case letters.’

    I’m just curious as to why you say this, can you give any good/bad examples? What about headings in lower case?

    Thanks

  3. Jesse
    Permalink to comment#

    Perhaps noteworthy: recently I’ve run into the experience where ‘letter-spacing’ is affecting the padding within the element. I was not aware that it should be doing that. This is the CSS I’m using; I hope I’m not confusing the issue with something else going on.

    nav li {
        margin: 0 5px;
        padding: 7px 10px;
        font-size: 0.9rem;
        letter-spacing: 0.6px;
    }
    
    • Cameron
      Permalink to comment#

      I’ve also got this issue. Letter-spacing appears to add a bit of space to the end of the word on the right. In box-model terms, it’s the element itself (i.e. not margin or padding) which is proving to be a bit of a problem.

    • Melanie
      Permalink to comment#

      Wouldn’t box-sizing: border-box; resolve the issue?

    • Chris
      Permalink to comment#

      Just stumbled on a similar issue myself.
      I’ve done a bit of testing and it seems that that last letter also generates the letter-space which creates the visual imbalance in the layout.
      I found this simple workaround to correct things:

      h2 {
      font-family: ‘Oswald’, sans-serif;
      font-size: 1.25em;
      text-transform: uppercase;
      color: #dca013;
      font-weight: 300;
      letter-spacing: 1em;
      padding: 0 0 0 1em; /* compensates for the extra spacing */
      }

      (although my instinct suggests it should be .5em)

  4. T4NK3R
    Permalink to comment#

    Remember to test (especially negative) letter-spacing in different browsers. Firefox and Chrome render spaced text quite differently : (

  5. Hani
    Permalink to comment#

    I’m not sure that parent-relative values work for letter spacing. I’m trying to figure out how to make a line of text’s letter spacing responsive to the width of its container and a percentage isn’t working. Any tips? (I may have to go with some javascript to resolve it.)

  6. Maybe a combo of text-align: justify and letter spacing?

    • Permalink to comment#

      Well, the problem with that if letter spacing is static, it loses the ability for it to be truly responsive to the width of the container. I ended up wrapping each letter in a and defining a width of 4% on each character. (There’s 25 characters = 100% width). Seems to work out just fine. Although, I do lose the SEO benefit for that string of words. I suppose I can use javascript to wrap each character with a on page load to regain the benefit.

  7. Permalink to comment#

    Oops seems like the word “span” encased with “less than” and “greater than” symbols got stripped in my last comment. That’s what I get for not previewing before posting. Anyway, I wrapped each of the characters with a “span”.

  8. asdasdfasdfasdfasdf
    Permalink to comment#

    (however, a patch for Webkit support was submitted 10 months ago. Current status is unknown, but it is coming.)

    With DirectWrite enabled for everybody since chrome 37, chrome now also supports sub-pixel values for letter spacing and font-size. However, at the moment end-users can disable direct write in chrome://flags if they desire.

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".