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?
- ·The Future of Sex poster
- ·Top 100 Fonts.com Web Fonts for May 2016
- ·47 free tattoo fonts for your body art
- ·How to sell your typefaces
- ·Once Upon DESIGN: New Routes for Arabian Heritage
- ·Alphabet Stories by Hermann Zapf
- ·Type terms: the animated typographic cheat sheet
- ·TypeDecon Digital Download
- ·Linotype Ad: "Linotype vs. Intertype"
- ·The 52 best free graffiti fonts
游客ReviewFS Emeric字体：一款令人愉悦的新字体font article没看看有这款字体啊
我在这儿Review网页设计中的艺术字体设计与排版（1）font article很好 值得学习
新蒂字体 授权使用： 无需备案免费使用的情况： 在个人电脑上安装、打印个人文档、个人网站、博客、微博配图 需要备案免费使用的情况： 设计有可能商用的稿件（在商用时购买商业授权）、用于免费提供给他人的印刷品（印量在500份以内，且无需获得印刷品行政许可）的情况、用作没有品牌冠名的公益广告、用作完全免费（不能含有收费项目）的软件及网络服务。 需要购买个人授权的情况： 个人网店的装饰、个体商...