The Type We Want
Upcoming SlideShare
Loading in...5
×
 

The Type We Want

on

  • 9,704 views

An in-depth look at font embedding on the web

An in-depth look at font embedding on the web

Statistics

Views

Total Views
9,704
Slideshare-icon Views on SlideShare
8,823
Embed Views
881

Actions

Likes
16
Downloads
115
Comments
0

8 Embeds 881

http://fontvilla.wordpress.com 815
http://blarnee.com 37
http://www.slideshare.net 15
https://fontvilla.wordpress.com 8
http://translate.googleusercontent.com 3
http://www.iweb34.com 1
http://www.taaza.com 1
http://cache.baidu.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    The Type We Want The Type We Want Presentation Transcript

    • The Type We Want Using Fonts on the Web Friday, November 6, 2009
    • Friday, November 6, 2009
    • Friday, November 6, 2009
    • Friday, November 6, 2009
    • Why? Typography is a key element in defining style feel mood readability Friday, November 6, 2009
    • The Font Tag Ooh, we can make it look pretty! Friday, November 6, 2009
    • Font Tag <font  face="Arial"  size="3">    I  feel  pretty.  Oh  so  pretty. </font> 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 <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> 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 Definitive Web Font Stacks http://articles.sitepoint.com/article/eight-definitive-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 difficult 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 clarified 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
    • Friday, November 6, 2009
    • 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 flag 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
    • 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: sfnt2woff Mac or Windows http://people.mozilla.com/~jkew/woff/ 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 files 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 file great for latin languages not so great for asian languages Friday, November 6, 2009
    • 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 first 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 Office 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