Slide 1

Slide 1 text

WEB TYPE The State of Auckland Web Meetup ¶ 20 May 2010 ¶ Matthew Buchanan

Slide 2

Slide 2 text

A seventh-grader writing a book report on Microsoft Word had more font choices than the person designing Esquire magazine’s website or the Ikea online catalog. —DEBORAH NETBURN, LOS ANGELES TIMES latimesblogs.latimes.com/home_blog/2010/05/the-changing-typography-of-the-web.html

Slide 3

Slide 3 text

Source: www.ﬂickr.com/photos/six_7_8/3854121575/

Slide 4

Slide 4 text

WHERE WERE WE?

Slide 5

Slide 5 text

BROWSER FONTS Verdana Arial Helvetica Lucida Tahoma Trebuchet Calibri sans SERIF SERIF Times Georgia Palatino Cambria

Slide 6

Slide 6 text

My Title

h1 { background-image: url(title.png); text-indent: -999em; overflow: hidden; } the GOOD IMAGE REPLACEMENT the BAD Any typeface Consistent rendering Typographic control Widest support Not dynamic Ineﬃcient Text selection Images-oﬀ issue

Slide 7

Slide 7 text

My Title

if(typeof sIFR == "function") sIFR.replaceElement("h1", "font.swf"); the GOOD FLASH REPLACEMENT the BAD Reasonably secure Consistent rendering Wide support Licensing Conﬁguration Text selection Text scaling No Apple love

Slide 8

Slide 8 text

My Title

Cufon.set("fontFamily", "League Gothic"); Cufon.replace("h1"); the GOOD CANVAS / VML REPLACEMENT the BAD Reasonably secure Consistent rendering No plugins Wide support Works on iPhone OS Licensing Font conversion Conﬁguration Screen readers FOUT

Slide 9

Slide 9 text

WHAT’S NEW?

Slide 10

Slide 10 text

@font-face { } FONT-FACE EMBEDDING First introduced in CSS2 recommendation Removed from CSS2.1 speciﬁcation Implemented in IE4, September 1997 —Proprietary EOT format Now in Firefox 3.5, Safari 3.1, Opera 10, Chrome 4

Slide 11

Slide 11 text

Being a web designer will soon require a deeper understanding of typography and how typefaces work. —JASON SANTA MARIA, A LIST APART 296 www.alistapart.com/articles/on-web-typography/

Slide 12

Slide 12 text

@font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.otf') format('opentype'); } the GOOD FONT-FACE EMBEDDING the BAD Real fonts on the web Web standards No plugins Licensing Rendering Security Page weight FOUT

Slide 13

Slide 13 text

FONT-FACE FORMATS IE4+ Embedded OpenType (EOT) 60% Firefox 3.5 TrueType, OpenType 5.8% Firefox 3.6 TrueType, OpenType, WOFF 15.3% Opera 10 TrueType, OpenType 1.8% Chrome 4 TrueType, OpenType, SVG 5.5% Safari 3.1+ TrueType, OpenType, SVG 4% iPhone OS SVG total 92.4% Source: marketshare.hitslink.com/browser-market-share.aspx?qprid=2

Slide 14

Slide 14 text

FONT-FACE LICENSING Typefaces are electronic files, like MP3s —Difficult to protect against piracy Problem: browsers linking to raw font files —Foundries want their hard work protected Foundries use EULAs to control embedding —Some specify SWF, Cufón licences, most just PDF Obfuscation —All formats vulnerable to being “unwrapped”

Slide 15

Slide 15 text

BETTER HOW?

Slide 16

Slide 16 text

FONT-FACE EFFECT Web designers talking/thinking about type Type foundries participating New techniques and formats —Paul Irish: “Bulletproof @font-face syntax” —Web Open File Format (WOFF) Hosted “middlemen” solutions No single, standard format (yet)

Slide 17

Slide 17 text

There is the possibility that the middlemen, by increasing acceptance of web fonts, will hasten the arrival of a licensing standard— and that this will, in turn, prompt Microsoft to support @font-face for any licensed font. —JEFFREY ZELDMAN, GODFATHER OF WEB DESIGN www.zeldman.com/x/54

Slide 18

Slide 18 text

NEW SERVICES Typotheque First foundry service, per-font fee Typekit Hosted subscription service, via JS+CSS FontSquirrel Library of free fonts, kit & ﬁle generators Kernest Free and paid subscription service FontFont Per-font fee, self-hosted or via Typekit Fonts.com Hosted service, free trial, via JS+CSS Fontdeck Private beta, CSS-only hosted solution Google Announced today, open-source library NEW!

Slide 19

Slide 19 text

FREE FONTS Fertigo EXLJBRIS Calluna EXLJBRIS ChunkFive LEAGUE OF MOVEABLE TYPE League Gothic LEAGUE OF MOVEABLE TYPE Museo Sans EXLJBRIS Titillium ACCADEMIA DI BELLE ARTI URBINO Quicksand ANDREW PAGLINAWAN Goudy Bookletter BARRY SCHWARTZ

