Web Fonts Backstage and On Stage

The “big bang” of Web fonts in 2010 — when browsers started supporting downloadable fonts — started a revolution in Web typography. Being able to choose from a wide variety of fonts has given us new forms of expression and almost closed the gap to the printed world. Now that there are no major technical challenges any more and Web fonts are easy to “get to work”, it is time to raise the bar: how can we make them look great? How do type design and rendering technology interact? What do Web fonts look like inside? How do foundries optimize their fonts? What can the font user contribute to make the final result look as good as it possibly gets?

Transcript

1. Tim Ahrens Smashing Conference Freiburg, 18 September 2012 Web Fonts Backstage and On Stage
2. Just Another Foundry in collaboration with Shoko Mugikura
3. Adobe Typekit consultant
4. Webfonts
5. Self hosting
6. Self hosting
8. <link  rel="stylesheet"  type="text/css" href="http://webfonts.justanotherfoundry.com/Facit/"  /> Webfont services
9. <link  rel="stylesheet"  type="text/css" href="http://webfonts.justanotherfoundry.com/Facit/"  /> Webfont services
15. a b c d e f
16. OpenType header names features ... a b c d e f
17. OpenType header names features ... a b c d e f .ttf
18. a b c d e f OpenType header names features ... .otf
19. OpenType header names features ... a b c d e f .ttf
20. header OpenType header names features ... a b c d e f .eot .ttf
21. header metadata OpenType header names features ... a b c d e f .woff .ttf
22. header OpenType header names features ... metadata a b c d e f .otf .woff
23. header data OpenType header names features ... metadata a b c d e f .otf .woff base64
24. header data OpenType header names features ... metadata a b c d e f .otf .woff base64 JavaScript
25. header data OpenType header names features ... metadata a b c d e f .otf .woff base64 JavaScript gzip
26. Browsers
27. 7 3.6 7 8 9 11.1 5.1 2012
28. Growing browser support for ... has made self hosting solutions like ours more widely accepted. Ivo Gabrowitsch, FontFont, 10/2011
29. As soon as the major web browsers ... will support and natively, I think web font hosting services ... may become obsolete. Yves Peters (via fontfeed.com), 01/2011
30. At the moment it all seems a bit ‘hit and miss’ and only for the techies. Jeremy Tankard, 10/2011
31. Rendering
32. header data b c d e f OpenType header names features ... metadata a .otf base64 JavaScript gzip
33. header data a b c d e f OpenType header names features ... metadata .otf base64 JavaScript gzip
34. .otf .otf-based .ttf .ttf-based TrueType contours PostScript contours
35. .otf .otf-based .ttf .ttf-based TrueType contours PostScript contours hinting
36. .otf .otf-based .ttf .ttf-based TrueType contours hinting (instructions) PostScript contours hinting
48. print extremely old defined by font defined by Windows 95, (standard) Flash Player iOS Windows ClearType Mac OS Adobe Reader
49. Hinting
52. -ClearType without hinting -ClearType manual hinting
53. -ClearType without hinting -ClearType manual hinting
56. Those “webfonts” look great in your photoshop mockup! Also, that Mars colony looks great in the artist’s rendering. Jonathan Hoefler, , 2011
58. Screen Fonts
61. Typography
64. That  was  then This is now Arial Univers
65. That  was  then This is now Arial Helvetica
66. That  was  then This is now Verdana Facit
67. Clan
68. That  was  then This is now Verdana Bernino
72. That  was  then This is now Georgia Utopia Display
73. Tim Ahrens justanotherfoundry.com T anks. Herb