Koodoz Design

Oh Internet Explorer, how you hate us so….

Even when we’re trying to do something good you create another headache. We did a post about the great @font-face property back in May having an issue with Firefox and we thought we were clear of the woods with IE, but of course, it’s never that simple…

Thanks to this fantastic article by Michael Strand at AllCreatives.net, we found the most comprehensive solution to this problem, and also to Tweek on Flickr for the awesome picture of the fridge magnets.

Keeping web design tidy

When we implemented @font-face for the Koodoz site we were really pleased with the results, we managed to drop the aging sIFR image replacement technique and therefore dramatically reduce the amount of flash elements being loaded on our site and in turn drop a whole bunch of server requests, as well as slimming our site down by a few precious kilobytes. Nice and (as they say in Cardiff) tidy!

Knit picking with aesthetics always pays off in the end

What we didn’t notice straight away was that Internet Explorer has a problem with rendering the new fonts. While developing the Cardigan Store e-Commerce website for one of our recent Melbourne based clients, Knit Picker, we implemented @font-face early to incorporate the stylish and contemporary headings from our original website designs. It looked great in Safari, Firefox, Opera and Chrome, but soon enough it was time for some good old fashioned, character building IE bugs, and we noticed that our lovely elegant fonts now looked incredibly jagged, broken and well… crap. Take a look:

So after a little research we found that the problem lies with an Internet Explorer feature called ClearType, which is ironically put there to make fonts appear clearer to read on Windows systems. The issue with this is that IE is therefore trying to render our nice looking headings in a way that strips it of all its nice aliasing and smooth edges — not great look for our website design. This actually does some good for body text on Windows machines but it’s completely counter-productive for headings and places where we want our font to display as-is.

The fix

Luckily there is a solution! It lies with IE’s filter properties, which, when applied to an element will disable ClearType. However, we can’t just apply any old filter, IE8 actually needs a filter that works with the text in order to do this. Here’s an example:

h1 {
	font-family: 'Nice-Embedded-Font', Arial, Sans-Serif;
	filter: progid:DXImageTransform.Microsoft.
AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);
    	zoom: 1;
}

The second property, zoom: 1; isn’t needed for IE8, but must be used for IE7 because of its hasLayout feature. What this basically means is that IE7 won’t apply a filter which is not flagged as having ‘layout’ applied to it. So by adding this property we can force IE7 to do so, and in turn recognise our filter property.

Smooth. Real smooth

The result isn’t 100% perfect, but then again, nothing ever is with IE. Lets take another look at the Cardigan Store headings:

Ahhh, that’s much better. As you can see the difference isn’t drastic, but the fonts are a little smoother and less rigged, especially on the ‘Account Login’ title, which is far closer the original website design and much more closely knitted (excuse the pun) into the overall branding of the company and website.