Slide 20

Slide 20 text

QUALITY CONTROL Strunk White s Strunk & White’s CHUNKFIVE FERTIGO

Slide 21

Slide 21 text

EXAMPLES Source: www.typotheque.com

Slide 22

Slide 22 text

EXAMPLES Source: sxsw.beercamp.com

Slide 23

Slide 23 text

EXAMPLES Source: www.typekit.com/gallery

Slide 24

Slide 24 text

EXAMPLES Source: www.typekit.com/gallery

Slide 25

Slide 25 text

IE FIREFOX 3.6 iPHONE OS SAFARI, CHROME, OPERA TTF/OTF WOFF EOT SVG SERVICE MIDDLEMEN CDN SECURITY LICENSING

Slide 26

Slide 26 text

SECURITY Security through obfuscation —Edit “name” table, breaks desktop installation (typophile.com/node/70404) —Serve fonts as base64-encoded data URI —Cryptography —Referrer checking —Subsetting of glyphs —Use multiple ﬁles, recombine with font stack (skolar-1, skolar-2, etc.)

Slide 27

Slide 27 text

TYPEKIT

Slide 28

Slide 28 text

TYPEKIT

Slide 29

Slide 29 text

TYPEKIT

Slide 30

Slide 30 text

My Title

try{ Typekit.load(); } catch(e){} TYPEKIT

Slide 31

Slide 31 text

the GOOD TYPEKIT the BAD Multi-platform Hosted Distributed Licensed Updated Secure Cost-eﬀective Easy Point of failure Rendering Rent vs Buy Page weight

Slide 32

Slide 32 text

FONTDECK

Slide 33

Slide 33 text

@font-face { font-family: 'Egyptienne URW Extra Narrow Bold'; src: url('http://f.fontdeck.com/ … .eot'); src: local('Egyptienne URW Extra Narrow Bold'), url('http://f.fontdeck.com/ … .woff') format('woff'), url('http://f.fontdeck.com/ … .ttf') format('opentype'); font-weight: bold; font-style: normal; } FONTDECK

Slide 34

Slide 34 text

LOOKS GOOD

Slide 35

Slide 35 text

RENDERING Each OS platform implements own engine Quartz 2D in OS X is smooth, but adds weight Windows ClearType sharper, more jaggy Windows DirectWrite oﬀers improvement Hinting & sub-pixel rendering can help

Slide 36

Slide 36 text

Font hinting … uses tables of mathematical instructions to align letterforms to the pixel grid and to determine which pixels should be greyscaled. —THOMAS GIANNATTASIO, SMASHING MAG www.smashingmagazine.com/2009/11/02/the-ails-of-typographic-anti-aliasing/

Slide 37

Slide 37 text

HINTING Source: www.cooper.com/journal/ Same glyphs, but right has hinting applied Trading oﬀ legibility against integrity Painstaking process, hundreds of hours Tuning for speciﬁc rendering engines

Slide 38

Slide 38 text

RENDERING: PILL GOTHIC IE7 XP Chrome VISTA IE7 XP IE7 XP IE8 WIN 7 Safari OS X Source: www.typekit.com

Slide 39

Slide 39 text

RENDERING: PILL GOTHIC Source: www.typekit.com

Slide 40

Slide 40 text

RENDERING: FF TISA Safari OS X IE8 VISTA IE7 XP IE7 XP IE7 XP Firefox WIN 7 Source: www.typekit.com

Slide 41

Slide 41 text

IN USE

Slide 42

Slide 42 text

BIG NAMES

Slide 43

Slide 43 text

BIG NAMES

Slide 44

Slide 44 text

BIG NAMES

Slide 45

Slide 45 text

BIG NAMES

Slide 46

Slide 46 text

BIG NAMES

Slide 47

Slide 47 text

WebFont.load({ google: { families: ['Droid Sans'] } }); GOOGLE WEBFONTS Announced today, open-source webfonts library Launching with 18 fonts ready to use Teamed up with Typekit Typekit open sources its WebFont Loader NEW!

Slide 48

Slide 48 text

RESOURCES nicewebtype.com webtypography.net www.alistapart.com/issues/296 typekit.com fontsquirrel.com theleagueofmoveabletype.com typographica.org typophile.com/forum/ ilovetypography.com/2009/08/07/the-font-as-service/ code.google.com/webfonts

Slide 49

Slide 49 text

Most font replacement techniques, including my own, were meant as stepping stones to @font-face. 2010 is going to be the year of @font-face. —SIMO KINNUNEN, CREATOR OF CUFÓN www.newsurl.net/in-depth-the-future-of-web-fonts/

Slide 50

Slide 50 text

Matthew Buchanan matthewbuchanan.name www.cactuslab.com THANKS