web developer

aaron's picture

IE's CSS does letter-spacing stupidly

I know most of my readers (all 2 of you) will probably stare blankly at me over this topic, (I guess this is mostly for the search engines) but IE continues to piss me off, and I need to tell SOMEONE.

Today's problem is IE7's math, and their implementation of kerning. (having wiki'd that, I see I may be talking about tracking, but who cares.)

In css, you use a parameter called letter-spacing to change kerning on things. As with all other css, you can specify the units you want to use as pixels, points, percentages, or em. (there are others.)

An em is essentially the width of a standard 'M' character in your font of choice. For IE's mathematical purposes, it's a percentage of the font size you specified elsewhere.

So if I have a font-size: 12px; for my entire document. I can make my headers: font-size: 1.5em; and they will be displayed 150% of 12px. (18px)

So.. an example.

i'm letter-spacing of 1 em

if you're using any recent browser, that should look all spready...

Now.. I rarely need massive letter spacing like that... (though it does come up.) More often than not, I get handed a nice layout from a pro graphic designer that has text in it that is crammed together, ever so slightly, but it really does change the look of certain things.

in IE.. the best you can do for 'ever so slightly' is this:

i'm letter-spacing of -0.05 em... the quick brown fox.. yadda yadda
i'm letter-spacing of -0.00 em... the quick brown fox.. yadda yadda

that's not so bad in trebuchet or whatever the hell i'm using here, but in an italic serif font, it looks pretty tight. Now, IE can take any unit ABOVE .05.. (or 5%).. which.. in negative kerning terms.. isn't too useful.. but I sleep well at night knowing that I can always choose to do something like:

Syndicate content Syndicate content