Your SlideShare is downloading. ×
0
Webfonts
   The Hype about Type

               April 6th 2010




                                                1
Memi ...
How can designers make use of the
 rich variety of fonts on websites?




                                                ...
So far designers were limited to the
    fonts available on the user's
             machines.




                        ...
This means only fonts distributed
            with the OS.

font-family: Georgia, "Times New Roman", serif;




          ...
Helvetica                    vs.            Arial
 on Macintosh                             on Windows




               ...
Alternative:
Download the font from the server!




                                                  6
  Memi Beltrame: W...
Alternative:
  Download the font from the server!

CSS 2
@font-face {
                src: local("Alabama Italic"),
      ...
Alternative:
     Download the font from server!

CSS 2 Dropped in CSS 2.1
@font-face {
               src: local("Alabama...
2 Problems
                 • DRM
                 • Browsers




                                                9
Memi B...
DRM




                                                10
Memi Beltrame: Webfonts – The Hype about Type
DRM
Designers rely on good fonts




                                                11
Memi Beltrame: Webfonts – The Hype...
DRM
  Designers rely on good fonts
These have variations & dîàçrìtïcs




                                                ...
DRM
   Designers rely on good fonts
 These have variations & dîàçrìtïcs
Good fonts come from type foundries




          ...
DRM
   Designers rely on good fonts
 These have variations & dîàçrìtïcs
Good fonts come from type foundries
  These want m...
DRM
   Designers rely on good fonts
 These have variations & dîàçrìtïcs
Good fonts come from type foundries
  These want m...
DRM Solutions
1. Web Font Services




                                                16
Memi Beltrame: Webfonts – The Hy...
DRM Solutions
1. Web Font Services
Foundries:
 Linotype
Monotype




                                                 17
 ...
DRM Solutions
1. Web Font Services
                             Font-Service:
Foundries:     Licence to       Typekit
 Lin...
DRM Solutions
1. Web Font Services
                                Font-Service:
Foundries:     Licence to          Typeki...
Typekit
- Sign up




                                                        20
        Memi Beltrame: Webfonts – The Hyp...
Typekit
- Sign up
- Choose type of account




                                                        21
        Memi Bel...
Typekit
- Sign up
- Choose type of account
- Choose font(s)




                                                        22...
Typekit
- Sign up
- Choose type of account
- Choose font(s)                                   Unique identifer
- Embed mar...
DRM Solutions
      2. Open Fonts




                                                24
Memi Beltrame: Webfonts – The Hyp...
DRM Solutions
      2. Open Fonts
 http://openfontlibrary.org/




                                                25
Memi...
DRM Solutions
            2. Open Fonts
Open Font Library:
- Ensures open licencing
  (public domain, SIL Open Font Licenc...
DRM Solutions
            2. Open Fonts
Open Font Library:
- Ensures open licencing
  (public domain, SIL Open Font Licenc...
DRM Solutions
            2. Open Fonts
Open Font Library:
- Ensures open licencing
  (public domain, SIL Open Font Licenc...
Browsers




                                                29
Memi Beltrame: Webfonts – The Hype about Type
Browsers
Internet Explorer only understands EOT




                                                     30
     Memi Belt...
Browsers
Internet Explorer only understands EOT
     No TTF, OTF, SVG, WOFF (new!)




                                   ...
Browsers
Internet Explorer only understands EOT
     No TTF, OTF, SVG, WOFF (new!)
@font-face {
               font-family...
Browsers
Formats for Non-IE Browsers




                                                33
Memi Beltrame: Webfonts – The ...
Browsers
The Format Names:
  SVG – Scalable Vector Graphics
  TTF - True Type Fonts
  OTF – Open Type Format
  WOFF - Web ...
Browsers




For an in-depth analysis cf http://liip.to/fontEngineComparison

                                            ...
Browsers


Problems with ttf:
   - Mozilla support is new
   - Chrome disables it by default

                            ...
Browsers


Problems with otf:
   - Mozilla support is new
   - No Chrome support
   - doesn't render nicely on Windows

  ...
Browsers


Problems with svg:
   - Mozilla does not support it, at least not very well


                                 ...
Browsers
        SVG : W3C recommendation
        Implementation:




Source:
http://de.wikipedia.org/wiki/Svg


         ...
WOFF
WOFF - Web Open Font Format
- a Wrapper for SVG, TTF, OTF




                                                     40...
WOFF
WOFF - Web Open Font Format
- a Wrapper for SVG, TTF, OTF
- compressed losslessly




                               ...
WOFF
WOFF - Web Open Font Format
- a Wrapper for SVG, TTF, OTF
- compressed losslessly
- FF 3.6 frst browser shipping WOFF...
WOFF
WOFF - Web Open Font Format
- a Wrapper for SVG, TTF, OTF
- compressed losslessly
- FF 3.6 frst browser shipping WOFF...
WOFF
WOFF - Web Open Font Format
- a Wrapper for SVG, TTF, OTF
- compressed losslessly
- FF 3.6 frst browser shipping WOFF...
WOFF
 Includes optional metadata




                                                45
Memi Beltrame: Webfonts – The Hype...
WOFF
   Includes optional metadata

 Vendors can tag their fonts with
information related to font usage.



              ...
WOFF
    Includes optional metadata

  Vendors can tag their fonts with
 information related to font usage.

Font usage ca...
WOFF
Firefox:
 - default same-origin restriction




                                                      48
      Memi B...
WOFF
Firefox:
 - default same-origin restriction
 - only loads WOFF from the same domain




                             ...
WOFF
Firefox:
 - default same-origin restriction
 - only loads WOFF from the same domain
 - makes font-vendors happy!



 ...
So why this
sudden font hype?



                                                51
Memi Beltrame: Webfonts – The Hype abo...
So why this
  sudden font hype?
Implementation of the @font-face
 directive gained signifcant speed.



                  ...
So why this
  sudden font hype?
        Font-services make
designers and type foundries happy



                         ...
So why this
    sudden font hype?
WOFF may become the new standard for
         fonts on the web.
      With Microsoft on ...
Read more:

http://delicious.com/plonk/webfonts




                                                   55
   Memi Beltrame...
Thank you!
      memibeltrame.ch
twitter.com/bratwurstkomet

     More presentations:
slideshare.net/memibeltrame
        ...
Upcoming SlideShare
Loading in...5
×

Webfonts: The Hype about Type

3,285

Published on

So far designers were limited to the fonts available on the user's machines. All of a sudden New possibilities seem to open up.

Published in: Design, Technology, Art & Photos
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,285
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
29
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Webfonts: The Hype about Type"

  1. 1. Webfonts The Hype about Type April 6th 2010 1 Memi Beltrame: Webfonts – The Hype about Type
  2. 2. How can designers make use of the rich variety of fonts on websites? 2 Memi Beltrame: Webfonts – The Hype about Type
  3. 3. So far designers were limited to the fonts available on the user's machines. 3 Memi Beltrame: Webfonts – The Hype about Type
  4. 4. This means only fonts distributed with the OS. font-family: Georgia, "Times New Roman", serif; 4 Memi Beltrame: Webfonts – The Hype about Type
  5. 5. Helvetica vs. Arial on Macintosh on Windows 5 Memi Beltrame: Webfonts – The Hype about Type
  6. 6. Alternative: Download the font from the server! 6 Memi Beltrame: Webfonts – The Hype about Type
  7. 7. Alternative: Download the font from the server! CSS 2 @font-face { src: local("Alabama Italic"), url(http://fonts.org/alabama-italic) format("truetype"); } 7 Memi Beltrame: Webfonts – The Hype about Type
  8. 8. Alternative: Download the font from server! CSS 2 Dropped in CSS 2.1 @font-face { src: local("Alabama Italic"), url(http://fonts.org/alabama-italic) format("truetype"); } 8 Memi Beltrame: Webfonts – The Hype about Type
  9. 9. 2 Problems • DRM • Browsers 9 Memi Beltrame: Webfonts – The Hype about Type
  10. 10. DRM 10 Memi Beltrame: Webfonts – The Hype about Type
  11. 11. DRM Designers rely on good fonts 11 Memi Beltrame: Webfonts – The Hype about Type
  12. 12. DRM Designers rely on good fonts These have variations & dîàçrìtïcs 12 Memi Beltrame: Webfonts – The Hype about Type
  13. 13. DRM Designers rely on good fonts These have variations & dîàçrìtïcs Good fonts come from type foundries 13 Memi Beltrame: Webfonts – The Hype about Type
  14. 14. DRM Designers rely on good fonts These have variations & dîàçrìtïcs Good fonts come from type foundries These want money for their use 14 Memi Beltrame: Webfonts – The Hype about Type
  15. 15. DRM Designers rely on good fonts These have variations & dîàçrìtïcs Good fonts come from type foundries These want money for their use DRM 15 Memi Beltrame: Webfonts – The Hype about Type
  16. 16. DRM Solutions 1. Web Font Services 16 Memi Beltrame: Webfonts – The Hype about Type
  17. 17. DRM Solutions 1. Web Font Services Foundries: Linotype Monotype 17 Memi Beltrame: Webfonts – The Hype about Type
  18. 18. DRM Solutions 1. Web Font Services Font-Service: Foundries: Licence to Typekit Linotype Typotheque Monotype Fontdeck 18 Memi Beltrame: Webfonts – The Hype about Type
  19. 19. DRM Solutions 1. Web Font Services Font-Service: Foundries: Licence to Typekit Linotype Typotheque Monotype Fontdeck Licence to you Domain 1 Domain 2 19 Memi Beltrame: Webfonts – The Hype about Type
  20. 20. Typekit - Sign up 20 Memi Beltrame: Webfonts – The Hype about Type
  21. 21. Typekit - Sign up - Choose type of account 21 Memi Beltrame: Webfonts – The Hype about Type
  22. 22. Typekit - Sign up - Choose type of account - Choose font(s) 22 Memi Beltrame: Webfonts – The Hype about Type
  23. 23. Typekit - Sign up - Choose type of account - Choose font(s) Unique identifer - Embed markup <script type="text/javascript" src="http://use.typekit.com/cyq6gmy.js"> </script> <script type="text/javascript"> try{Typekit.load();}catch(e){} </script> 23 Memi Beltrame: Webfonts – The Hype about Type
  24. 24. DRM Solutions 2. Open Fonts 24 Memi Beltrame: Webfonts – The Hype about Type
  25. 25. DRM Solutions 2. Open Fonts http://openfontlibrary.org/ 25 Memi Beltrame: Webfonts – The Hype about Type
  26. 26. DRM Solutions 2. Open Fonts Open Font Library: - Ensures open licencing (public domain, SIL Open Font Licence) 26 Memi Beltrame: Webfonts – The Hype about Type
  27. 27. DRM Solutions 2. Open Fonts Open Font Library: - Ensures open licencing (public domain, SIL Open Font Licence) - Ensures a certain standard in fonts 27 Memi Beltrame: Webfonts – The Hype about Type
  28. 28. DRM Solutions 2. Open Fonts Open Font Library: - Ensures open licencing (public domain, SIL Open Font Licence) - Ensures a certain standard in fonts Is no guarantee for professional fonts 28 Memi Beltrame: Webfonts – The Hype about Type
  29. 29. Browsers 29 Memi Beltrame: Webfonts – The Hype about Type
  30. 30. Browsers Internet Explorer only understands EOT 30 Memi Beltrame: Webfonts – The Hype about Type
  31. 31. Browsers Internet Explorer only understands EOT No TTF, OTF, SVG, WOFF (new!) 31 Memi Beltrame: Webfonts – The Hype about Type
  32. 32. Browsers Internet Explorer only understands EOT No TTF, OTF, SVG, WOFF (new!) @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('Graublau Web Regular'), local('Graublau Web'), url('GraublauWeb.otf') format('opentype'); } YES IT'S A HACK! 32 Memi Beltrame: Webfonts – The Hype about Type
  33. 33. Browsers Formats for Non-IE Browsers 33 Memi Beltrame: Webfonts – The Hype about Type
  34. 34. Browsers The Format Names: SVG – Scalable Vector Graphics TTF - True Type Fonts OTF – Open Type Format WOFF - Web Open Font Format 34 Memi Beltrame: Webfonts – The Hype about Type
  35. 35. Browsers For an in-depth analysis cf http://liip.to/fontEngineComparison 35 Memi Beltrame: Webfonts – The Hype about Type
  36. 36. Browsers Problems with ttf: - Mozilla support is new - Chrome disables it by default 36 Memi Beltrame: Webfonts – The Hype about Type
  37. 37. Browsers Problems with otf: - Mozilla support is new - No Chrome support - doesn't render nicely on Windows 37 Memi Beltrame: Webfonts – The Hype about Type
  38. 38. Browsers Problems with svg: - Mozilla does not support it, at least not very well 38 Memi Beltrame: Webfonts – The Hype about Type
  39. 39. Browsers SVG : W3C recommendation Implementation: Source: http://de.wikipedia.org/wiki/Svg 39 Memi Beltrame: Webfonts – The Hype about Type
  40. 40. WOFF WOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF 40 Memi Beltrame: Webfonts – The Hype about Type
  41. 41. WOFF WOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF - compressed losslessly 41 Memi Beltrame: Webfonts – The Hype about Type
  42. 42. WOFF WOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF - compressed losslessly - FF 3.6 frst browser shipping WOFF 42 Memi Beltrame: Webfonts – The Hype about Type
  43. 43. WOFF WOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF - compressed losslessly - FF 3.6 frst browser shipping WOFF - MS 'considers' support in IE 9 43 Memi Beltrame: Webfonts – The Hype about Type
  44. 44. WOFF WOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF - compressed losslessly - FF 3.6 frst browser shipping WOFF - MS 'considers' support in IE 9 - is backed by type foundries 44 Memi Beltrame: Webfonts – The Hype about Type
  45. 45. WOFF Includes optional metadata 45 Memi Beltrame: Webfonts – The Hype about Type
  46. 46. WOFF Includes optional metadata Vendors can tag their fonts with information related to font usage. 46 Memi Beltrame: Webfonts – The Hype about Type
  47. 47. WOFF Includes optional metadata Vendors can tag their fonts with information related to font usage. Font usage can be monitored but not completely restricted 47 Memi Beltrame: Webfonts – The Hype about Type
  48. 48. WOFF Firefox: - default same-origin restriction 48 Memi Beltrame: Webfonts – The Hype about Type
  49. 49. WOFF Firefox: - default same-origin restriction - only loads WOFF from the same domain 49 Memi Beltrame: Webfonts – The Hype about Type
  50. 50. WOFF Firefox: - default same-origin restriction - only loads WOFF from the same domain - makes font-vendors happy! 50 Memi Beltrame: Webfonts – The Hype about Type
  51. 51. So why this sudden font hype? 51 Memi Beltrame: Webfonts – The Hype about Type
  52. 52. So why this sudden font hype? Implementation of the @font-face directive gained signifcant speed. 52 Memi Beltrame: Webfonts – The Hype about Type
  53. 53. So why this sudden font hype? Font-services make designers and type foundries happy 53 Memi Beltrame: Webfonts – The Hype about Type
  54. 54. So why this sudden font hype? WOFF may become the new standard for fonts on the web. With Microsoft on board. 54 Memi Beltrame: Webfonts – The Hype about Type
  55. 55. Read more: http://delicious.com/plonk/webfonts 55 Memi Beltrame: Webfonts – The Hype about Type
  56. 56. Thank you! memibeltrame.ch twitter.com/bratwurstkomet More presentations: slideshare.net/memibeltrame liip.ch 56 Memi Beltrame: Webfonts – The Hype about Type
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×