Upload
jonathan-snook
View
121
Download
0
Embed Size (px)
DESCRIPTION
The Type We Want covering font embedding on the web.
Citation preview
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?