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

1. Webfonts: Not Just a One-Night Stand
Frontend Conf 2011
Zürich, 09. September 2011 Julia Dressler, Jessica Goodson

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

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

14. © Unic AG | Seite 10

15. The culmination of many histories
mid 80sSeite 11
© Unic AG | mid 90s 2000 '01 '02 '03 '04 '05 '06 '07 '08 '09 '10 '11

16. The culmination of many histories Font
Hosting
Services
Web
License
Computer
Fonts
Desktop
License
mid 80sSeite 11
© Unic AG | mid 90s 2000 '01 '02 '03 '04 '05 '06 '07 '08 '09 '10 '11

17. The culmination of many histories Font
Hosting
Services
Web
License
Computer
Fonts
@font-face
.woff
@font-face
Desktop .eot
License
@font-face
.ttf & .otf
mid 80sSeite 11
© Unic AG | mid 90s 2000 '01 '02 '03 '04 '05 '06 '07 '08 '09 '10 '11

18. The culmination of many histories Font
Hosting
Services
Web
License
Computer
Fonts
LCD @font-face
Monitors .woff
@font-face
Desktop .eot
License
ClearType DirectWrite
GDI+ with
standard @font-face
anti-aliasing .ttf & .otf
mid 80sSeite 11
© Unic AG | mid 90s 2000 '01 '02 '03 '04 '05 '06 '07 '08 '09 '10 '11

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

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

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

22. The culmination of many histories
Computer
Fonts
LCD @font-face
Monitors .woff
@font-face
Desktop .eot
License
ClearType DirectWrite
GDI+ with
standard @font-face
anti-aliasing .ttf & .otf
mid 80sSeite 15
© Unic AG | mid 90s 2000 '01 '02 '03 '04 '05 '06 '07 '08 '09 '10 '11

23. The culmination of many histories Font
Hosting
Services
Web
License
Computer
Fonts
LCD @font-face
Monitors .woff
@font-face
Desktop .eot
License
ClearType DirectWrite
GDI+ with
standard @font-face
anti-aliasing .ttf & .otf
mid 80sSeite 15
© Unic AG | mid 90s 2000 '01 '02 '03 '04 '05 '06 '07 '08 '09 '10 '11

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

25. Our practical approach
to webfonts, keeping
the love alive.

26. CUSTOM
TYPOGRAPHY
DESIRED?

27. WEB-SAFE FONT

28. Corporate font defined in style guide
© Unic AG | Seite 20

29. HAS CUSTOMER
GOT A WEB
LICENSE ALREADY?

30. IS WEB
LICENSE
AVAILABLE?

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

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

33. Off on a tangent: imitations
© Unic AG | Seite 25

34. Off on a tangent: imitations
Syntax
Struktur Pro
overlapping
© Unic AG | Seite 26

35. IS IT A GOOD-
QUALITY FONT?

36. Quality: Is the Font Hinted?
© Unic AG | Seite 28

37. Quality: Is the Font Hinted?
Illustration from "A closer look at TrueType hinting" on Typekit
© Unic AG | Seite 29

38. Quality: Is the Font Hinted?
Illustration from "A closer look at TrueType hinting" on Typekit
© Unic AG | Seite 30

40. Quality: Free Trial
© Unic AG | Seite 32

41. Quality: In-Browser Sample
© Unic AG | Seite 33

42. Quality: Preemptive Troubleshooting
© Unic AG | Seite 34

43. Quality: Preemptive Troubleshooting
jaggies
© Unic AG | Seite 34

44. CAN WE USE
A HOSTING
SERVICE?

45. DO WE WANT TO
USE A HOSTING
SERVICE?

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

47. SELECT HOSTING
SERVICE

48. 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 YES
Google WebFont Loader YES YES YES YES YES YES NO YES
Self-hosting YES YES YES YES NO NO YES NO

49. 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 YES
Google WebFont Loader YES YES YES YES YES YES NO YES
Self-hosting YES YES YES YES NO NO YES NO

50. 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 YES
Google WebFont Loader YES YES YES YES YES YES NO YES
Self-hosting YES YES YES YES NO NO YES NO

51. 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 YES
Google WebFont Loader YES YES YES YES YES YES NO YES
Self-hosting YES YES YES YES NO NO YES NO

52. DO WE WANT TO
USE A HOSTING
SERVICE?

53. GET THE
WEB FONT

54. Self-Hosting: Limitations
› Domains allowed
› Maximum pageviews
› License available on server
© Unic AG | Seite 44

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

56. Safari Firefox Internet Explorer Chrome Opera iPad/iPhone Android
TrueType/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

57. Self-Hosting: Web Kits
© Unic AG | Seite 47

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

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

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

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

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

64. What the FOUC?
54

65. What the FOUC?
Flash of Unstyled Content
54

66. © Unic - Seite

67. © Unic - Seite

68. © Unic - Seite

69. © Unic - Seite

70. Not yet.

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

73. http://magazin.unic.com

74. Citations
Webfonts in the wild
1. http://www.coucoushop.com/
2. http://www.rosab.net/spip.php?page=rubrique&id_rubrique=6&lang=en
3. 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

75. Citations
The 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 Typekit
http://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