Successfully reported this slideshow.

The Changing Face of Web Typography

2

Share

Upcoming SlideShare
Web Typography
Web Typography
Loading in …3
×
1 of 38
1 of 38

The Changing Face of Web Typography

2

Share

Download to read offline

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.

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 Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

The Changing Face of Web Typography

  1. 1. THE CHANGING FACE OF web typography #webqtype
  2. 2. JANUARY 2010 “Type in HTML is limited to what the user 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 WRONG a 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
  9. 9. THE PROBLEM
  10. 10. THE PROBLEM Arial Palatino Comic Sans Tahoma Courier Times New Roman Georgia Trebuchet MS Impact Verdana Lucida Sans 
  11. 11. THE WORKAROUNDS
  12. 12. IMAGE REPLACEMENT
  13. 13. IMAGE REPLACEMENT BAD <img> element with no alt attribute BETTER <img> element within <h1> (or similar) BEST CSS background-image replacement
  14. 14. IMAGE REPLACEMENT IN 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 REPLACEMENT PROS CONS • design flexibility • filesize issues • simple • easy to do badly • “it just works” • maintenance
  16. 16. sIFR Scalable Inman Flash Replacement
  17. 17. HOW sIFR WORKS Your Generic Headline
  18. 18. HOW sIFR WORKS
  19. 19. HOW sIFR WORKS Your Generic Headline
  20. 20. sIFR CONS PROS • requires JS and Flash • independent of • “FOUT” content • hard to get perfect
  21. 21. CUFÓN no, not the Computer UFO Network
  22. 22. CUFÓN PROS CONS • faster than sIFR • requires JS • easier than sIFR • no text selectability • pronunciation
  23. 23. ENTER @font-face Our 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 SUPPORT IE 4 Firefox 3.5 Opera 10 Safari 3.1 Chrome 4 1997 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 FORMATS Different 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: Typekit.com Fonts.com Google.com/webfonts Fontdeck.com
  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!
  33. 33. DON’T STEAL FONTS
  34. 34. PLACES FOR LEGIT FONTS Kernest.com Google.com/webfonts Fontsquirrel.com League of Moveable Type FontSpring.com Others....
  35. 35. DON’T STEAL FONTS or else kittens will die
  36. 36. TECHNICAL CONCERNS FOUT* Resource downloads Outages Compression Lazy Loading http://bit.ly/cfowt
  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 Byrne ben@byrnecreative.com facebook.com/drywall AIM: drywallbmb Twitter: @drywall http://spkr8.com/t/7394

×