Share via

The CSS Corner: Better Web Typography For Better Design

  • Article

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.

WOFF

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

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

  • Anonymous
    July 15, 2010
    Note this issue, PLEASE! [connect.microsoft.com/.../white-text-on-black-background-are-rendered-ugly] 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)

  • Anonymous
    July 15, 2010
    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 :/

  • Anonymous
    July 15, 2010
    Yes, anti-aliasing needs to be improved, - but overall - very nice visual update for the web ;)

  • Anonymous
    July 15, 2010
    The comment has been removed

  • Anonymous
    July 15, 2010
    @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.

  • Anonymous
    July 15, 2010
    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.

  • Anonymous
    July 15, 2010
    @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.

  • Anonymous
    July 15, 2010
    @Matt: It is caused by a server fault of Microsoft. Please remove one of them. I'm sorry. Thanks.

  • Anonymous
    July 15, 2010
    @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. -meni 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.

  • Anonymous
    July 15, 2010
    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!  

  • Anonymous
    July 15, 2010
    @sylvain: <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?

  • Anonymous
    July 15, 2010
    The comment has been removed

  • Anonymous
    July 16, 2010
    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: code.google.com/.../webfonts

  • Anonymous
    July 16, 2010
    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.

  • Anonymous
    July 16, 2010
    Brianary: And how do you think the Google Font API is actually implemented? Do some research before posting snarky remarks.

  • Anonymous
    July 16, 2010
    The comment has been removed

  • Anonymous
    July 16, 2010
    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.

  • Anonymous
    July 16, 2010
    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.

  • Anonymous
    July 16, 2010
    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. :-) Thanks!

  • Anonymous
    July 17, 2010
    The comment has been removed