IE10 unlocks CSS OpenType features for Webfonts

June 12th, 2012

With Mozilla’s Firefox and Microsoft’s upcoming Internet Explorer 10, a significant step has been taken toward widespread OpenType feature support, which allows for 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. Ushering in the new browser, we share this demo page with live examples of OpenType features at work. (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. Contextual Swashes: 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).

 Stylistic Sets: FF Unit

Stylistic Sets | FF Unit holds the library’s 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!)

Contextual Alternates: 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.

Small Caps: FF Ernestine

Small 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.

Discretionary Ligatures: FF Milo Serif

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

Oldtyle Figures: FF DIN Round

Ligatures: FF Tartine Script

Oldstyle Figures and 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:

Font Before After Saving
FF DIN Round Web Bold 39960 10040 75%
FF DIN Web Regular 31020 12892 58%
FF DIN Web Bold 30404 10172 67%
FF Ernestine Web Bold 44052 8532 81%
FF Milo Serif Web Regular 36784 7920 78%
FF Mister K Web Regular 268432 11552 96%*
FF Nexus Serif Web Italic 51468 9504 82%
FF Nuvo Mono Web Regular 28568 11004 61%
FF Tartine Script Web Regular 43660 8584 80%
FF Unit Web Ultra 36772 7672 79%
  611120 97872 513248 Bytes

*compared to OpenType CFF font

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

jQuery + scrollTo JavaScript libraries
95985 Bytes
site-specific JavaScript 2591 Bytes
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.

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 adventurous type designers are not restricted to the feature tags currently registered with the OpenType layout tag registry.

Erik van Blokland took advantage of this to create this experiment of an animated version of his FF Kosmik (to date, it 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 that browser support in this area is still new and standards have not been agreed upon by the major players. Standards regarding 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?