Sunday, April 3, 2011   1
three YEARS ago                          BarCamp Miami 2008Sunday, April 3, 2011                          2
css2 TYPOGRAPHY                              font-family                              font-style                          ...
beyond WEB-SAFE typography                                 sIFR                                Cufón                      ...
“Being a web designer will soon           require a deeper understanding of         typography and how typefaces work.”   ...
2010                        the year of @font-faceSunday, April 3, 2011                            6
why 2010?                 Improved browser support                 New type format for web only (WOFF)                 Mor...
2010: Year of @font-faceSunday, April 3, 2011                              8
2010: Year of @font-faceSunday, April 3, 2011                              9
2010: Year of @font-faceSunday, April 3, 2011                              10
2010: Year of @font-faceSunday, April 3, 2011                              11
2010: Year of @font-faceSunday, April 3, 2011                              12
Where are we now?:                           2011Sunday, April 3, 2011                        13
css3 TYPOGRAPHY                             font-variant                             font-stretch                         ...
css3 TYPOGRAPHY                            text-decorationSunday, April 3, 2011                         15
css3 TYPOGRAPHY                            multi-columnSunday, April 3, 2011                      16
css3 TYPOGRAPHY                            multi-columnSunday, April 3, 2011                      17
css3 TYPOGRAPHY                            text-overflowSunday, April 3, 2011                       18
css3 TYPOGRAPHY                            text-overflowSunday, April 3, 2011                       19
Sunday, April 3, 2011   20
@font-face SYNTAX                           Bulletproof @font-faceSunday, April 3, 2011                               21
@font-face SYNTAX                          Mo’ Bulletproof @font-faceSunday, April 3, 2011                                ...
@font-face SYNTAX                               Fontspring @font-face syntax                       Works in Safari 5.03, I...
@font-face GENERATORSunday, April 3, 2011                          24
Question:                        Why does the syntax have to be                              so complicated?              ...
@font-face FORMATS                 OTF - OpenType Font                 TTF - TrueType Font                 EOT - Embedded ...
BROWSER compatibility                 Firefox 3.5+ (TTF, OTF)                 Firefox 3.6+ (TTF, OTF, WOFF)               ...
^                         why                        WOFF                          ?Sunday, April 3, 2011          28
Sunday, April 3, 2011   29
font RENDERING                        @font-face relies on a browser’s native font rendering                              ...
font RENDERING                                     Operating systems                                         Web browsers ...
font RENDERING                         Easy fix: hi-res displays                              http://www.apple.com/Sunday,...
font ABUSE                        Remember this?                        (I’ve blocked it out)Sunday, April 3, 2011        ...
“Just because you can use                               the font that looks                        like it’s wearing bellb...
“With great power                        comes great responsibility.”                                 UNCLE BEN           ...
font LICENSING             Not all fonts are licensed for web usage             Font foundries have no way to keep fonts f...
font LICENSING             Free & open source                 • fontsquirrel.com                 • openfontlibrary.org    ...
font LICENSING               Paid font solutions                   • Typekit                   • Fontdeck                 ...
paid FONT solutions                        Licensed fonts          Rent versus buy                            Hosted      ...
Question:                        What’s the difference between                        Typekit (or any font delivery       ...
the FUTURE?                        More fonts will include web use in EULAs                               Focus on securit...
the FUTURE?                        More paid (and unpaid) solutions                                      ?Sunday, April 3,...
the FUTURE?                         Improved renderingSunday, April 3, 2011                         43
resources & LINKS                              http://www.alistapart.com/articles/on-web-typography/                      ...
THANKS                                          derekbender.com                                            @derekbender   ...
Upcoming SlideShare
Loading in...5
×

The State of Web Typography

2,950

Published on

A summary of where web typography is as a technology. Covers CSS3 and @font-face.

Published in: Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,950
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
49
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

The State of Web Typography

  1. 1. Sunday, April 3, 2011 1
  2. 2. three YEARS ago BarCamp Miami 2008Sunday, April 3, 2011 2
  3. 3. css2 TYPOGRAPHY font-family font-style font-weight font-size word-spacing letter-spacing text-decoration text-transform line-height vertical-alignSunday, April 3, 2011 3
  4. 4. beyond WEB-SAFE typography sIFR Cufón P+C DTR FLIR SIIR sIFR 3 DTR typeface.js swfIR & more!Sunday, April 3, 2011 4
  5. 5. “Being a web designer will soon require a deeper understanding of typography and how typefaces work.” NOVEMBER 2009Sunday, April 3, 2011 5
  6. 6. 2010 the year of @font-faceSunday, April 3, 2011 6
  7. 7. why 2010? Improved browser support New type format for web only (WOFF) More fonts allowing web use in EULA More @font-face resources being available New implementation techniques • Typekit, Fontdeck & others • Roll your ownSunday, April 3, 2011 7
  8. 8. 2010: Year of @font-faceSunday, April 3, 2011 8
  9. 9. 2010: Year of @font-faceSunday, April 3, 2011 9
  10. 10. 2010: Year of @font-faceSunday, April 3, 2011 10
  11. 11. 2010: Year of @font-faceSunday, April 3, 2011 11
  12. 12. 2010: Year of @font-faceSunday, April 3, 2011 12
  13. 13. Where are we now?: 2011Sunday, April 3, 2011 13
  14. 14. css3 TYPOGRAPHY font-variant font-stretch text-shadow hypenation word-wrap font-size-adjust text-emphasizeSunday, April 3, 2011 14
  15. 15. css3 TYPOGRAPHY text-decorationSunday, April 3, 2011 15
  16. 16. css3 TYPOGRAPHY multi-columnSunday, April 3, 2011 16
  17. 17. css3 TYPOGRAPHY multi-columnSunday, April 3, 2011 17
  18. 18. css3 TYPOGRAPHY text-overflowSunday, April 3, 2011 18
  19. 19. css3 TYPOGRAPHY text-overflowSunday, April 3, 2011 19
  20. 20. Sunday, April 3, 2011 20
  21. 21. @font-face SYNTAX Bulletproof @font-faceSunday, April 3, 2011 21
  22. 22. @font-face SYNTAX Mo’ Bulletproof @font-faceSunday, April 3, 2011 22
  23. 23. @font-face SYNTAX Fontspring @font-face syntax Works in Safari 5.03, IE 6-9, Firefox 3.6-4, Chrome 8, iOS 3.2-4.2, Android 2.2-2.3, Opera 11Sunday, April 3, 2011 23
  24. 24. @font-face GENERATORSunday, April 3, 2011 24
  25. 25. Question: Why does the syntax have to be so complicated? Answer: Different browsers like different file formats.Sunday, April 3, 2011 25
  26. 26. @font-face FORMATS OTF - OpenType Font TTF - TrueType Font EOT - Embedded OpenType WOFF - Web Open Font Format SVG - Scalable Vector GraphicSunday, April 3, 2011 26
  27. 27. BROWSER compatibility Firefox 3.5+ (TTF, OTF) Firefox 3.6+ (TTF, OTF, WOFF) Safari 3.1+ (TTF, OTF, SVG) Chrome 5+ (TTF, OTF, WOFF, SVG) Opera 10+ (TTF, OTF, SVG) IE 4+ (EOT) IE 9+ (EOT, WOFF) MobileWebkit (SVG) Android (TTF, OTF)Sunday, April 3, 2011 27
  28. 28. ^ why WOFF ?Sunday, April 3, 2011 28
  29. 29. Sunday, April 3, 2011 29
  30. 30. font RENDERING @font-face relies on a browser’s native font rendering http://blog.typekit.com/2010/10/05/type-rendering-on-the-web/Sunday, April 3, 2011 30
  31. 31. font RENDERING Operating systems Web browsers Font smoothing preferences Font files Typeface hinting http://blog.typekit.com/2010/10/05/type-rendering-on-the-web/Sunday, April 3, 2011 31
  32. 32. font RENDERING Easy fix: hi-res displays http://www.apple.com/Sunday, April 3, 2011 32
  33. 33. font ABUSE Remember this? (I’ve blocked it out)Sunday, April 3, 2011 33
  34. 34. “Just because you can use the font that looks like it’s wearing bellbottoms, doesnt mean you should .” http://www.alistapart.com/articles/on-web-typography/Sunday, April 3, 2011 34
  35. 35. “With great power comes great responsibility.” UNCLE BEN SPIDERMANSunday, April 3, 2011 35
  36. 36. font LICENSING Not all fonts are licensed for web usage Font foundries have no way to keep fonts from being used Typefaces are electronic files, like MP3s • Difficult to protect against piracy • Like pirating a movie It’s illegal (And not cool)Sunday, April 3, 2011 36
  37. 37. font LICENSING Free & open source • fontsquirrel.com • openfontlibrary.org • theleagueofmoveabletype.com • code.google.com/webfontsSunday, April 3, 2011 37
  38. 38. font LICENSING Paid font solutions • Typekit • Fontdeck • WebINK (Extensis) • Typotheque • Kernest • and more • look for something from Hoefler & Frere-Jones (HF&J) soonSunday, April 3, 2011 38
  39. 39. paid FONT solutions Licensed fonts Rent versus buy Hosted Flash of Unstyled Text (FOUT) Secure No offline version Writes the code $$$ Standards compliantSunday, April 3, 2011 39
  40. 40. Question: What’s the difference between Typekit (or any font delivery service) and @font-face? Answer: Not much.Sunday, April 3, 2011 40
  41. 41. the FUTURE? More fonts will include web use in EULAs Focus on security (DRM?) More new quality webfonts More affordable typefaces Offline preview in your own designsSunday, April 3, 2011 41
  42. 42. the FUTURE? More paid (and unpaid) solutions ?Sunday, April 3, 2011 42
  43. 43. the FUTURE? Improved renderingSunday, April 3, 2011 43
  44. 44. resources & LINKS http://www.alistapart.com/articles/on-web-typography/ http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax http://lostworldsfairs.com/ CSS3 Fonts module - http://www.w3.org/TR/WD-font/ http://net.tutsplus.com/tutorials/html-css-techniques/typography-on-the-web/ @font-face Code Generator - http://www.fontsquirrel.com/fontface/generator http://blog.typekit.com/2010/10/05/type-rendering-on-the-web/ How to Choose a Typeface - http://bit.ly/choosetype Elements of Typographic Style Applied to the Web - http://webtypography.net/intro/ Gzip your fonts - http://www.phpied.com/gzip-your-font-face-files/Sunday, April 3, 2011 44
  45. 45. THANKS derekbender.com @derekbender slideshare.net/derekbender vidaroo.com featuring League Gothic, Futura, Georgia, Helvetica Neue & TungstenSunday, April 3, 2011 45
  1. A particular slide catching your eye?

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

×