Webfonts: Not Just a One-Night StandFrontend Conf 2011Zürich, 09. September 2011             Julia Dressler, Jessica Goodson
Seduced by web fonts› Branding recognition› Greater expressive flexibility› Clearer differentiaton from competition› Impro...
Seduced by web fonts› Branding recognition› Greater expressive flexibility› Clearer differentiaton from competition› Impro...
© Unic AG | Seite 10
The culmination of many historiesmid 80sSeite 11 © Unic AG |      mid 90s   2000   01   02   03   04   05   06   07   08  ...
The culmination of many histories                                             Font                                        ...
The culmination of many histories                                                Font                                     ...
The culmination of many histories                                                Font                                     ...
The culmination of many histories                                 › mid 80s                                   New business...
The culmination of many histories                                   › mid 90s                                     IE 4 and...
The culmination of many histories                                › mid 90s                                  terrible      ...
The culmination of many historiesComputer Fonts                                                                 LCD       ...
The culmination of many histories                                                Font                                     ...
We ♥ web fonts, but ...› ... there are still many considerations to take into account› What questions should we ask?› And ...
Our practical approachto webfonts, keepingthe love alive.
CUSTOMTYPOGRAPHY DESIRED?
WEB-SAFE FONT
Corporate font defined in style guide© Unic AG | Seite 20
HAS CUSTOMER    GOT A WEBLICENSE ALREADY?
IS WEB LICENSEAVAILABLE?
Acquiring a commercial web license› MyFonts (http://new.myfonts.com/)› Fontspring (http://www.fontspring.com/a2z)› FontsLi...
Acquiring an open source font› Google Fonts (http://www.google.com/webfonts)› Kernest (http://www.kernest.com)› Font Squir...
Off on a tangent: imitations© Unic AG | Seite 25
Off on a tangent: imitations                   Syntax                   Struktur Pro                                  over...
IS IT A GOOD-QUALITY FONT?
Quality: Is the Font Hinted?© Unic AG | Seite 28
Quality: Is the Font Hinted?                       Illustration from "A closer look at TrueType hinting" on Typekit© Unic ...
Quality: Is the Font Hinted?            Illustration from "A closer look at TrueType hinting" on Typekit© Unic AG | Seite 30
Quality: Free Trial© Unic AG | Seite 32
Quality: In-Browser Sample© Unic AG | Seite 33
Quality: Preemptive Troubleshooting© Unic AG | Seite 34
Quality: Preemptive Troubleshooting                               jaggies© Unic AG | Seite 34
CAN WE USE A HOSTING  SERVICE?
DO WE WANT TOUSE A HOSTING   SERVICE?
Pros & Cons› Pros                                › Cons    › Maximum browser compatibility    › Subscription based    › Ea...
SELECT HOSTING    SERVICE
Google                             Typekit       Fonts.com      Typotheque       FontsLive       Fontdeck        WebINK   ...
Google                             Typekit       Fonts.com      Typotheque       FontsLive       Fontdeck        WebINK   ...
Google                             Typekit       Fonts.com      Typotheque       FontsLive       Fontdeck        WebINK   ...
Google                             Typekit       Fonts.com      Typotheque       FontsLive       Fontdeck        WebINK   ...
DO WE WANT TOUSE A HOSTING   SERVICE?
GET THEWEB FONT
Self-Hosting: Limitations› Domains allowed› Maximum pageviews› License available on server© Unic AG | Seite 44
Self-Hosting: Moving in Together                        Commercial            Free or Open                          Font  ...
Safari          Firefox          Internet Explorer    Chrome        Opera              iPad/iPhone         AndroidTrueType...
Self-Hosting: Web Kits© Unic AG | Seite 47
Getting it to Work: @font-face@font-face {                 font-family: MyWebFont;                 src: url(webfont.eot); ...
Getting it to Work: @font-face@font-face {                 font-family: MyWebFont;                 src: url(webfont.eot); ...
Getting it to Work: @font-face@font-face {                 font-family: MyWebFont;                 src: url(webfont.eot); ...
Getting it to Work: @font-face@font-face {                 font-family: MyWebFont;                 src: url(webfont.eot); ...
Getting it to Work: @font-face@font-face {                 font-family: MyWebFont;                 src: url(webfont.eot); ...
What the FOUC?54
What the FOUC?     Flash of Unstyled Content54
© Unic - Seite
© Unic - Seite
© Unic - Seite
© Unic - Seite
Not yet.
Think positive thoughts!› Text is as beautiful as it can be on the Web right now.› Services are striving to improve.› Spir...
http://magazin.unic.com
CitationsWebfonts in the wild1. http://www.coucoushop.com/2. http://www.rosab.net/spip.php?page=rubrique&id_rubrique=6&lan...
CitationsThe Great Typekit Table. List of "Windows OK" fonts available from Typekit.http://www.sleepoversf.com/the-great-t...
Unic AG - Web Fonts: Not Just a One-Night Stand
Unic AG - Web Fonts: Not Just a One-Night Stand
Unic AG - Web Fonts: Not Just a One-Night Stand
Unic AG - Web Fonts: Not Just a One-Night Stand
Unic AG - Web Fonts: Not Just a One-Night Stand
Unic AG - Web Fonts: Not Just a One-Night Stand
Unic AG - Web Fonts: Not Just a One-Night Stand
Unic AG - Web Fonts: Not Just a One-Night Stand
Unic AG - Web Fonts: Not Just a One-Night Stand
Unic AG - Web Fonts: Not Just a One-Night Stand
Unic AG - Web Fonts: Not Just a One-Night Stand
Unic AG - Web Fonts: Not Just a One-Night Stand
Unic AG - Web Fonts: Not Just a One-Night Stand
Upcoming SlideShare
Loading in …5
×

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

6,965 views
6,364 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
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,965
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

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

×