The state of Web Type: Short Introduction

Being a web designer will soon require a deeper understanding of typography and how typefaces work. 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 fontface for any licensed font.

WEB TYPE The State of Auckland Web Meetup ¶ 20 May 2010 ¶ Matthew Buchanan 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 Source: www.flickr.com/photos/six_7_8/3854121575/ WHERE WERE WE? BROWSER FONTS Verdana Arial Helvetica Lucida Tahoma Trebuchet Calibri sans SERIF SERIF Times Georgia Palatino Cambria <h1>My Title</h1> 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 Inefficient Text selection Images-off issue <h1>My Title</h1> <script> if(typeof sIFR == "function") sIFR.replaceElement("h1", "font.swf"); </script> the GOOD FLASH REPLACEMENT the BAD Reasonably secure Consistent rendering Wide support Licensing Configuration Text selection Text scaling No Apple love <h1>My Title</h1> <script> Cufon.set("fontFamily", "League Gothic"); Cufon.replace("h1"); </script> the GOOD CANVAS / VML REPLACEMENT the BAD Reasonably secure Consistent rendering No plugins Wide support Works on iPhone OS Licensing Font conversion Configuration Screen readers FOUT WHAT’S NEW? @font-face { } FONT-FACE EMBEDDING First introduced in CSS2 recommendation Removed from CSS2.1 specification Implemented in IE4, September 1997 —Proprietary EOT format Now in Firefox 3.5, Safari 3.1, Opera 10, Chrome 4 [...]...Being a web designer will soon require a deeper understanding of typography and how typefaces work —JA S ON S A N TA M A R I A, A LI ST APART 296 www.alistapart.com/articles/on -web- typography/ FONT-FACE EMBEDDING @font-face { font-family: 'Graublau Web' ; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.otf') format('opentype'); } the GOOD Real fonts on the web Web standards No plugins the. .. BETTER HOW? 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) There is the possibility that the middlemen, by increasing acceptance of web fonts, will hasten the arrival of a licensing standard— and that... arrival of a licensing standard— and that this will, in turn, prompt Microsoft to support @font-face for any licensed font — J E F FREY Z EL D M A N, G ODFATHE R OF WE B DE SI GN www.zeldman.com/x/54 NEW SERVICES Typotheque First foundry service, per-font fee Typekit Hosted subscription service, via JS+CSS FontSquirrel Library of free fonts, kit & file generators Kernest Free and paid subscription service... TYPEKIT Multi-platform Hosted Distributed the GOOD Licensed Updated Secure Cost-effective Easy Point of failure the BAD Rendering Rent vs Buy Page weight FONTDECK FONTDECK @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/ …... DirectWrite offers improvement Hinting & sub-pixel rendering can help Font hinting … uses tables of mathematical instructions to align letterforms to the pixel grid and to determine which pixels should be greyscaled —T HOM A S G IA NNAT TA SI O, SMASH I N G MAG www.smashingmagazine.com/2009/11/02 /the- ails -of- typographic-anti-aliasing/ ... Titillium League Gothic AC CA DE MIA DI BELLE ARTI U RBINO LEAG UE OF MOV EA BLE TYPE Fertigo Museo Sans E XLJB RIS EX LJ BR IS Calluna ChunkFive E XLJB RIS LEAG UE OF MOV EA BLE TYPE Quicksand Goudy Bookletter A N D R E W PAGLINAWAN BARRY SCHWARTZ QUALITY CONTROL Strunk & White’s FERT IG O Strunk White s CHU NKFIV E Source: www.typotheque.com EXAMPLES Source: sxsw.beercamp.com EXAMPLES Source: www.typekit.com/gallery... OpenType, WOFF Opera 10 TrueType, OpenType Chrome 4 TrueType, OpenType, SVG Safari 3.1+ TrueType, OpenType, SVG iPhone OS SVG 60% 5.8% 15.3% 1.8% 5.5% 4% total 92.4% Source: marketshare.hitslink.com/browser-market-share.aspx?qprid=2 FONT-FACE FORMATS FONT-FACE LICENSING Typefaces are electronic files, like MP3s —Difficult to protect against piracy Problem: browsers linking to raw font files —Foundries want their... EXAMPLES MIDDLEMEN EOT SERVICE SECURITY LICENSING IE TTF/OTF CDN SAFARI, CHROME, OPERA WOFF FIREFOX 3.6 SVG iPHONE OS 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 files, recombine with font stack (skolar-1, skolar-2, etc.) TYPEKIT