CSS letter-spacing bug in IE7 and solution

A very good and scalable way to set letter spacing in CSS is by using ’em’s as it works relative to the font size. If you for example specify letter-spacing = 0.2em the letter spacing will stay proportional even though you change the font-size. You can easily set the letter spacing for the entire site in all font-sizes.

The ’em’s works exactly like ‘tracking’ which many designers work with. To convert tracking to em just divide it by 1000. That is x em = tracking y / 1000. For example tracking 200 equals to 0.2em.

The definition of 1 em is the size of the character M in the current font size. So 1 em for a font-size of 10px equals to 10px. 1 em for a 24px font size is 24px.

It is very practical to use ’em’s to specify the letter-spacing as it is proportional to the font size. For small ’em’s however, Internet Explorer 7 (IE7) seems to round the values making the letter spacing appear wrong. It works alright in other browsers as well in IE8.

A workaround is to convert the letter spacing to pixels for your current font-size. The drawback is that you have to calculate it for every font-size you are using. And if you change a font-size you must recalculate the letter spacing.

The calculation is really simple. Just multiply the font size in pixels with the letter-spacing in ’em’s and you will get the letter spacing in pixels. If you have a font size of 16 pixels and want a letter spacing of 0.2em (which is equal to a tracking of 200) you do: 16px x 0.2em = 3.2px letter spacing.

Examples using 0.2em (tracking 200):

#mysize16
{
font-size: 16px;
letter-spacing: 3.2px; /* 0.2em x 16px = 3.2px */
}

#mysize24
{
font-size: 24px;
letter-spacing: 4.8px; /* 0.2em x 24px = 4.8px */
}