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 •  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

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

BIGGEST HURDLE IS STILL LICENSING

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

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 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/

QUESTIONS?