The Type We Want (MIX10)

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 I feel pretty. Oh so pretty.

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! I want to look pretty I want to feel pretty I want to be pretty

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 Deﬁnitive Web Font Stacks http://articles.sitepoint.com/article/eight-deﬁnitive- 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 diﬃcult 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 ﬂag •  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 @fontface 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 ﬁrst 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?

http://snook.ca	733
http://www.snook.ca	54
http://kcmr.tumblr.com	14
http://carllindberg.com	6
http://www.slideshare.net	4
http://feeds.feedburner.com	3
http://static.slidesharecdn.com	3
http://xss.yandex.net	3
http://fr.1f.hu	2
http://ethertank.tumblr.com	1
http://www.totanus.net	1
http://rss.mmckeon.com	1
resource://brief-content	1
http://clients.entegral.com.tr	1

The Type We Want (MIX10)

by Jonathan Snook on Mar 17, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

14 Embeds 827

Statistics

The Type We Want (MIX10) — Presentation Transcript