IE9 letter-spacing problem

W

9

18

I have a page that renders ok, in FF (3x, 4x), Chrome, IE (6, 7, 8).

When tested on IE9 the texts are wider. Investigating the problem it appears that the text is actually rendered whith letters more spaciated than in other borwsers.

When changed the letter spacing to -0.6px the texts was rendered ok, similar to other browsers. Also when changed the render mode to "Compatibility view", the page looks just fine.

Do you know what caused the change in the render mode?

I "solved" the issue using the conditional comment, but I'm not very happy about it

<!--[if IE 9]>
<style>
    * {letter-spacing: -0.6px;}
</style>
<![endif]-->

Does any other methods exists to solve the problem?

Edit

I made a few screenshots on different machines and different browsers and the result can be seen here

As you can see, on different machines with different browsers the result is the same. The only one that renders differently is IE9 in standard mode. the source page is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
    body {margin:0;padding:0;}
</style>
</head>
<body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc semper.
</body>
</html>

Wardrobe answered 1/4, 2011 at 10:33 Comment(6)

Can you show a live example of this? It may well be down to font specifics. What kind of font are you using this with? – Middy 1/4, 2011 at 10:35

Doesn't answer your question but just wanted to point out that IE 7 and below round letter-spacing to the nearest whole pixel value. – Vivisect 1/4, 2011 at 10:43

The letter spacing is called "kerning" in typography. IE9 has indeed changed its font rendering engine from IE8. The rendering varies depending on the screen dpi and font size, anti-aliasing amount and probably also whether ClearType is used. So be careful to judge from just looking at your own screen. It will look different on other screens. – Halter 1/4, 2011 at 11:24

#5427815 #5559273 – Quintinquintina 13/4, 2011 at 8:57

@Vivisect Yep I was going to say about whole pixels - I also think doing 0.6 of a pixel in general is just wrong. How can you have half a pixel...(and yes I know about antialiasing in fonts using partial pixels). – Platinocyanide 16/8, 2011 at 20:53

Are you used reset css? because solve and change some default setting(this is suggestion - not sure...) – Allerie 16/11, 2011 at 7:44

S

4

It may have to do with rounding up/down. Using tenths of a px is a strange thing to do since you can't get less than a whole pixel on a screen unless you know how the rounding will go. You can't rely on IE to get anything right anyway.

Suicide answered 1/4, 2011 at 12:56 Comment(0)

G

4

Try this as this work with Internet Explorer 8 and Firefox:

letter-spacing:0.49px;
letter-spacing:0.88px !ie;

MSIE will floor the first letter-spacing to 0px and ignore the second rule. Firefox will read the second rule and use it instead of the first rule.

Then, to compensate, you can use the same trick and add more horizontal padding to your text in MSIE that what you give to in Firefox.

Of course, make further tests with other browsers!

Gymnastic answered 1/1, 2012 at 18:21 Comment(0)

K

3

Another thing to consider now that it's been seven months since you asked this question is that starting in June 2011, version 5 of FireFox began a rapid release schedule. They are now up to version 8 and as a quick test, I see that version 7 and 8 of FireFox both render text nearly pixel-perfect with IE9. Chrome seems "squished" by comparison as the kerning is much tighter and the clear-type rendering in Chrome (to my eyes) is harsher than both IE9 and FF7/8.

You're not going to be guaranteed cross-browser matched font rendering, let alone cross-platform. All the browsers I looked at default to (on Windows) Times New Roman, 16pt text for "normal" display. If your application requires rendering of text to the level of matching for all users, all browsers, all platforms, then render it as an image and cache it.

Kine answered 16/11, 2011 at 7:13 Comment(0)

D

1

Try setting the letter-spacing value firmly for whole document, so it will display same in IE and FF.

Dann answered 19/10, 2012 at 17:44 Comment(0)

Y

1

This is also happening to me in IE8 for some reason. Neither decreasing the font-size or setting a letter-spacing solved the problem.

In another thread, I saw that this might be related to font-face. Unfortunately I haven't found a solution yet, but as soon as I find it, I'll post it here. May not help you at this time, but it may help the people who access this question later.

Yeseniayeshiva answered 23/1, 2013 at 13:18 Comment(2)

It would be more helpful if you could supply a link to the article you referenced. Please be sure to come back and post an update. – Rriocard 23/1, 2013 at 13:36

Ok. Sorry for not providing them. I found similar problems in these questions: #13831470 and #2691315. I managed to solve this problem with the first answer of the latter question, which is to regenerate the font-face and check the option Remove Kerning. Of course, I couldn't see your link to see if the problem is the same as mine, but I hope this helps. – Yeseniayeshiva 23/1, 2013 at 13:52

B

0

I have always found that the most useful way to set font size across browsers is using em not px values.

I tend to set up the base point in the body tag in CSS:

font-size: 62.5%

Then whenever I wish to set a font size I use an em value such as:

font-size: 1.1em;

This equates to 11px. The advantage I have found is that it renders more consistently across browsers and also resizes better using the browser resize controls.

Give this a try - I think it should solve your problem.

Thanks nathj07

Berndt answered 1/4, 2011 at 10:33 Comment(0)

S

0

humeniuc

Are you sure that youre using the default font face or using some different ? This may cause the probl

Scyphozoan answered 23/7, 2011 at 6:56 Comment(0)

B

0

You can reference the article by Microsoft. may be the problem because by Text Rendering

Bartko answered 15/11, 2011 at 13:44 Comment(0)

A

0

Afraid I don't have IE9 on this machine - will try and look again tomorrow on a PC that does, but my immediate thought is that the w3c validator says your HTML is invalid.

It doesn't like the fact that your text is directly in the BODY and isn't in some other container. I just wondered if that was the issue? Perhaps the other browsers are 'correcting' on your behalf and assuming a paragraph container.

Does the appearance change if you put the text inside a paragraph or a DIV?

Alleluia answered 21/11, 2011 at 21:2 Comment(0)

Recommended topics

Hot tags