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?