IE10 unlocks CSS OpenType features for Webfonts
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.)
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 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 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 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 is one of the FontFonts that go wild with extravagant ligatures.
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:
|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%|
Taking into account the payload of the scripts the page requires, we’ve added up the frameworks and plugins below:
|total JS||98576 Bytes|
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?