The Type We Want (MIX10)

5,206 views

Published on

The Type We Want covering font embedding on the web.

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

No Downloads
Views
Total views
5,206
On SlideShare
0
From Embeds
0
Number of Embeds
890
Actions
Shares
0
Downloads
1
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

The Type We Want (MIX10)

  1. 1. THE TYPE WE WANT Fonts on the Web
  2. 2. WHAT DOES TYPOGRAPHY DO?
  3. 3. TYPOGRAPHY HELPS DEFINE… •  Style •  Feel •  Mood •  Readability
  4. 4. FONT TAG Ooh, we can make it pretty!
  5. 5. FONT TAG <font  face="Arial"  size="3">      I  feel  pretty.  Oh  so  pretty.   </font>  
  6. 6. IMAGES Any font but at what price?
  7. 7. IMAGES •  Images allows for any font to be used •  Performance •  Only practical for limited items with short text •  Abused by clients •  Printing is less than ideal •  No text selection
  8. 8. TEXTORIZE •  Server-based image generation •  Uses Mac OS X rendering engine •  Sub-pixel Anti-aliasing •  Ruby-based •  http://textorize.org/
  9. 9. CSS FONT STACKS Flexible design but who gets to see it?
  10. 10. CSS FONT STACKS #pretty  {      font-­‐family:  Arial,  Helvetica,   sans-­‐serif;   }   #prettier  {      font-­‐family:  "Gotham  Medium",   sans-­‐serif;   }  
  11. 11. OOPS! <p  class="bodytext">I  want  to  look   pretty</p>   <p  class="bodytext">I  want  to  feel   pretty</p>   <p  class="bodytext">I  want  to  be   pretty</p>  
  12. 12. COMMON FONT STACKS •  Arial, Helvetica, sans-serif •  Courier New, Courier, monospace •  Times New Roman, Times, serif •  Georgia, Times New Roman, Times, serif •  Verdana, Arial, Helvetica, sans-serif •  Geneva, Arial, Helvetica, sans-serif
  13. 13. COMPLEX FONT STACKS "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif
  14. 14. COMPLEX FONT STACK •  Better Font Stacks http://unitinteractive.com/blog/2008/06/26/better- css-font-stacks/ •  8 Definitive Web Font Stacks http://articles.sitepoint.com/article/eight-definitive- font-stacks
  15. 15. SIFR, CUFÓN, TYPEFACE Now we’re getting somewhere
  16. 16. SIFR •  requires JavaScript AND Flash •  Slow for a lot of elements •  Best used for headlines •  Can be difficult to tweak •  Support for CSS features is limited
  17. 17. CUFÓN •  Generates SVG font and VML outlines •  Draws to <canvas> in all browsers that support it (ie: not IE) •  No text selection •  Original text is made invisible •  Supports some CSS Styling (more than sIFR)
  18. 18. TYPEFACE.JS •  Similar to Cufón •  Includes letter-spacing and font-stretch
  19. 19. LICENSING •  Most licenses aren’t very clear and should be clarified with foundry •  Many fonts don’t allow embedding in this fashion
  20. 20. @FONT-FACE Have we reached utopia?
  21. 21. ADVANTAGES •  Dynamic •  Style with the full extent of CSS •  Can work on mobile platforms •  Print Quality
  22. 22. TRUETYPE (TTF) & OPENTYPE (OTF) •  Firefox 3.5+, Safari 3+, Opera 10+ •  Including Opera Mobile •  In Chrome 4
  23. 23. EMBEDDABLE OPENTYPE (EOT) •  Support in IE4+ •  TTF2EOT –  Command line –  Web services exist to make this conversion •  WEFT –  Complete and utter garbage
  24. 24. OTF TTF EOT •  EOT apps require TTF but most fonts today are OTF. •  FontForge will convert OTF to TTF •  Font names aren’t transferred and must be set manually to allow TTF to EOT process to work reliably. http://snook.ca/archives/html_and_css/screencast- converting-ttf2eot
  25. 25. SVG FONTS •  Chrome 0.3+ support with no need for a command line flag •  Works on iPhone OS3.1+ •  Opera bug doesn’t show embedded font on second tab •  Text selection works but not consistently
  26. 26. CREATING SVG FONTS •  FontForge •  Batik –  SVG may need to be cleaned up to remove extraneous data (empty nodes and attributes)
  27. 27. WEB OPEN FONT FORMAT (WOFF) •  in Firefox 3.6 •  Supported by major font foundries •  IE9?
  28. 28. CREATING WOFF FILES •  Command line tool: sfnt2woff •  Mac or Windows http://people.mozilla.com/~jkew/woff/
  29. 29. BULLETPROOF @FONT-FACE @font-­‐face  {      font-­‐family:  'MuseoCustom';      src:  url('MuseoSans-­‐500.eot');      src:  local('Museo  Sans  500'),                  local('MuseoSans-­‐500'),                  url('museo.woff')  format('woff'),                url('MuseoSans-­‐500.ttf')                        format('opentype'),                url('museo.svg#museo')  format ('svg');   }  
  30. 30. FONT SQUIRREL •  one step conversion process •  Upload TTF or OTF •  Provides EOT, SVG and WOFF format •  Creates example HTML and CSS •  Supports Cufón fallback •  Does subsetting
  31. 31. PERFORMANCE
  32. 32. SUBSETTING •  Font files can be megabytes in size •  Arial Unicode MS is 23MB •  Many fonts are still 100K+
  33. 33. SUBSETTING •  Subsetting reduces the number of glyphs in the file •  great for latin languages •  not so great for asian languages
  34. 34. SUBSETTING PROBLEMS •  Be careful removing lower case glyphs if using upper case •  IE and Opera have a bug with text- transform: uppercase that will use fallback font instead of subsetted font
  35. 35. COMPRESSION •  EOT and WOFF support compression •  WEFT compresses by default, TTF2EOT doesn’t •  Use GZIP compression where font isn’t already compressed –  uncompressed EOT –  TTF, OTF, and SVG
  36. 36. FLASH OF UNSTYLED TEXT •  Firefox, Opera shows unstyled text until font downloaded (FOUT!) •  Blocking in IE if <script> before @font- face declaration; otherwise, unstyled until font downloaded
  37. 37. FLASH OF UNSTYLED TEXT •  Safari, Chrome show no text until font downloaded •  Opera 10.10 doesn’t show the embedded font after the first page
  38. 38. BIGGEST HURDLE IS STILL LICENSING
  39. 39. LICENSING •  Most fonts, even some free fonts, DON’T allow @font-face embedding •  Foundries that support WOFF haven’t provided updated licenses yet •  Contact them directly for more info
  40. 40. SOLVING THESE PROBLEMS
  41. 41. FONT EMBEDDING SERVICES •  TypeKit •  Typotheque •  Kernest •  FontDeck •  FontSpring
  42. 42. DISADVANTAGES TO SERVICES •  If the server goes down, does your design have a suitable fallback? •  Some services require JavaScript •  None of the services serve SVG •  Services obfuscate to prevent ability to install font permanently •  Not cached
  43. 43. RESOURCES •  FontForge http://fontforge.sourceforge.net/ •  Batik http://xmlgraphics.apache.org/batik/tools/font- converter.html •  FontSquirrel Generator http://www.fontsquirrel.com/fontface/generator
  44. 44. WHERE TO GET FONTS •  FontSquirrel http://www.fontsquirrel.com/ •  TypeKit http://typekit.com/ •  Typotheque http://www.typotheque.com/ •  FontSpring http://www.fontspring.com/ •  Kernest http://www.kernest.com/
  45. 45. QUESTIONS?

×