The Changing Face of Web Typography

Uploaded 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 …

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.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. THE CHANGING FACE OFweb typography #webqtype
  • 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. I WAS WRONG
  • 4. I WAS WRONGa lot has changed since then
  • 5. IN THE BEGINNING (or very near it)
  • 6. EARLY HTML TYPE CONTROLS <h1> – <h6> <b> <i> <strong> <em> <pre> <code> <cite>
  • 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. ENTER CSS• font-family stack• font-style/weight• font-size• letter-spacing• text-transform• text-indent
  • 10. THE PROBLEM Arial Palatino Comic Sans Tahoma Courier Times New Roman Georgia Trebuchet MS Impact VerdanaLucida Sans 
  • 13. IMAGE REPLACEMENTBAD <img> element with no alt attributeBETTER <img> element within <h1> (or similar)BEST CSS background-image replacement
  • 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. IMAGE REPLACEMENTPROS CONS• design flexibility • filesize issues• simple • easy to do badly• “it just works” • maintenance
  • 16. sIFRScalable Inman Flash Replacement
  • 17. HOW sIFR WORKSYour Generic Headline
  • 18. HOW sIFR WORKS
  • 19. HOW sIFR WORKSYour Generic Headline
  • 20. sIFR CONSPROS • requires JS and Flash• independent of • “FOUT” content • hard to get perfect
  • 21. CUFÓNno, not the Computer UFO Network
  • 22. CUFÓNPROS CONS• faster than sIFR • requires JS• easier than sIFR • no text selectability • pronunciation
  • 23. ENTER @font-faceOur long-awaited savior (sort of)
  • 24. @font-face HISTORY• First introduced in css2 in 1998• Removed in css2.1 in 2002• Re-introduced in css3
  • 25. @font-face SUPPORTIE 4 Firefox 3.5 Opera 10 Safari 3.1 Chrome 41997 2009 2009 2008 Jan 2010
  • 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. BUT WAIT!
  • 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. @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. LEVERAGING @font-face third-party hosted vs self-serve
  • 31. THIRD-PARTY TOOLS • take the complexities out • often cost money • providers:
  • 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. PLACES FOR LEGIT FONTS League of Moveable Type Others....
  • 35. DON’T STEAL FONTS or else kittens will die
  • 36. TECHNICAL CONCERNS FOUT* Resource downloads Outages Compression Lazy Loading
  • 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. CONNECT Ben AIM: drywallbmb Twitter: @drywall