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:
|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%|
*compared to OpenType CFF font
Taking into account the payload of the scripts the page requires, we add up the frameworks and plugins below:
total JS | 98576 Bytes
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?
- ·MC5 – Back in the USA album cover
- ·Surabaya Beat by Beat Presser, Afterhours Books
- ·Ad for Hello Dummy! by Don Rickles
- ·The Great Comic Book Heroes, by Jules Feiffer
- ·Königsblut identity
- ·Moving Hands (Helena Hauff Remix) by The Klinik, official video
- ·Japanese Typography Writing System
- ·The Form Book by Borries Schwesinger
- ·"Jesus Music" ad for Myrrh Records
- ·"David Bowie is turning us all into voyeurs" button