The Type We Want (MIX10)
7 likes2,824 views
This document discusses different methods for embedding fonts on web pages, including their advantages and disadvantages. The font tag allowed using images of text for any font but had performance issues. CSS font stacks provide flexibility but not all fonts will be visible to users. JavaScript methods like SIFR and Cufón let any font be used but have limitations. The @font-face rule allows dynamic font usage with full CSS styling across browsers but requires font files in multiple formats and licensing can restrict embedding. Services exist to handle font hosting and formatting but have disadvantages around reliance on their servers. Subsetting and compression can improve performance but must be done carefully.
The Type We Want (MIX10)
- 1. THE TYPE WE WANT Fonts on the Web
- 2. WHAT DOES TYPOGRAPHY DO?
- 9. TYPOGRAPHY HELPS DEFINE… • Style • Feel • Mood • Readability
- 10. FONT TAG Ooh, we can make it pretty!
- 11. FONT TAG <font face="Arial" size="3"> I feel pretty. Oh so pretty. </font>
- 12. IMAGES Any font but at what price?
- 13. 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
- 14. TEXTORIZE • Server-based image generation • Uses Mac OS X rendering engine • Sub-pixel Anti-aliasing • Ruby-based • http://textorize.org/
- 15. CSS FONT STACKS Flexible design but who gets to see it?
- 16. CSS FONT STACKS #pretty { font-‐family: Arial, Helvetica, sans-‐serif; } #prettier { font-‐family: "Gotham Medium", sans-‐serif; }
- 17. 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>
- 18. 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
- 19. COMPLEX FONT STACKS "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif
- 20. 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
- 21. SIFR, CUFÓN, TYPEFACE Now we’re getting somewhere
- 22. 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
- 23. 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)
- 24. TYPEFACE.JS • Similar to Cufón • Includes letter-spacing and font-stretch
- 25. LICENSING • Most licenses aren’t very clear and should be clarified with foundry • Many fonts don’t allow embedding in this fashion
- 26. @FONT-FACE Have we reached utopia?
- 33. ADVANTAGES • Dynamic • Style with the full extent of CSS • Can work on mobile platforms • Print Quality
- 34. TRUETYPE (TTF) & OPENTYPE (OTF) • Firefox 3.5+, Safari 3+, Opera 10+ • Including Opera Mobile • In Chrome 4
- 35. EMBEDDABLE OPENTYPE (EOT) • Support in IE4+ • TTF2EOT – Command line – Web services exist to make this conversion • WEFT – Complete and utter garbage
- 36. 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
- 37. 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
- 38. CREATING SVG FONTS • FontForge • Batik – SVG may need to be cleaned up to remove extraneous data (empty nodes and attributes)
- 39. WEB OPEN FONT FORMAT (WOFF) • in Firefox 3.6 • Supported by major font foundries • IE9?
- 40. CREATING WOFF FILES • Command line tool: sfnt2woff • Mac or Windows http://people.mozilla.com/~jkew/woff/
- 41. 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'); }
- 42. 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
- 43. PERFORMANCE
- 44. SUBSETTING • Font files can be megabytes in size • Arial Unicode MS is 23MB • Many fonts are still 100K+
- 45. SUBSETTING • Subsetting reduces the number of glyphs in the file • great for latin languages • not so great for asian languages
- 47. 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
- 48. 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
- 49. 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
- 50. 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
- 51. BIGGEST HURDLE IS STILL LICENSING
- 52. 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
- 54. FONT EMBEDDING SERVICES • TypeKit • Typotheque • Kernest • FontDeck • FontSpring
- 55. 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
- 56. RESOURCES • FontForge http://fontforge.sourceforge.net/ • Batik http://xmlgraphics.apache.org/batik/tools/font- converter.html • FontSquirrel Generator http://www.fontsquirrel.com/fontface/generator
- 57. 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/
- 58. QUESTIONS?