Unic AG - Web Fonts: Not Just a One-Night Stand

7,832 views

Published on

Speech von Julia Dressler und Jessica Goodson zum Thema Web Fonts, präsentiert an der ersten Frontend Conference Zürich am 9. und 10. September 2011

Published in: Technology, Art & Photos

Unic AG - Web Fonts: Not Just a One-Night Stand

  1. Webfonts: Not Just a One-Night StandFrontend Conf 2011Zürich, 09. September 2011 Julia Dressler, Jessica Goodson
  2. Seduced by web fonts› Branding recognition› Greater expressive flexibility› Clearer differentiaton from competition› Improved visual hierarchy› Style variation› Very little impact on accessibility / SEO› Very little impact on performance (except mobile)© Unic AG | Seite 9
  3. Seduced by web fonts› Branding recognition› Greater expressive flexibility› Clearer differentiaton from competition› Improved visual hierarchy› Style variation› Very little impact on accessibility / SEO› Very little impact on performance (except mobile)› Not a steep learning curve© Unic AG | Seite 9
  4. © Unic AG | Seite 10
  5. The culmination of many historiesmid 80sSeite 11 © Unic AG | mid 90s 2000 01 02 03 04 05 06 07 08 09 10 11
  6. The culmination of many histories Font Hosting Services Web LicenseComputer FontsDesktopLicensemid 80sSeite 11 © Unic AG | mid 90s 2000 01 02 03 04 05 06 07 08 09 10 11
  7. The culmination of many histories Font Hosting Services Web LicenseComputer Fonts @font-face .woff @font-faceDesktop .eotLicense @font-face .ttf & .otfmid 80sSeite 11 © Unic AG | mid 90s 2000 01 02 03 04 05 06 07 08 09 10 11
  8. The culmination of many histories Font Hosting Services Web LicenseComputer Fonts LCD @font-face Monitors .woff @font-faceDesktop .eotLicense ClearType DirectWrite GDI+ with standard @font-face anti-aliasing .ttf & .otfmid 80sSeite 11 © Unic AG | mid 90s 2000 01 02 03 04 05 06 07 08 09 10 11
  9. The culmination of many histories › mid 80s New business model Desktop License › last 15 years Internet use on the rise Font Licensing© Unic AG | Seite
  10. The culmination of many histories › mid 90s IE 4 and .eot › 2008 Safari 3.1 and .ttf /.otf › 2009 CSS Support Firefox 3.6 and .woff for Webfonts© Unic AG | Seite
  11. The culmination of many histories › mid 90s terrible › 2005-2010 Rendering/rasterizing improving Screen resolution improving Display of Fonts LCD screens on the rise Onscreen© Unic AG | Seite
  12. The culmination of many historiesComputer Fonts LCD @font-face Monitors .woff @font-faceDesktop .eotLicense ClearType DirectWrite GDI+ with standard @font-face anti-aliasing .ttf & .otfmid 80sSeite 15 © Unic AG | mid 90s 2000 01 02 03 04 05 06 07 08 09 10 11
  13. The culmination of many histories Font Hosting Services Web LicenseComputer Fonts LCD @font-face Monitors .woff @font-faceDesktop .eotLicense ClearType DirectWrite GDI+ with standard @font-face anti-aliasing .ttf & .otfmid 80sSeite 15 © Unic AG | mid 90s 2000 01 02 03 04 05 06 07 08 09 10 11
  14. We ♥ web fonts, but ...› ... there are still many considerations to take into account› What questions should we ask?› And how do we find the answers to those questions?© Unic AG | Seite 16
  15. Our practical approachto webfonts, keepingthe love alive.
  16. CUSTOMTYPOGRAPHY DESIRED?
  17. WEB-SAFE FONT
  18. Corporate font defined in style guide© Unic AG | Seite 20
  19. HAS CUSTOMER GOT A WEBLICENSE ALREADY?
  20. IS WEB LICENSEAVAILABLE?
  21. Acquiring a commercial web license› MyFonts (http://new.myfonts.com/)› Fontspring (http://www.fontspring.com/a2z)› FontsLive (http://www.fontslive.com/catalog/)› Typekit (http://typekit.com/libraries/full)› WebINK (http://www.extensis.com/en/WebINK/fonts/)› Webtype (http://www.webtype.com/catalog/)› Fontdeck (http://fontdeck.com/typefaces)› fonts.com Webfonts (http://webfonts.fonts.com/en-US/Project/ChooseFonts)› Typotheque (http://www.typotheque.com)© Unic AG | Seite 23
  22. Acquiring an open source font› Google Fonts (http://www.google.com/webfonts)› Kernest (http://www.kernest.com)› Font Squirrel (http://www.fontsquirrel.com)© Unic AG | Seite 24
  23. Off on a tangent: imitations© Unic AG | Seite 25
  24. Off on a tangent: imitations Syntax Struktur Pro overlapping© Unic AG | Seite 26
  25. IS IT A GOOD-QUALITY FONT?
  26. Quality: Is the Font Hinted?© Unic AG | Seite 28
  27. Quality: Is the Font Hinted? Illustration from "A closer look at TrueType hinting" on Typekit© Unic AG | Seite 29
  28. Quality: Is the Font Hinted? Illustration from "A closer look at TrueType hinting" on Typekit© Unic AG | Seite 30
  29. Quality: Free Trial© Unic AG | Seite 32
  30. Quality: In-Browser Sample© Unic AG | Seite 33
  31. Quality: Preemptive Troubleshooting© Unic AG | Seite 34
  32. Quality: Preemptive Troubleshooting jaggies© Unic AG | Seite 34
  33. CAN WE USE A HOSTING SERVICE?
  34. DO WE WANT TOUSE A HOSTING SERVICE?
  35. Pros & Cons› Pros › Cons › Maximum browser compatibility › Subscription based › Easy to use › Fonts only „rented“ › Quickly implemented › Complex payment models › Obfuscation › Difficult to administrate › Liability › Data privacy › Consistent delivery › Who is responsible for the account?© Unic AG | Seite 37
  36. SELECT HOSTING SERVICE
  37. Google Typekit Fonts.com Typotheque FontsLive Fontdeck WebINK Webtype Fonts tiered tiered per font per font per font tiered tiered Payment model none annual monthly one-off annual annual monthly annual domain/ bandwidth/ bandwidth/ bandwidth/ bandwidth/ bandwith per bandwidth per Limitations pageviews per pageviews per pageviews per pageviews per pageviews per none month month month month month month month Print /PDF Use depends NO YES NO NO NO NO YES Desktop use depends YES YES YES NO NO YES YES Free trial YES YES YES YES YES YES YES free SSL YES YES YES YES YES YES YES YESGoogle WebFont Loader YES YES YES YES YES YES NO YES Self-hosting YES YES YES YES NO NO YES NO
  38. Google Typekit Fonts.com Typotheque FontsLive Fontdeck WebINK Webtype Fonts tiered tiered per font per font per font tiered tiered Payment model none annual monthly one-off annual annual monthly annual domain/ bandwidth/ bandwidth/ bandwidth/ bandwidth/ bandwith per bandwidth per Limitations pageviews per pageviews per pageviews per pageviews per pageviews per none month month month month month month month Print /PDF Use depends NO YES NO NO NO NO YES Desktop use depends YES YES YES NO NO YES YES Free trial YES YES YES YES YES YES YES free SSL YES YES YES YES YES YES YES YESGoogle WebFont Loader YES YES YES YES YES YES NO YES Self-hosting YES YES YES YES NO NO YES NO
  39. Google Typekit Fonts.com Typotheque FontsLive Fontdeck WebINK Webtype Fonts tiered tiered per font per font per font tiered tiered Payment model none annual monthly one-off annual annual monthly annual domain/ bandwidth/ bandwidth/ bandwidth/ bandwidth/ bandwith per bandwidth per Limitations pageviews per pageviews per pageviews per pageviews per pageviews per none month month month month month month month Print /PDF Use depends NO YES NO NO NO NO YES Desktop use depends YES YES YES NO NO YES YES Free trial YES YES YES YES YES YES YES free SSL YES YES YES YES YES YES YES YESGoogle WebFont Loader YES YES YES YES YES YES NO YES Self-hosting YES YES YES YES NO NO YES NO
  40. Google Typekit Fonts.com Typotheque FontsLive Fontdeck WebINK Webtype Fonts tiered tiered per font per font per font tiered tiered Payment model none annual monthly one-off annual annual monthly annual domain/ bandwidth/ bandwidth/ bandwidth/ bandwidth/ bandwith per bandwidth per Limitations pageviews per pageviews per pageviews per pageviews per pageviews per none month month month month month month month Print /PDF Use depends NO YES NO NO NO NO YES Desktop use depends YES YES YES NO NO YES YES Free trial YES YES YES YES YES YES YES free SSL YES YES YES YES YES YES YES YESGoogle WebFont Loader YES YES YES YES YES YES NO YES Self-hosting YES YES YES YES NO NO YES NO
  41. DO WE WANT TOUSE A HOSTING SERVICE?
  42. GET THEWEB FONT
  43. Self-Hosting: Limitations› Domains allowed› Maximum pageviews› License available on server© Unic AG | Seite 44
  44. Self-Hosting: Moving in Together Commercial Free or Open Font Source Font buy web font kit convert into web font or get a web font kit© Unic AG | Seite 45
  45. Safari Firefox Internet Explorer Chrome Opera iPad/iPhone AndroidTrueType/OpenType TT (.ttf) OS v4.2 OS v2.2 OpenType PS (.otf) WOFF v5.1 V3.6 v9 v6 v11.10 EOT SVG OS v4.1 @font-face v3.1 v3.5 v4 v3 v10 v3.1 v3.1 46
  46. Self-Hosting: Web Kits© Unic AG | Seite 47
  47. Getting it to Work: @font-face@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 */ } p { font-family: ‘MyWebFont’, Arial, sans-serif }© Unic - Seite
  48. Getting it to Work: @font-face@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 */ } p { font-family: MyWebFont, Arial, sans-serif }© Unic - Seite
  49. Getting it to Work: @font-face@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 */ } p { font-family: ‘some font name’, Arial, sans-serif }© Unic - Seite
  50. Getting it to Work: @font-face@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 */ } p { font-family: ‘some font name’, Arial, sans-serif }© Unic - Seite
  51. Getting it to Work: @font-face@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 */ } p { font-family: ‘some font name’, Arial, sans-serif }© Unic - Seite
  52. What the FOUC?54
  53. What the FOUC? Flash of Unstyled Content54
  54. © Unic - Seite
  55. © Unic - Seite
  56. © Unic - Seite
  57. © Unic - Seite
  58. Not yet.
  59. Think positive thoughts!› Text is as beautiful as it can be on the Web right now.› Services are striving to improve.› Spirit of collaboration, not contention.© Unic AG | Seite 59
  60. http://magazin.unic.com
  61. CitationsWebfonts in the wild1. http://www.coucoushop.com/2. http://www.rosab.net/spip.php?page=rubrique&id_rubrique=6&lang=en3. http://www.stepping-grounds.com/4. http://www.thrivesolo.com/5. http://jaxvineyards.com/6. http://www.kitchensinkstudios.com/7. http://yebocreative.com/© Unic AG | Seite 61
  62. CitationsThe Great Typekit Table. List of "Windows OK" fonts available from Typekit.http://www.sleepoversf.com/the-great-typekit-table/Illustration from "A closer look at TrueType hinting" on Typekithttp://blog.typekit.com/2010/12/14/a-closer-look-at-truetype-hinting/Hosting services matrix compiled from "Web font hosting services – an overview"http://sprungmarker.de/wp-content/uploads/webfont-services/© Unic AG | Seite 62

×