The State of Web Typography

  • 2,830 views
Uploaded on

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

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

More in: 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,830
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
48
Comments
0
Likes
5

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. Sunday, April 3, 2011 1
  • 2. three YEARS ago BarCamp Miami 2008Sunday, April 3, 2011 2
  • 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. 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. “Being a web designer will soon require a deeper understanding of typography and how typefaces work.” NOVEMBER 2009Sunday, April 3, 2011 5
  • 6. 2010 the year of @font-faceSunday, April 3, 2011 6
  • 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. 2010: Year of @font-faceSunday, April 3, 2011 8
  • 9. 2010: Year of @font-faceSunday, April 3, 2011 9
  • 10. 2010: Year of @font-faceSunday, April 3, 2011 10
  • 11. 2010: Year of @font-faceSunday, April 3, 2011 11
  • 12. 2010: Year of @font-faceSunday, April 3, 2011 12
  • 13. Where are we now?: 2011Sunday, April 3, 2011 13
  • 14. css3 TYPOGRAPHY font-variant font-stretch text-shadow hypenation word-wrap font-size-adjust text-emphasizeSunday, April 3, 2011 14
  • 15. css3 TYPOGRAPHY text-decorationSunday, April 3, 2011 15
  • 16. css3 TYPOGRAPHY multi-columnSunday, April 3, 2011 16
  • 17. css3 TYPOGRAPHY multi-columnSunday, April 3, 2011 17
  • 18. css3 TYPOGRAPHY text-overflowSunday, April 3, 2011 18
  • 19. css3 TYPOGRAPHY text-overflowSunday, April 3, 2011 19
  • 20. Sunday, April 3, 2011 20
  • 21. @font-face SYNTAX Bulletproof @font-faceSunday, April 3, 2011 21
  • 22. @font-face SYNTAX Mo’ Bulletproof @font-faceSunday, April 3, 2011 22
  • 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. @font-face GENERATORSunday, April 3, 2011 24
  • 25. Question: Why does the syntax have to be so complicated? Answer: Different browsers like different file formats.Sunday, April 3, 2011 25
  • 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. 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. ^ why WOFF ?Sunday, April 3, 2011 28
  • 29. Sunday, April 3, 2011 29
  • 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. 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. font RENDERING Easy fix: hi-res displays http://www.apple.com/Sunday, April 3, 2011 32
  • 33. font ABUSE Remember this? (I’ve blocked it out)Sunday, April 3, 2011 33
  • 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. “With great power comes great responsibility.” UNCLE BEN SPIDERMANSunday, April 3, 2011 35
  • 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. font LICENSING Free & open source • fontsquirrel.com • openfontlibrary.org • theleagueofmoveabletype.com • code.google.com/webfontsSunday, April 3, 2011 37
  • 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. 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. Question: What’s the difference between Typekit (or any font delivery service) and @font-face? Answer: Not much.Sunday, April 3, 2011 40
  • 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. the FUTURE? More paid (and unpaid) solutions ?Sunday, April 3, 2011 42
  • 43. the FUTURE? Improved renderingSunday, April 3, 2011 43
  • 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. THANKS derekbender.com @derekbender slideshare.net/derekbender vidaroo.com featuring League Gothic, Futura, Georgia, Helvetica Neue & TungstenSunday, April 3, 2011 45