The Changing Face of Web Typography
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

The Changing Face of Web Typography

  • 2,843 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,843
On Slideshare
2,790
From Embeds
53
Number of Embeds
3

Actions

Shares
Downloads
29
Comments
0
Likes
2

Embeds 53

http://webuquerque.com 50
http://webuquerque.ablognotlimited.com 2
http://www.webuquerque.com 1

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