In Part 3, Thomas Phinney takes on the bleeding edge of OpenType features on the web, including: • Workhorse OpenType features—what they are, and how and when to use them • How OpenType allows you to have script and calligraphic fonts that look more real than ever before • The bizarre world of cutting-edge OpenType fonts that draw pie charts, translate or censor text, or even predict the future! • Detailed references and creative inspiration

1. Presented by
Thomas Phinney
OpenType:
the new
web frontier

2. OpenType
browser support
Firefox 4+ (syntax change in 14)
Chrome:
• 15/16+ Win
• 22+ Mac
Internet Explorer 10+
Safari & Opera: not yet

3. OpenType
feature codes
• Standard stuff: liga (ligatures), kern, calt
(contextual alternates), clig (contextual
ligatures)
• Oldstyle/proportional numbers:
onum, pnum
• Fractions: frac
• Superscript/subscript: sups, subs, sinf
• Small caps from caps: c2sc
• Small caps from lowercase: smcp
• Discretionary/historical ligs: dlig, hlig
• Stylistic Set #2, #14: ss02, ss14

4. OpenType
features in CSS
body {
-moz-font-feature-settings:"calt", "liga", "clig", "kern";
-moz-font-feature-settings:"calt=1, liga=1, clig=1, kern=1";
-ms-font-feature-settings:"calt", "liga", "clig", "kern";
-o-font-feature-settings:"calt", "liga", "clig", "kern";
-webkit-font-feature-settings:"calt", "liga", "clig", "kern";
font-feature-settings:"calt", "liga", "clig", "kern";
text-rendering:optimizeLegibility;
}

5. DEMO

6. Resources &
Links
http://www.webink.com/type-
resources
http://mzl.la/ff4-ot
@WebINK
@ThomasPhinney