Using OpenType on the Web

With Ampersand less than a week away, it'll be no time before we begin to see type looking a little better on the web. Designers making smarter use of webfonts gets us a long way, but a persistent hurdle to harnessing web typography's potential has been browser support. Back in April, one development we cheered was Microsoft's Internet Explorer 10 Platform Preview, a significant step toward OpenType feature support becoming widespread, allowing things like discretionary ligatures in text, and contextual alternates in display. Now with standards solidifying, a level of typographic sophistication previously unachievable anywhere will soon be realized.

By way of sneak peek to Yves's talk, and ushering in the new browser, we share this demo page with live examples of OpenType features at work. See FontFont's, along with pages from other participating foundries at the Internet Explorer OpenType Test Drive. Note that unless viewed in IE10 or a recent version of Firefox (or some other new-ish Mozilla browser), the demos won't make much sense.

We move ahead now to take a closer look into each of the examples, and discuss what's required before we can get started taking full advantage of this new ability.

FF Nexus Serif(Contextual Swashes) | FF Nexus Serif Italic is the most comprehensive font of the FF Nexus Superfamily, containing beautiful sets of swash letters for the beginnings and ends of words. Thanks to the Contextual Swashes feature, the swash variants of the letters appear automatically in the appropriate positions (as opposed to the "regular" Swashes feature, in which you would have to decide yourself which letters should be swashed).

FF Unit(Stylistic Sets) | FF Unit holds the FontFont library record for Stylistic Sets: It has a whopping 14 sets to tailor the look of selected letters to your needs. (39 OT Features in total!)

FF Mister K(Contextual Alternates) | FF Mister K isn't available as a Web FontFont yet, and if you switch off the Contextual Alternates feature on the demo site you'll see why: It just makes no sense to use it without the connections and letter variants that give FF Mister K its special look.

FF Ernestine(Small Caps and Petite Caps) | FF Ernestine is one of the few FontFonts containing two sets of small caps: Small and Petite Caps (the only other Petite Cap FontFont being FF Atma Serif). While Small Caps are available as separate Web FontFonts now, Petite Caps only become accessible through browser OpenType feature support.

FF Milo Serif(Discretionary Ligatures) | FF Milo Serif is one of the FontFonts that go wild with extravagant ligatures.

FF DIN Round(Oldstyle Figures) andFF Tartine Script(Ligatures) | FF DIN Round and FF Tartine Script can actually look like this on your website right now! Unlike the other features shown above, Oldstyle Figures and Ligatures are included (if available in the design) in all WOFF Web FontFonts today.

There's one more feature we didn't even mention on the demo page: The Kerning feature is activated for the whole demo page. It is most noticeable in combinations like "We" and "y.", which just look more even with kerning. This feature is included in the current WOFF Web FontFonts and is applied automatically by some browsers.

Because there are so many fonts on the demo page, we tried to reduce the file size of the fonts as much as possible using the FontFont Subsetter, only keeping the necessary characters, and also removing the hinting data from the fonts that are shown large. Hinting is only relevant for smaller type sizes. The savings are enormous:

*compared to OpenType CFF font

Taking into account the payload of the scripts the page requires, we add up the frameworks and plugins below:

jQuery + scrollTo JavaScript libraries | 95985

site-specific JavaScript | 2591

total JS | 98576 Bytes

That means about half a megabyte of traffic is saved every time somebody opens the page for the first time. The total size of all ten font files is just under 96 kilobytes, which is incidentally about one kilobyte smaller than the JavaScript library used in this page (jQuery with the scrollTo plugin plus site-specific scripts).

The whole demo page is just 272 kilobytes in size.

And for the future?

The Features presented in the demo page are not the only ones that might eventually find their way into Web FontFonts. The browser implementations are still subject to change until the CSS 3 Fonts Module is finalized by the World Wide Web Consortium. The CSS 3 Fonts Module aims at abstracting the typographic features from their underlying OpenType implementation so that they can be applied to other smart font technologies as well (e.g. AAT or Graphite fonts). The current low-level browser implementation directly uses the four-letter OpenType feature tags to control the features. That means that an adventurous type designer is not even restricted to the feature tags currently registered with the OpenType layout tag registry. Erik van Blokland took advantage of this to create this study of an animated version of his FF Kosmik (works in Firefox only). If you like to learn more—Microsoft's Sylvain Galineau sums up some details about IE10's OpenType support in this blog post.

Finishing up, let's remind ourselves again that browser support in this area is still new and not yet even agreed upon by the major players. Standards on which features should get support from the browsers, and which should be included in webfonts by type designers and foundries are still in the making. All these decisions will be fueled largely by demand. So let's hear it. Which of these features would you most likely use; and are there any you don't see yourself using?