• Like
  • Save
Web Safe Fonts Are Dead Series | Part 3: OpenType, The New Frontier
Upcoming SlideShare
Loading in...5
×

Web Safe Fonts Are Dead Series | Part 3: OpenType, The New Frontier

  • 270 views
Uploaded on

In Part 3, Thomas Phinney takes on the bleeding edge of OpenType features on the web, including: …

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
270
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Presented by Thomas PhinneyOpenType:the newweb frontier
  • 2. OpenTypebrowser supportFirefox 4+ (syntax change in 14)Chrome:•  15/16+ Win•  22+ MacInternet Explorer 10+Safari & Opera: not yet
  • 3. OpenTypefeature codes•  Standard stuff: liga (ligatures), kern, calt(contextual alternates), clig (contextualligatures)•  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. OpenTypefeatures in CSSbody {-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 &Linkshttp://www.webink.com/type-resourceshttp://mzl.la/ff4-ot@WebINK@ThomasPhinney