Comments on: Smoother @font-face embedding in IE 7 & 8

By: tanya singh

tanya singh — Tue, 19 Jan 2010 08:45:42 +0000

awesome dude, thanx

By: Sara

Sara — Fri, 18 Dec 2009 13:45:45 +0000

That is just awesome!
You are my hero for figuring this out!

By: Jason

Jason — Mon, 14 Dec 2009 16:42:47 +0000

eeeeeh and here I was thinking there was no fix for this! Thank you!

By: zhangxinxu

zhangxinxu — Sat, 12 Dec 2009 20:23:29 +0000

It’s really a very nice post. I decide to translate it.

By: Jonas

Jonas — Fri, 11 Dec 2009 11:26:34 +0000

Thanks a billion for this post. I remember the Microsoft’s ClearType functionality to be a monkey on my back a couple of weeks ago. Didn’t fix nor touch it since.

By: max

max — Fri, 11 Dec 2009 02:51:52 +0000

Nice find, good to see the it’s an easy fix too.

By: Alex

Alex — Thu, 10 Dec 2009 13:34:38 +0000

DirectWrite produces much nicer results than GDI, but the problem isn’t so much in the anti-aliasing, as it is in the hinting.

http://localhostr.com.nyud.net/files/425a76/allcreatives%20-%20DW.png

DirectWrite still has certain throwbacks to GDI style rendering (look at the D in December), but once you go outside those limitations text is absolutely beautiful (A cheap hack to disable font hinting for DirectWrite is to apply a very small rotation to the text, 0.0001 degrees is enough to disable hinting but will keep the baseline alignment).

h1,h2,h3 { -moz-transform: rotate(0.0001deg); }

Although the only proper way to bypass hinting, is to remove the need for it all together, If the device rendering the text was a higher density (most PC screens are around 100dpi, my printer is 6 to 12 times higher than that) then you wouldn’t need to hint at all, and hinting would actually worsen the shape of the glyphs in that case.

As for the font in the demo, I just don’t think it’s hinted very well, the bottoms of the glyphs seem to pull down to the base line, producing square bottoms, disabling hinting instantly produces a nicer result.

By: Mike

Mike — Sun, 06 Dec 2009 22:20:04 +0000

Sorry James, crossed wires there I think. I was actually replying the second James’ comment but regardless the extra info is still appreciated.

By: James Puckett

James Puckett — Sun, 06 Dec 2009 21:22:40 +0000

Really, Mike. But that doesn’t mean it’s going to stay that way. Right now foundries are all backing up the queues of hinting professionals (there aren’t many people who can hint TrueType fonts cost-efficiently) to get their fonts ready for web use with IE. And people are also starting to convert autohinted PS fonts to TT fonts (it works really well with light weights and sans type). But OTOH, Microsoft seems to be moving to Directwrite rendering for IE 9, which (I think) means that IE 9 will be able to render all forms of hinted type effectively. How this will all fall out in the next few years is quite unpredictable, so web developers should make sure that their code will be easy to change down the road!

By: Mike

Mike — Sun, 06 Dec 2009 19:57:06 +0000

To all, thanks for the feedback and interest, some really good information being collected here and I’ll be reading through it all and see if there any improvements to be made on the existing fix.

@Vladimir Carrer – I agree and I think I mentioned in the post that under normal circumstances disabling ClearType is not advisable that’s why this fix only targets elements containing embedded fonts.

@Charles Roper – This is an issue with ClearType being enabled system wide when embedding TTF’. Strangely ClearType doesn’t cause any issues when embedding OTF. I’m looking to write a follow-up post on this subject with hopefully a further fix this week. Also thanks for the links I’ll be sure to check them out.

@James – Really? This sounds very promising I’ll be sure to do some testing and see if anything can be done with a simple font-weight property. Quite honestly it’s something that I haven’t seen suggested anywhere else.

@Dan – Please see my response to Charles Above.