• Save
Mix10 final snook_ds15
Upcoming SlideShare
Loading in...5

Mix10 final snook_ds15






Total Views
Views on SlideShare
Embed Views



1 Embed 3

http://www.slideshare.net 3


Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Mix10 final snook_ds15 Mix10 final snook_ds15 Presentation Transcript

  • THE TYPE WE WANT Fonts on the Web
  • 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 •  Abused by clients •  Printing is less than ideal •  No text selection
  • TEXTORIZE •  Server-based image generation •  Uses Mac OS X rendering engine •  Sub-pixel Anti-aliasing •  Ruby-based •  http://textorize.org/
  • CSS FONT STACKS Flexible design but who gets to see it?
  • CSS FONT STACKS #pretty  {      font-­‐family:  Arial,  Helvetica,   sans-­‐serif;   }   #prettier  {      font-­‐family:  "Gotham  Medium",   sans-­‐serif;   }  
  • 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>  
  • 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
  • COMPLEX FONT STACKS "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif
  • 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
  • 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 to tweak •  Support for CSS features is limited
  • 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)
  • 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 in this fashion
  • @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 •  WEFT –  Complete and utter garbage
  • 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
  • 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
  • CREATING SVG FONTS •  FontForge •  Batik –  SVG may need to be cleaned up to remove extraneous data (empty nodes and attributes)
  • 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-­‐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');   }  
  • 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
  • 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 asian languages
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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 require JavaScript •  None of the services serve SVG •  Services obfuscate to prevent ability to install font permanently •  Not cached
  • RESOURCES •  FontForge http://fontforge.sourceforge.net/ •  Batik http://xmlgraphics.apache.org/batik/tools/font- converter.html •  FontSquirrel Generator http://www.fontsquirrel.com/fontface/generator
  • 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/