The CSS Corner: Better Web Typography For Better Design

Lost In Translation

Web design is 95% typography”. So much of the content produced and consumed on the web is text yet designers and users have been confined to a set of compatible fonts available across client operating systems. Escaping this typographical island has involved everything from cross-browser CSS workarounds, graphics-based solutions and even plug-ins, with trade-offs ranging from extra storage and bandwidth to reduced accessibility.

As a result, typefaces have too often been one of the first casualties of the translation from Photoshop design mock-up to live web page.

Not The Same CSS

Solving this challenge required an interoperable CSS syntax to describe font resources. While IE added support for CSS2’s @font-face rule as long ago as 1997, the differences between this earliest of implementations and the far more recent ones supporting CSS3 Fonts have given rise to CSS design patterns built to ensure the same rule works for all users. A notable example is the bulletproof @font-face syntax developed by Paul Irish from Google, et al.

But crafting a cross-browser @font-face declaration turned out to be half the problem.

No Common Web Font Format

Internet Explorer’s @font-face implementation supports EOT (Embedded OpenType) fonts, a compressed font encoding submitted to the W3C in 2008. Following WebKit’s lead in 2007, Mozilla and Opera added support for raw TrueType and OpenType fonts. Raw fonts work well if your fonts’ end-user license (EULA) allowed you to serve them from your web server. While this is true for many free fonts, this is not the case for the vast majority of commercial fonts. Web authors are thus effectively cut off from the richest font catalogs available. If they choose EOT they are able to license a number of commercial fonts for web use but only IE renders them.

This leaves a challenge for the industry. The major browsers support two incompatible solutions and commercial font EULAs are generally incompatible with one of them.  This spawned dedicated hosting services like TypeKit to help designers license typefaces for their site and use them across browsers. These services, however, may not offer all or even any of the desired fonts that a web developer needs for their site. In some cases, a font set could even require multiple subscriptions.


In late 2009, type designers Tal Leming and Erik van Blokland working together with Mozilla’s Jonathan Kew proposed a new web font container format to address the concerns of font vendors without reducing web author choice. It was well received and submitted to the W3C in April 2010 by Mozilla, Opera and Microsoft. Today, Firefox 3.6 supports WOFF and other browser vendors will be following soon.

Font foundries have also rallied behind the new format and already offer WOFF-encoded fonts for web use. Among them, Monotype Imaging, Ascender Corporation, FontShop and Typotheque provided us with the great WOFF fonts used in our our Testdrive demos.

IE9 WOFF testdrive demoIE9 WOFF testdrive demo

Same CSS, Same Web Font Format

Starting with Platform Preview 3, IE9’s @font-face implementation conforms to the CSS3 Fonts module; supported font formats include EOT and WOFF as well as raw fonts with embedding permissions set to installable.

In future posts, we will look into IE9’s web font support in more detail, as well as the available techniques for cross-browser typography. In his latest post on the FontBlog, Greg Hitchcock offers rich context on the art and science behind the technologies involved in web typography.

We look forward to your feedback on this Preview release, as well as ongoing work within the W3C to extend the reach of the typographic web.

Sylvain Galineau
Program Manager

