My recent post on fixing ClearType issues in IE7 and IE8 sparked some great conversation and in the process educated me a lot further on the existing pittfalls of @font-face embedding.
My original fix, like many, was born out of pure necessisity. I needed a solution to allow me to present smoother embedded type faces for Internet Explorer. What I found, I shared and hopefully it’s been of much to use to people.
Despite being able to disable ClearType in Internet Explorer it would seem there is no way to do the same in Firefox or Safari. This leaves an issue in Windows Vista and Windows 7 as they have ClearType forced on system wide by default unlike Windows XP. Dependant on your Firefox/Safari visitor percentage this may not be an issue. Some fonts do however fare better …
A major factor in how well your font face will render under ClearType is to do with how well the font is hinted. Some are good, some are bad and some just aren’t ready or were never intended to be rendered on screen using embedding techniques. Again the only real way to determine this is by thorough testing. Font Dragr is a fantastic tool for quick testing of fonts and how well they embed. Also be sure to take a look at Front Friend.
Unfortunately there isn’t anything that can be done right now for Firefox and Safari in terms of disabling ClearType. The key at the moment is selecting a well hinted font face and tireless testing. Experimenting with text-shadow has produced mixed results for me but I’d definitely recommend you give it a try. It may help alleviate some of the jagged nastiness should you come across it. For this you may also want to look into detecting if font smoothing is actually being applied on your visitors machines. There’s a great piece of Javascript that you can use for this here.
As always there are people and organisations already working towards fixing these issues. More and more fonts are being reworked and properly hinted for embedding purposes. Below I’ve outlined two other solutions/advancements that may be of interest.
CSS 3 – font-smooth
A little known part of the CSS 3 specification and as of now completely unsupported by any browser is the CSS font-smooth property. Reasons why this is unsupported could and probably are complex and varied. This being implemented even just in Firefox could be a godsend for front end developers dealing with the issues mentioned in this post. See more about font-smooth here. As yet there hasn’t be any news of when and indeed if this will ever be supported by browser makers.
DirectWrite rather than GDI
This advancement is a little more technical than a simple CSS property but does look promising. This tip comes courtesy of Charles Roper in the IE7/8 ClearType fix article comments.
From what I understand, at present ClearType is currently implemented using a GDI technology which isn’t great at anti-aliasing the Y-axis of embedded font faces. An innovate alternative which is currently planned for use in FireFox 3.7 and Internet Explorer 9 using DirectWrite improves substantially on this. Some writeups and examples are presented at the links below:
Also interestingly a browser using DirectWrite over GDI can use a fix to disable ClearType. I’ll post more on that at the time. At the moment both Firefox 3.7 and IE 9 look a while off.
If you have anything to add to the above please feel free to add in the comments.
