The Changing Face of Web Typography

  • 2,876 views
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

Views

Total Views
2,876
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
29
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 9. THE PROBLEM
  • 10. THE PROBLEM Arial Palatino Comic Sans Tahoma Courier Times New Roman Georgia Trebuchet MS Impact VerdanaLucida Sans 
  • 11. THE WORKAROUNDS
  • 12. IMAGE REPLACEMENT
  • 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: Typekit.com Fonts.com Google.com/webfonts Fontdeck.com
  • 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!
  • 33. DON’T STEAL FONTS
  • 34. PLACES FOR LEGIT FONTS Kernest.com Google.com/webfonts Fontsquirrel.com League of Moveable Type FontSpring.com Others....
  • 35. DON’T STEAL FONTS or else kittens will die
  • 36. TECHNICAL CONCERNS FOUT* Resource downloads Outages Compression Lazy Loading http://bit.ly/cfowt
  • 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 Byrneben@byrnecreative.com facebook.com/drywall AIM: drywallbmb Twitter: @drywallhttp://spkr8.com/t/7394