Internet Explorer - The CSS Corner: Better Web Typography For Better Design

[AWS]

Lost In Translation

 

 

&ldquoWeb design is 95% typography&rdquo. 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&rsquos @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&rsquos @font-face implementation supports EOT (Embedded OpenType) fonts, a compressed font encoding submitted to the W3C in 2008. Following WebKit&rsquos lead in 2007, Mozilla and Opera added support for raw TrueType and OpenType fonts. Raw fonts work well if your fonts&rsquo 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.