Your SlideShare is downloading. ×
0
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
The State of Web Typography
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The State of Web Typography

2,920

Published 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.

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

No Downloads
Views
Total Views
2,920
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
49
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

×