THE TYPE WE WANT
   Fonts on the Web
WHAT DOES TYPOGRAPHY DO?
TYPOGRAPHY HELPS DEFINE…
•    Style
•    Feel
•    Mood
•    Readability
FONT TAG
Ooh, we can make it pretty!
FONT TAG
<font	
  face="Arial"	
  size="3">	
  
	
  	
  I	
  feel	
  pretty.	
  Oh	
  so	
  pretty.	
  
</font>	
  
IMAGES
Any font but at what price?
IMAGES
•  Images allows for any font to be used
•  Performance
•  Only practical for limited items with
   short text
•  A...
TEXTORIZE
•    Server-based image generation
•    Uses Mac OS X rendering engine
•    Sub-pixel Anti-aliasing
•    Ruby-ba...
CSS FONT STACKS
Flexible design but who gets to see it?
CSS FONT STACKS
#pretty	
  {	
  
	
  	
  font-­‐family:	
  Arial,	
  Helvetica,	
  
      sans-­‐serif;	
  
}	
  
#prettie...
OOPS!
<p	
  class="bodytext">I	
  want	
  to	
  look	
  
  pretty</p>	
  
<p	
  class="bodytext">I	
  want	
  to	
  feel	
...
COMMON FONT STACKS
•    Arial, Helvetica, sans-serif
•    Courier New, Courier, monospace
•    Times New Roman, Times, ser...
COMPLEX FONT STACKS
"Segoe UI", Candara, "Bitstream Vera Sans",
  "DejaVu Sans", "Bitstream Vera Sans",
  "Trebuchet MS", ...
COMPLEX FONT STACK
•  Better Font Stacks
 http://unitinteractive.com/blog/2008/06/26/better-
 css-font-stacks/
•  8 Definit...
SIFR, CUFÓN, TYPEFACE
  Now we’re getting somewhere
SIFR
•    requires JavaScript AND Flash
•    Slow for a lot of elements
•    Best used for headlines
•    Can be difficult t...
CUFÓN
•  Generates SVG font and VML outlines
•  Draws to <canvas> in all browsers that
   support it (ie: not IE)
•  No te...
TYPEFACE.JS
•  Similar to Cufón
•  Includes letter-spacing and font-stretch
LICENSING
•  Most licenses aren’t very clear and should
   be clarified with foundry
•  Many fonts don’t allow embedding i...
@FONT-FACE
Have we reached utopia?
ADVANTAGES
•    Dynamic
•    Style with the full extent of CSS
•    Can work on mobile platforms
•    Print Quality
TRUETYPE (TTF) & OPENTYPE (OTF)
•  Firefox 3.5+, Safari 3+, Opera 10+
•  Including Opera Mobile
•  In Chrome 4
EMBEDDABLE OPENTYPE (EOT)
•  Support in IE4+
•  TTF2EOT
  –  Command line
  –  Web services exist to make this conversion
...
OTF       TTF      EOT
•  EOT apps require TTF but most fonts
   today are OTF.
•  FontForge will convert OTF to TTF
•  Fo...
SVG FONTS
•  Chrome 0.3+ support with no need for a
   command line flag
•  Works on iPhone OS3.1+
•  Opera bug doesn’t sho...
CREATING SVG FONTS
•  FontForge
•  Batik
  –  SVG may need to be cleaned up to remove
     extraneous data (empty nodes an...
WEB OPEN FONT FORMAT (WOFF)
•  in Firefox 3.6
•  Supported by major font foundries
•  IE9?
CREATING WOFF FILES
•  Command line tool: sfnt2woff
•  Mac or Windows
 http://people.mozilla.com/~jkew/woff/
BULLETPROOF @FONT-FACE
@font-­‐face	
  {	
  
	
  	
  font-­‐family:	
  'MuseoCustom';	
  
	
  	
  src:	
  url('MuseoSans-­...
FONT SQUIRREL
•    one step conversion process
•    Upload TTF or OTF
•    Provides EOT, SVG and WOFF format
•    Creates ...
PERFORMANCE
SUBSETTING
•  Font files can be megabytes in size
•  Arial Unicode MS is 23MB
•  Many fonts are still 100K+
SUBSETTING
•  Subsetting reduces the number of glyphs
   in the file
•  great for latin languages
•  not so great for asia...
SUBSETTING PROBLEMS
•  Be careful removing lower case glyphs if
   using upper case
•  IE and Opera have a bug with text-
...
COMPRESSION
•  EOT and WOFF support compression
•  WEFT compresses by default, TTF2EOT
   doesn’t
•  Use GZIP compression ...
FLASH OF UNSTYLED TEXT
•  Firefox, Opera shows unstyled text until
   font downloaded (FOUT!)
•  Blocking in IE if <script...
FLASH OF UNSTYLED TEXT
•  Safari, Chrome show no text until font
   downloaded
•  Opera 10.10 doesn’t show the
   embedded...
BIGGEST HURDLE IS STILL LICENSING
LICENSING
•  Most fonts, even some free fonts, DON’T
   allow @font-face embedding
•  Foundries that support WOFF haven’t
...
SOLVING THESE PROBLEMS
FONT EMBEDDING SERVICES
•    TypeKit
•    Typotheque
•    Kernest
•    FontDeck
•    FontSpring
DISADVANTAGES TO SERVICES
•  If the server goes down, does your
   design have a suitable fallback?
•  Some services requi...
RESOURCES
•  FontForge
  http://fontforge.sourceforge.net/
•  Batik
  http://xmlgraphics.apache.org/batik/tools/font-
  co...
WHERE TO GET FONTS
•  FontSquirrel
 http://www.fontsquirrel.com/
•  TypeKit
 http://typekit.com/
•  Typotheque
 http://www...
QUESTIONS?
Mix10 final snook_ds15
Mix10 final snook_ds15
Mix10 final snook_ds15
Mix10 final snook_ds15
Mix10 final snook_ds15
Mix10 final snook_ds15
Mix10 final snook_ds15
Mix10 final snook_ds15
Mix10 final snook_ds15
Mix10 final snook_ds15
Mix10 final snook_ds15
Mix10 final snook_ds15
Mix10 final snook_ds15
Upcoming SlideShare
Loading in...5
×

Mix10 final snook_ds15

1,580

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
1,580
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Mix10 final snook_ds15"

  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?

×