Your SlideShare is downloading. ×
0
THE CHANGING FACE OFweb typography                     #webqtype
JANUARY 2010“Type in HTML is limited to what theuser has installed on his/her computer”       “You don’t have a lot of    ...
I WAS WRONG
I WAS WRONGa lot has changed since then
IN THE BEGINNING    (or very near it)
EARLY HTML TYPE CONTROLS         <h1> – <h6>           <b> <i>        <strong> <em>      <pre> <code> <cite>
THE <font> TAG       • introduced in HTML 3.2 (January 1997)       • deprecated in HTML 4.0 (December 1997)Yes, this has b...
ENTER CSS•   font-family stack•   font-style/weight•   font-size•   letter-spacing•   text-transform•   text-indent
THE PROBLEM
THE PROBLEM       Arial   Palatino Comic Sans    Tahoma   Courier     Times New Roman    Georgia    Trebuchet MS     Impac...
THE WORKAROUNDS
IMAGE REPLACEMENT
IMAGE REPLACEMENTBAD <img> element with no alt attributeBETTER <img> element within <h1> (or similar)BEST CSS background-i...
IMAGE REPLACEMENTIN YOUR HTML:<h1 id=“title”>This is the headline</h1>IN YOUR CSS:h1#title {  height: 40px;  width: 350px;...
IMAGE REPLACEMENTPROS                   CONS• design flexibility   • filesize issues• simple               • easy to do ba...
sIFRScalable Inman Flash Replacement
HOW sIFR WORKSYour Generic Headline
HOW sIFR WORKS
HOW sIFR WORKSYour Generic Headline
sIFR                     CONSPROS                     • requires JS and Flash• independent of                     • “FOUT”...
CUFÓNno, not the Computer UFO Network
CUFÓNPROS                 CONS• faster than sIFR   • requires JS• easier than sIFR   • no text selectability              ...
ENTER @font-faceOur long-awaited savior (sort of)
@font-face HISTORY•   First introduced in css2 in 1998•   Removed in css2.1 in 2002•   Re-introduced in css3
@font-face SUPPORTIE 4   Firefox 3.5   Opera 10   Safari 3.1   Chrome 41997      2009        2009       2008        Jan 2010
HOW @font-face WORKS@font-face {  font-family: ‘Yourfont’;  src: url(‘fontfile.ttf’) format(‘truetype’);}@font-face {  fon...
BUT WAIT!
FONT FORMATSDifferent browsers support different font file types:  TrueType              OpenType                      WOF...
@font-face REVISITED@font-face {  font-family: MyWebFont;  src: url(webfont.eot);  src: url(webfont.eot?#iefix) format(emb...
LEVERAGING @font-face   third-party hosted vs self-serve
THIRD-PARTY TOOLS • take the complexities out • often cost money • providers:     Typekit.com     Fonts.com     Google.com...
SELF-HOSTING• no ongoing costs• no CDN (for better or worse)• require you to provide fonts in correct formats• need to wor...
DON’T STEAL FONTS
PLACES FOR LEGIT FONTS           Kernest.com      Google.com/webfonts         Fontsquirrel.com     League of Moveable Type...
DON’T STEAL FONTS    or else kittens will die
TECHNICAL CONCERNS         FOUT*    Resource downloads         Outages       Compression       Lazy Loading     http://bit...
ON THE HORIZON...             font-kerning         font-variant-ligatures           font-variant-caps         font-variant...
CONNECT      Ben Byrneben@byrnecreative.com facebook.com/drywall  AIM: drywallbmb   Twitter: @drywallhttp://spkr8.com/t/7394
Upcoming SlideShare
Loading in...5
×

The Changing Face of Web Typography

3,630

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
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,630
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
35
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "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
  9. 9. THE PROBLEM
  10. 10. THE PROBLEM Arial Palatino Comic Sans Tahoma Courier Times New Roman Georgia Trebuchet MS Impact VerdanaLucida Sans 
  11. 11. THE WORKAROUNDS
  12. 12. IMAGE REPLACEMENT
  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: 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 Byrneben@byrnecreative.com facebook.com/drywall AIM: drywallbmb Twitter: @drywallhttp://spkr8.com/t/7394
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×