Comments (21)

  1. blah says:

    Oh, so now that we're not talking about performance, suddenly Opera's name is easily seen.

  2. Infinte says:

    Note this issue, PLEASE!


    Snapshots are included in this issue's description.

    White texts on black background are extremely roughy and ugly. Maybe you should make text anti-aliasing adjustable. (LCD screen pixel arrangement, anti-aliasing density, anti-aliasing sharpness,  for example)

  3. Cory Nelson says:

    Fonts are cool, but we need CSS support for hyphenation, optical margin alignment (a better take on hanging punctuation), and ligatures.  The web has had bad typesetting for too long :/

  4. c69 says:

    Yes, anti-aliasing needs to be improved, – but overall – very nice visual update for the web 😉

  5. meni says:

    Like i commnted before: WOW upon WOW!

    Is this microsoft?? One wouldn't believe it! Congrats to the most open, best team (from my perspective at least) at MS.

    2 Things:

    1) WHAT ABOUT WEBGL?? Either state you have no plans re this, or show us the goods. I can see in my mind's eye the meetings about this at microsoft:

      IETeam: We need to support standards


    2) Please advance the web futher, meet other browser vendors. this is a very special point in time whn we see great strides in standards. It's good for everyone!

    3) (OK, one more) Your point of releasing only to win7 might hinder you. Not because win xp is (so far) the most installed system, but because you MUST SUPPORT WIN PHONE 7!!!!! I have not seen this addressed anywhere.   🙁 for you


    Open source, standards fanboy.

    PS: blog system SUCKS big time. Slow (compare to blogger), and I have to double post (Firefox on windows). Just move to blogger 🙂

  6. Matt says:

    @Infinte: Spamming the same comment over and over again on every post is impolite. Please stop. Your bug is in the system, it will be tracked there.

  7. Vlad says:

    Small fonts still look iffy in the IE9 preview.

    All the demos of sub-pixel font rendering seem to focus on the HUGE FONT SIZE cases. Whereas something like Google Reader is clearly superior in IE8 over IE9 Preview.

    Most fonts on the web are small. Please, optimize for this 90% case and get it looking as good as IE8/Cleartype before enabling the five typography-related sites that use elephantine fonts to look super-smooth when zoomed in.

  8. E says:

    @meni: For some reason WinPhone 7 is going to have IE6 (with Ajax stuff from IE8), that's most likely a business decision and not something the IE team itself can decide. Which is a shame.

  9. Infinte says:

    @Matt: It is caused by a server fault of Microsoft. Please remove one of them.

    I'm sorry. Thanks.

  10. meni says:

    @E, i just want to clarify my 3rd point about Win 7, XP and Windows Phone 7:

    The ieteam stated that Win XP isn't supported b/c of hardware acceleration, which they stated as a major selling point of the new IE. I'm saying it might be a grave mistake, b/c: don't they have to support WinPhone7 in the future? Also what about computers without hardware accel? So put in the XP support, it'll pay off for other platform and configurations.


    BTW, IETeam, your major selling point shouldn't be speed, IMO, it's standards.  The media attention you got when you announced SVG andCanvas support was higher then ever.

  11. meni says:

    Sorry to spam this very nice thread about fonts with my ramblings but just one more 🙂

    I see that the "SAME MARKUP" marketing slogan is gone. Good riddance!  

  12. Richard Fink says:


    <em>supported font formats include EOT and WOFF as well as raw fonts with embedding permissions set to installable.</em>

    Opera, Firefox, Chrome, and Safari have no such DRM-like restriction built into their support for "raw" fonts.

    Why is IE breaking with the pack? What issue does support for such a hidden font de-activator address?

    Why not just drop support for raw fonts instead of this half-in, half-out stuff?

  13. Matt says:

    @Infinte: There's no server fault of Microsoft that's causing you to spam every one of their blog posts with your whining about an unrelated issue you filed on CONNECT. Knock it off.

    @Richard: Yes, some of the open-source socialists don't respect intellectual property rights. Microsoft can't afford to do that, since they're in business due to intellectual property rights.

    @meni: Don't worry– I'm sure you'll hear a lot more about same-markup when they're talking about markup.

    @vlad: several google sites (like gmail) have bad-looking text because they have incorrect CSS that IE9 renders as it is told to.

  14. Brianary says:

    This will be helpful a decade or two from now when IE9 is the minimal design standard.

    The Google Font API lets you access fonts with just a <link> tag, and it works today:…/webfonts

  15. Matt says:

    I really like what you are doing with IE 9. It would be nice if you supported apng for animated images, though. gif is so archaic: terrible compression and limited colors.

  16. ClueTrain says:

    Brianary: And how do you think the Google Font API is actually implemented? Do some research before posting snarky remarks.

  17. badger says:

    @Richard Fink  Actually it's really the other browsers that are being half-in, half-out with this. They're the ones who are lacking support for this critical feature. Fonts are very susceptible to piracy and I'm glad that IE9 will help protect the intellectual property of font designers. If a font is set to not be embeddable, then that means you don't have the license to embed it on your site. So why exactly should IE help you violate their intellectual property rights?

  18. Jill says:

    If you are supporting WOFF fonts in IE9 then there is no need to support incompatible EOT fonts.  By maintaining both you cause the same issue that proprietary tags/attributes/CSS caused in the past.

    Please I beg you to drop EOT support.

    We don't want developers using EOT fonts that are incompatible with ANY other browser. I'm sick and tired of spending half my development time cleaning up IE-only garbage on legacy web projects.

  19. ReadFirst says:

    If you had bothered to read the post, you'd know that EOT isn't proprietary– it's a specification submitted to the W3C two years ago, and anyone is free to implement it.

  20. Kevin Newman says:

    It's fantastic that you support for WOFF (and generally, I'm even impressed with IE9).

    Now that there is acknowledgement of a need for a standard file format for the web when it comes to fonts – maybe Microsoft is ready to talk about the need for a common file format for video as well? Webm is ready to go! Please support it. 🙂


  21. jabcreations says:

    The more newspaper-like I can serve text in my work the better. The most important thing that Internet Explorer and Opera are missing is multi-column support. Reading text all the way across my 1920×1200 resolution 24 inch screen is as comfortable as when I proof-read text on my blog that will have a user choice of one to four columns if the CSS3 property is supported.

    I love using justification for clean looking columns of text too however the font I use itself is going to be the least of my concerns. Being able to have text use hyphens and wrap to the next line in example is much more desirable since in certain conditions when text is justified there is too much space between each words in some instances.

    Another important feature is text-overflow which I think IE might have offhand though I'm not certain right now; it's something I'd be sure to look up on the MSDN CSS reference for various versions of IE though.

    If you guys want to make me happy as a web surfer implementing a minimum font-size option that is DISABLED by default would be greatly appreciated though multi-column support should be considered the highest priority as far as fonts/text/CSS are concerned at this moment in time. Gecko and WebKit support it and once you get used to having it you just can't imagine reading pages without it.