Ie9 Letter-Spacing Problem

Letter spacing issue, two letters stick together despite adding letter spacing

Solved. It is ligarature issue. Found this article with following css as solution.

  -webkit-font-feature-settings: "liga" 0, "clig" 0;
     -moz-font-feature-settings: "liga" 0, "clig" 0;
          font-feature-settings: "liga" 0, "clig" 0;

Random letter spacing when using font-face

Changing this:

html, 
body
{
    line-height: 1;
    margin: 0;
    padding: 0;
    font: 15px Chocolat, Arial, Helvetica, sans-serif;
    color: #000000;
}

to this:

html, 
body
{
    line-height: 1;
    margin: 0;
    padding: 0;
    font: 15px Chocolat;
    color: #000000;
}

So just the font: line, seems to have fixed the issue.

I'm guessing IE8 must be doing some initial layout calculations using one of the fallback fonts, probably Arial, and then trying to adjust (in a bad way). I would have assumed that if it was the very first page load, but that isn't when it happens. It happens at some almost random time after that. I was able to recreate everytime with these steps before I applied the fix:

1. Open main page -- at this point fonts looked pretty good, maybe slightly smaller than they should be.

2. Click link on main page that just reloads same page (didn't happen if I used F5 to refresh).

--at this point, fonts looked really bad, like my example above

1. Click same link again

--at this point fonts looked perfect

I could close and reopen the browser, or just hit F5, then repeat the above steps over and over with same results every time.

Changed the one line in the CSS, and now unable to recreate.

IE 9 does not use sub-pixel antialiasing under certain conditions

It seems setting opacity:.9999 on body renders the text in IE9 standards mode a lot more similar to how it does in Quirks mode.

Odd effect of letter-spacing on element width

The Behavior

I agree that the spec states this fairly explicitly. To quote this page:

Letter-spacing must not be applied at the beginning or at the end of a
line.

However, this fiddle on Win 7 is showing me that on Chrome, IE9, and Firefox, all are applying one less pixel after the last letter (Firefox is showing me to start out with one less pixel to begin with in the gap to the border), which seems to be in violation of it not being applied to the end of the line. The result being that all appear to be reducing total width by 1px per character in the string.

So it does not appear that it works as is should in any browser, nor does it matter if the letter-spacing is instead a positive number.

Probably the "Best" Workaround

Add padding-right: 1px to the span with letter-spacing: -1px to offset the problem as seen in this fiddle.

Optional Workaround: :after pseudo-element

On the span with letter-spacing: -1px put the following as seen in this fiddle:

span:after {content:''; display: inline-block; width: 1px;}

Final Thought

Either solution above may or may not help with differences in text-align: center calculations, as that appears to partially depend on the 1px rounding for center based on the display width, as seen when one stretches the width of this fiddle).

@font-face displays different letter-spacing for different files

There isn't enough detail in your question to understand the issue. The browsers do use the font's internal spacing. It is not 'different' depending on where it is shown.

That said, the hinting applied to a font can influence its display on Window's browsers as it tries to fit the font outlines into the pixel grid. By doing this, the whole font can grow/shrink horizontally as it tries to fit in the grid. I have seen that.

Could this account for what you are seeing? Otherwise I'd like to see side-by-side screenshots so I can understand what it is you are talking about.

---

Related Topics