Irregular Font Letter Spacing in IE11

Letter spacing in Internet Explorer 11 will sometimes appear completely irregular with some letters having more white space on their right hand side than other letters.

For example, I was seeing horrible letter spacing problems in an ASP.NET 4.0 Web page that I had running on Windows Server 2012. The page would render nicely when I ran it on my local machine, but as soon as I would move it to the Windows 2012 server and browse to it with IE11, I would see the most awful font problems cropping up. Some letters in a word would have no space between them with the letters looking merged, while others appeared to have 4 or 5 pixels between them; basically rendering any carefully crafted pages unreadable.

What didn’t work:

For starters, I tried altering the HTML page’s Doctype declaration between XHTML 1.0 Transitional and HTML5, but this had no effect whatsoever.

Then I tried adjusting the CSS properties: font-family, letter-spacing, and word-spacing without any luck. Basically it appeared to be an error in the font-defention file itself. Here is an example of the test page I was working with and testing my settings out on:

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
 <style type="text/css">
 body
 {
 font-family:@Arial Unicode MS;
 letter-spacing:1px;
 word-spacing:2px;
 }
 </style>
</head>
<body>
 <form id="form1" runat="server">
 <asp:Label ID="Label1" runat="server" Text="Here is example text that should give you an idea of how the font rendering in IE11 was messed up."></asp:Label>
 </form>
</body>
</html>

What did Work

After trying every fix I could think of, I finally stumbled onto a fix that worked: adjusting IE11’s security settings for the Web site. It is crazy to think that security settings might result in font rendering problems, but that’s exactly what turned out to be the case.

Bottom line is that what fixed my font-spacing problems in IE11 was to add the Web site as a trusted site:

  1. Open up IE11
  2. Click on Tools on the top menu bar
  3. Click on Internet Options
  4. In the Internet Options popup, click on the Security tab
  5. Then click on the Trusted sites button titled Sites
  6. In the Trusted sites popup (if necessary) uncheck the checkbox labeled Require server verification (https:) for all sites in this zone
  7. Then add your site’s base URL in the textbox labeled Add this website to this zone (for example: http://example.com)

When you’ve added your site to the trusted sites list, you should see that the letter spacing problem is now fixed. If the site is on your local intranet, you could also try setting your Local Intranet Sites option to: automatically detect intranet network, which would accomplish the same thing as adding the site to your trusted sites list.

I hope this article helps save time and effort for anyone experiencing a similar issue. If simply adding the site to your trusted sites list doesn’t immediately fix the letter spacing problem, then I would suggest that you need to update a particular setting that is configured in the Security Settings for sites in your Trusted Sites Zone. I have a suspicion that might be the setting to Enable Font Downloads, but I have not been able to confirm this for sure.

Advertisements

8 thoughts on “Irregular Font Letter Spacing in IE11

  1. I figured this out tonight, it’s because IE offers “Tools\Compatibility View Settings” and the default setting is “Display intranet sites in compatibility view”, and when compatibility view is enabled against a site which uses Arial font, it screws up the kerning (particularly the letter w), you can really aggravate the problem by setting the zoom above 100%. When you move the site to Trusted, it falls out of the “Intranet” compatibility view bucket, and renders “Edge” with no issues, give it a try.

  2. Hi Have you tried using meta tag with below content:
    http-equiv=”X-UA-TextLayoutMetrics” content=”natural”
    That worked for me.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s