Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Changing Face of Web Typography


Published on

Type on the web has evolved significantly over time as designers and developers have fought to overcome limitations on web fonts. This presentation provides a brief history of different techniques that have been used over the years to get around these obstacles, including image replacement and sIFR, before getting in-depth with @font-face.

Presented to Webuquerque on May 4, 2011.

Published in: Technology, Design
  • Be the first to comment

The Changing Face of Web Typography

  1. 1. THE CHANGING FACE OFweb typography #webqtype
  2. 2. JANUARY 2010“Type in HTML is limited to what theuser has installed on his/her computer” “You don’t have a lot of fonts to choose from”
  3. 3. I WAS WRONG
  4. 4. I WAS WRONGa lot has changed since then
  5. 5. IN THE BEGINNING (or very near it)
  6. 6. EARLY HTML TYPE CONTROLS <h1> – <h6> <b> <i> <strong> <em> <pre> <code> <cite>
  7. 7. THE <font> TAG • introduced in HTML 3.2 (January 1997) • deprecated in HTML 4.0 (December 1997)Yes, this has been deprecated for over 13 years. stop using it.
  8. 8. ENTER CSS• font-family stack• font-style/weight• font-size• letter-spacing• text-transform• text-indent
  10. 10. THE PROBLEM Arial Palatino Comic Sans Tahoma Courier Times New Roman Georgia Trebuchet MS Impact VerdanaLucida Sans 
  13. 13. IMAGE REPLACEMENTBAD <img> element with no alt attributeBETTER <img> element within <h1> (or similar)BEST CSS background-image replacement
  14. 14. IMAGE REPLACEMENTIN YOUR HTML:<h1 id=“title”>This is the headline</h1>IN YOUR CSS:h1#title { height: 40px; width: 350px; overflow: hidden; text-indent: -9999px; background-image:url(headline.png);}
  15. 15. IMAGE REPLACEMENTPROS CONS• design flexibility • filesize issues• simple • easy to do badly• “it just works” • maintenance
  16. 16. sIFRScalable Inman Flash Replacement
  17. 17. HOW sIFR WORKSYour Generic Headline
  18. 18. HOW sIFR WORKS
  19. 19. HOW sIFR WORKSYour Generic Headline
  20. 20. sIFR CONSPROS • requires JS and Flash• independent of • “FOUT” content • hard to get perfect
  21. 21. CUFÓNno, not the Computer UFO Network
  22. 22. CUFÓNPROS CONS• faster than sIFR • requires JS• easier than sIFR • no text selectability • pronunciation
  23. 23. ENTER @font-faceOur long-awaited savior (sort of)
  24. 24. @font-face HISTORY• First introduced in css2 in 1998• Removed in css2.1 in 2002• Re-introduced in css3
  25. 25. @font-face SUPPORTIE 4 Firefox 3.5 Opera 10 Safari 3.1 Chrome 41997 2009 2009 2008 Jan 2010
  26. 26. HOW @font-face WORKS@font-face { font-family: ‘Yourfont’; src: url(‘fontfile.ttf’) format(‘truetype’);}@font-face { font-family: ‘Yourfont’; font-weight: bold; src: url(‘fontfile-bold.ttf’) format(‘truetype’);}body { font-family: Yourfont, Arial, sans-serif;}
  27. 27. BUT WAIT!
  28. 28. FONT FORMATSDifferent browsers support different font file types: TrueType OpenType WOFF(mobile)Safari Safari IE9 Opera Opera Firefox 3.6 Firefox Firefox Chrome 6 EOT SVG IE iOS<4.2 and of course you want to avoid local fonts...
  29. 29. @font-face REVISITED@font-face { font-family: MyWebFont; src: url(webfont.eot); src: url(webfont.eot?#iefix) format(embedded-opentype), url(webfont.woff) format(woff), url(webfont.ttf) format(truetype), url(webfont.svg#svgFontName) format(svg); } ...or something like that anyway...
  30. 30. LEVERAGING @font-face third-party hosted vs self-serve
  31. 31. THIRD-PARTY TOOLS • take the complexities out • often cost money • providers:
  32. 32. SELF-HOSTING• no ongoing costs• no CDN (for better or worse)• require you to provide fonts in correct formats• need to worry about licensing This is fontsquirrel. fontsquirrel is your friend!
  34. 34. PLACES FOR LEGIT FONTS League of Moveable Type Others....
  35. 35. DON’T STEAL FONTS or else kittens will die
  36. 36. TECHNICAL CONCERNS FOUT* Resource downloads Outages Compression Lazy Loading
  37. 37. ON THE HORIZON... font-kerning font-variant-ligatures font-variant-caps font-variant-numeric font-variant-alternates and more!but still nothing for cross-platform rendering!
  38. 38. CONNECT Ben AIM: drywallbmb Twitter: @drywall