Intro to Webfonts

Transcript

1. WEBFONTS

2. WEB FONTS

3. 1996 ★ Microsoft gives CoreFonts to the web ★ Good:

   Verdana, Georgia ★ OK: Times New Roman, Arial, Trebuchet, Impact ★ Ugly: Comic Sans

4. 1997 ★ Browser Wars. ★ IE: EOT ★ Netscape: TrueDoc

   ★ Nobody cares. Everybody just uses Arial.

5. 1997-2007 ★ Crickets. ★ Embed type in images, use Core

   Fonts. ★ Foundries ostrich.

6. 2004 ★ sIFR - a painful but useful attempt at

   using custom fonts.

7. 2007 ★ Håkon Wium Lie writes "CSS @ Ten" for

   A List Apart.

8. 2008 ★ Safari 3.1 allows native @font-face embedding of TTF/OTF

   font les.

9. 2009 ★ Firefox 3.5 supports TTF/OTF @font-face embedding ★ People

   realize that IE still supports EOT. ★ FF + Safari + IE = most of the web.

10. 2009 ★ Chrome 4 supports @font-face ★ Cufon debuts. Great

    hack, too late. ★ Foundries remove head from sand, help create WOFF ★ FF 3.6, Chrome 5, use WOFF

11. 2009 ★ Typekit debuts ★ Font Squirrel generator debuts ★

    I launch thatwasnotok.com

12. 2010 ★ Bunch of Typekit clones pop up ★ Foundries

    roll their own ★ Serious exploration of x-platform rendering issues

13. 2011 ★ IE9 released (much better type rendering) ★ Safari

    5.1 nally has WOFF support ★ Typekit bought by Adobe

14. 2011 @font-­‐face  {  font-­‐family:  'MyWebFont';  src:  url('webfont.eot');  /*  IE9  Compat

     Modes  */  src:  url('webfont.eot?#iefix')  format('embedded-­‐opentype'),  /*  IE6-­‐IE8  */            url('webfont.woff')  format('woff'),  /*  Modern  Browsers  */            url('webfont.ttf')    format('truetype'),  /*  Safari,  Android,  iOS  */            url('webfont.svg#svgFontName')  format('svg');  /*  Legacy  iOS  */ } /* http://www.fontspring.com/blog/further-­‐hardening-­‐of-­‐the-­‐bulletproof-­‐syntax */

15. 2012 ?

16. Type Rendering ★ Windows & Windows & Mac, oh my

17. Type Rendering

18. Mac OS X

19. DirectWrite (Vista, Win 7)

20. GDI ClearType (XP)

21. GDI Standard (XP)

22. No Antialiasing

23. TrueType Hinting ★ Trying to make Windows suck less

24. TrueType Hinting

25. ttfautohint

26. Performance ★ All browsers handle @font-face differently ★ WebFont Loader

    lets you smooth them out

27. Best Practices ★ Always test font rendering in Win XP

    rst

28. Best Bets ★ Typekit (esp. Adobe and FontFont) ★ WebType

    RE fonts ★ ttfautohint ★ Running fonts through Font Squirrel generator ★ Headlines are always safer

29. Webfonts + WordPress ★ Best plugin I found for Google

    Web Fonts: http://wordpress.org/extend/plugins/ google-web-fonts-for-wordpress/ ★ WordPress.com has Typekit integration built in. ($30/year) ★ Custom is the best way to go if you can.

30. FontFriend http://somadesign.ca/projects/fontfriend/

31. Thanks! ★ http://blog.typekit.com/2010/10/15/type-rendering-operating-systems/ ★ http://www.typotheque.com/articles/hinting ★ http://www.fontslive.com/info/typography/web-font-quality.aspx ★ http://www.lucasfonts.com/fonts/thesans/thesans-of ce/features/

    ★ http://cl.ly/9PBw ★ http://www.freetype.org/ttfautohint/ ★ https://github.com/typekit/webfontloader