Web Fonts Backstage and On Stage

Ff82bbc8ac64150bc2721f7517d87ce4?s=47 beyond tellerrand
September 18, 2012

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?

Ff82bbc8ac64150bc2721f7517d87ce4?s=128

beyond tellerrand

September 18, 2012
Tweet

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

  7. None
  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

  10. None
  11. None
  12. None
  13. None
  14. None
  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
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. print extremely old defined by font defined by Windows 95,

    (standard) Flash Player iOS Windows ClearType Mac OS Adobe Reader
  49. Hinting

  50. None
  51. None
  52. -ClearType without hinting -ClearType manual hinting

  53. -ClearType without hinting -ClearType manual hinting

  54. None
  55. None
  56. Those “webfonts” look great in your photoshop mockup! Also, that

    Mars colony looks great in the artist’s rendering. Jonathan Hoefler, , 2011
  57. None
  58. Screen Fonts

  59. None
  60. None
  61. Typography

  62. None
  63. None
  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

  69. None
  70. None
  71. None
  72. That  was  then This is now Georgia Utopia Display

  73. Tim Ahrens justanotherfoundry.com T anks. Herb