The Type We Want

The Type We Want Using Fonts on the Web Friday, November 6, 2009

Friday, November 6, 2009

Why? Typography is a key element in deﬁning style feel mood readability Friday, November 6, 2009

The Font Tag Ooh, we can make it look pretty! Friday, November 6, 2009

Font Tag I feel pretty. Oh so pretty. Friday, November 6, 2009

Images Any font but at what price? Friday, November 6, 2009

Images Images allows for any font to be used Only practical for limited items with short text Abused by clients Printing is less than ideal Friday, November 6, 2009

CSS and Font Stacks Flexible design but who gets to see it? Friday, November 6, 2009

CSS #pretty { font-‐family: Arial, Helvetica, sans-‐serif; } #prettier { font-‐family: "Gotham Medium", sans-‐serif; } Friday, November 6, 2009

Oops I want to look pretty I want to feel pretty I want to be pretty Friday, November 6, 2009

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 Friday, November 6, 2009

Complex Font Stacks // Verdana Alternative font-‐family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-‐serif; Friday, November 6, 2009

Complex Font Stacks 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 Friday, November 6, 2009

sIFR, Cufón, Typeface Now we’re getting somewhere Friday, November 6, 2009

sIFR 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 Friday, November 6, 2009

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) Friday, November 6, 2009

Typeface.js Supports additional CSS styling over Cufon such as letter-spacing and font-stretch. Friday, November 6, 2009

Licensing Most licenses aren’t very clear and should be clariﬁed with foundry Many fonts don’t allow embedding in this fashion Friday, November 6, 2009

@font-face Have we reached utopia? Friday, November 6, 2009

TrueType (TTF) & OpenType (OTF) Supported in Firefox 3.5+, Safari 3+, Opera 10+ Including Opera Mobile Expected in Chrome 4 Can be enabled in Chrome now with a command line switch Friday, November 6, 2009

Embedded OpenType (EOT) Support in IE4+ TTF2EOT Command line Web services exist to make this conversion WEFT Complete and utter garbage Friday, November 6, 2009

Getting from OTF to TTF to EOT The problem with the EOT apps is that they require a TTF and 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 Friday, November 6, 2009

SVG 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 Friday, November 6, 2009

Creating SVG Fonts FontForge Requires tweak to XML namespace Batik SVG may need to be cleaned up to remove extraneous data (empty nodes and attributes) Friday, November 6, 2009

Web Open Font Format (WOFF) in Firefox 3.6 (beta 1 just released) Supported by major font foundries Friday, November 6, 2009

Creating WOFF Files Command line tool: sfnt2woﬀ Mac or Windows http://people.mozilla.com/~jkew/woﬀ/ Friday, November 6, 2009

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'); } Friday, November 6, 2009

All-in-one Conversion Font Squirrel provides a one step conversion process Upload TTF or OTF Provides EOT, SVG and WOFF format Does subsetting Creates example HTML and CSS Friday, November 6, 2009

Subsetting Font ﬁles can be megabytes in size Arial Unicode MS is 23MB Many fonts are still 100K+ Friday, November 6, 2009

Subsetting Subsetting reduces the number of glyphs in the ﬁle great for latin languages not so great for asian languages Friday, November 6, 2009

Subsetting Gotcha 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 Friday, November 6, 2009

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 Friday, November 6, 2009

Performance Firefox, Opera shows unstyled text until font downloaded (FOUT!) Blocking in IE if <script> before @font-face declaration; otherwise, unstyled until font downloaded Safari, Chrome show no text until font downloaded Opera doesn’t show the embedded font after the ﬁrst page http://www.useragentman.com/blog/2009/10/09/more-font- face-fun/ http://www.stevesouders.com/blog/2009/10/13/font-face-and- performance/ Friday, November 6, 2009

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 Friday, November 6, 2009

Font Embedding Services TypeKit Typotheque Kernest Friday, November 6, 2009

Disadvantages of FES 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 Friday, November 6, 2009

Resources FontForge http://fontforge.sourceforge.net/ Batik http://xmlgraphics.apache.org/batik/tools/font-converter.html FontSquirrel Generator http://www.fontsquirrel.com/fontface/generator Friday, November 6, 2009

Where to get fonts FontSquirrel http://www.fontsquirrel.com/ TypeKit http://typekit.com/ Typotheque http://www.typotheque.com/ Kernest http://www.kernest.com/ Friday, November 6, 2009

Presentation Fonts Headlines: League Gothic Free and open source; supports all manner of embedding Body: Museo Sans 500 Free and supports @font-face embedding as long as you link back to the foundry Additional weights available for sale Code: Consolas Comes with Microsoft Oﬃce Not free and requires special EOT embedding license Friday, November 6, 2009

Questions? Hit me with your best shot. Fire away. Friday, November 6, 2009

http://fontvilla.wordpress.com	419
http://blarnee.com	37
http://www.slideshare.net	15
http://translate.googleusercontent.com	2
http://www.iweb34.com	1
http://www.taaza.com	1
http://cache.baidu.com	1

The Type We Want

by Jonathan Snook on Nov 06, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 476

Statistics

The Type We Want — Presentation Transcript