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.


  1. User Avatar
    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. User Avatar
    Fizz Web Design
    Permalink to comment#

    ‘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?


  3. User Avatar
    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;
    • User Avatar
      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.

    • User Avatar
      Permalink to comment#

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

    • User Avatar
      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)

    • User Avatar
      Permalink to comment#

      Got here from a google search of letter-spacing. Chris’ hack seems to work nicely!

    • User Avatar
      Permalink to comment#

      Chris’ solution didn’t work for me since I had a border around my text (a button) as well – so I added a “text indent” instead using this bit of css: text-indent: 15px; Obviously replace the 15px with whatever value your letter spacing is. Works great.

  4. User Avatar
    Permalink to comment#

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

  5. User Avatar
    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. User Avatar
    fizz web design
    Permalink to comment#

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

    • User Avatar
      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. User Avatar
    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. User Avatar
    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.

  9. User Avatar
    Permalink to comment#

    “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”

    Nitpicking, but I think a better way to say this would be “does not replace the default” rather than “does not change the default”.

  10. User Avatar
    Permalink to comment#

    Does anyone know what 100 A/V or 200 A/V equivalent in indesign is in css or in wordpress? I’m trying to communicate with my programmer and she says she doesn’t understand 100 or 200 A/V, I need to give her the numbers in wordpress language.


    Thank you!!!

  11. User Avatar
    Muhammad Imran Nazish
    Permalink to comment#

    Thank you for the help.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.