Web Typography is coming a long way with the use of @font-face. We are finally able to break out of system fonts and have options! Unfortunately, font-rendering on IE/Windows is still sub-par. The rendering engines have a hard time interpreting fonts properly that are embedded with @font-face that have yet to be re-crafted as a web-font version.
I have been using Typekit to render my web-fonts since the service became available. It is an incredible and takes away a lot of the headache in embedding, keeping up with browser/mobile compatibility, etc. If you haven’t tried Typekit out, you can get a free account to see if you like it – then upgrade if you decide you’re in love. <3
I’ve noticed that sometimes the fonts that I’ve chosen can end up so “crunchy” in IE that I would rather just stack my fonts to the closest system font, and disable Typekit for Internet Explorer.
Here is a way you can Enable it for just Mac: you can query the user agent header with php in a conditional statement that wraps around your Typekit js:
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], "Mac", 0) !== FALSE) { ?>
<script type="text/javascript" src="yourtypekitlink.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<?php } ?>
Don’t want to exclude Linux? Disable it for Windows Only:
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], "Windows", 0) === FALSE) { ?>
<script type="text/javascript" src="yourtypekitlink.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<?php } ?>
Here are examples of type crunch in a title:
LTC Bodoni Type Crunch in IE (eww!)
LTC Bodoni on Mac with Typekit (perfect!)
Typekit disabled on IE / reverts back to font stack
Here are some more examples with a different font:
typekit on mac: Ltc Bodoni and Proxima Nova (perfect!)
Typekit enabled on Windows (crunchy! Eeek!)
typekit disabled on windows (better than the crunch.)
Interested in browser-specific disabling? These methods might be interesting to look into: (but I haven’t done it yet)
http://davecardwell.co.uk/javascript/jquery/plugins/jquery-browserdetect/
http://rafael.adm.br/css_browser_selector/
PS: Firefox achieves the same screen-shots as IE. Interesting.
Sara,
I think you just coined a new phrase, "Type Crunch." I will be using that from now on. Type crunch happens in Typekit because not all their fonts are hinted, or hinted properly. Since Windows relies heavily on the font hints for rendering, most fonts will break down in the browser. The ones that look so good on screen were developed with hundreds of hours of tedious hinting.
Anyway, you can get about 80-85% of the way there with a good autohinter. The Font Squirrel fonts are autohinted and look pretty good in most instances.
We're all hoping that Microsoft get their act together and takes the burden off the font developers by propagating a decent rendering engine like Apple has done. IE9 and Firefox 4 will thankfully be using a new one that looks pretty good, even with unhinted fonts.
Thanks so much for the comment Ethan!
I would love to take a look at a website that uses a Font Squirrel version of Proxima Nova or LTC Bodoni to see the difference with the hinting. (know of any examples?)
I know that some Typekit fonts have been web-optimized (I guess by foundry) and I'm sure it will help their users greatly if they marked all those on the site. (Type Crunch Avoidance!)
All in all what I think is pretty great about all of this is we can finally have incredible fonts.. and we can support our foundries in the process!
…Now if only Hoefler & Frere-Jones would let us pay them for web font licensing…
Sara
Do you happen to know if the Crunch happens if they've got font smoothing enabled? This nasty edginess seems to happen even with web-safe fonts like Georgia. Can't believe how many times I've had to explain that to clients who freak out when they see their sites on old clunky PCs.
@Jesse – IE7 & IE8 use ClearType in the browser. So, even if your system setting has ClearType turned off, you will see ClearType rendering in IE.
@Sara – As for Proxima Nova, you can see what an autohinted version looks like on our sister site Fontspring:
http://www.fontspring.com/fonts/mark-simonson-stu…
Just click on the @font-face Demo tab to see it in realtime.