New Web Typography

2,675 views
2,588 views

Published on

Web Fonts -- Why they're Revolutionizing the Web and What You Need to Know to Use Them to Your Advantage

Published in: Design, Technology, Art & Photos
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,675
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
31
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

New Web Typography

  1. 1. The New Web Typography #webfonts @aigachicago
  2. 2. Web Design is 95% Typography Oliver Reichenstein October 19, 2006 http://bit.ly/aKq4RK
  3. 3. Web design is aboutthe user experience& brand experience
  4. 4. From desktop to mobile
  5. 5. Great Typography equals Great Usability
  6. 6. Brand consistency → familiarity, comfortAppropriate typeface → clear communicationGood typography → readability & navigationUser Centric → highest level of usability and UX
  7. 7. 2011 – year of Web fonts?Web fonts supported by all major browsers! Mobile Web coming along quickly
  8. 8. It feels like 1985 again Web fonts will bring atypographic revolution to Web design similar to desktop publishing!
  9. 9. So just what are Web fonts?
  10. 10. The ability to go beyond “Web-safe” fontsh1 {font-family: Helvetica, Arial, Verdana, Calibri, Sans-serif; font-size: 40px; font-style: bold;}
  11. 11. Expand your typographic choices with downloadable fontsh1 {font-family: ‘Gill Sans’ Helvetica, Arial, Verdana, Calibri, Sans-serif; font-size: 40px; font-style: bold;url(‘GillSans.woff’);}
  12. 12. WhyWeb fonts?
  13. 13. Primary benefits of Web fontsEliminate headline images > Text is more flexible > Streamline workflow
  14. 14. Primary benefits of Web fontsEliminate headline imagesImprove typographic consistency (print>Web)
  15. 15. Primary benefits of Web fontsEliminate headline imagesImprove typographic consistency (print>Web)Achieve Web standards compliance > Accessibility > SEO indexibility
  16. 16. How did we get here?
  17. 17. Web fonts have come a long way1998 2004 2008 2010
  18. 18. Web font formatsToday there are 4 typical Web font formats:• TrueType® (.TTF) or OpenType® (.OTF)• EOT (Embedded OpenType)• SVG (Scalable Vector Graphics fonts)• WOFF (Web Open Font Format)
  19. 19. Technology moves quickly97.5% of desktop browsers support Web fontsWOFF is only supported by 38% of browsers Source: W3Schools.com April 2011, Kombinat-typefounders.com May 2011
  20. 20. Are Web fonts easy to implement?
  21. 21. Web fonts can be complicated TTF W EO SV OF T G F
  22. 22. Coding CSS to support all browsers/* Internet Explorer */ /* Firefox 3.6+ Opera 11.5+ */@font-face { @font-face { font-family: Rockwell; font-family: Rockwell; src: url("Rockwell‐web.eot"); src: url("Rockwell‐web.woff") font-style: normal; format("woff"); font-weight: normal; font-style: normal;} font-weight: normal; }/* Firefox 3.5, Safari 3.1+,Chrome 4+, Opera 10 */ /* Safari Mobile (Except Android OS),@font-face { Chrome 3 */ font-family: Rockwell; @font-face { src: url("Rockwell‐web.ttf") font-family: Rockwell;format("truetype"); src: url("Rockwell‐web.svg#web") font-style: normal; format("svg"); font-weight: normal; font-style: normal;} font-weight: normal; }
  23. 23. Are you kidding me?
  24. 24. Web fonts are at the early stagesImage source: http://upload.wikimedia.org/wikipedia/commons/d/d3/Technology-Adoption-Lifecycle.png
  25. 25. How can we simplify Web fonts?
  26. 26. Web fonts hosting servicesWeb designers simply add a link to their CSSThe service does the heavy-liftingAutomatic updating of fonts/browser supportSubscription service vs. one-time license fee
  27. 27. Challengeswith Web fonts
  28. 28. Differences in font renderingFonts look different on Mac®, Windows®, Android™ systems> If you design on a Mac, proof on a PC
  29. 29. Not all fonts look good on screenLegacy “desktop” fonts made for print outputText vs. Headline fontsNew fonts are being designed for the screen
  30. 30. Font file sizeOn the Web, it’s all about latency!Ways to optimize fonts > Subset characters for language support > Remove OpenType features > Use file compression
  31. 31. OpenType features in CSS3 Coming soon to all browsers? Firefox test page:http://catalog.monotypeimaging.com/demo/ot.aspx
  32. 32. A few of my favorite Web fonts tools
  33. 33. browserlab.adobe.com
  34. 34. typetester.org
  35. 35. webtype.com/tools/swapper/
  36. 36. webfontspreview.com
  37. 37. What Fonthttp://chengyinliu.com/whatfont.html
  38. 38. “Type well used is invisible as type, just as the perfect talking voice is the unnoticed vehicle for the transmission of words, ideas.” Beatrice Warde The Crystal Goblet, 1955
  39. 39. Thank You! Bill Davis Bill@Fonts.comTypefaces used: Akko™ designed by Akira Kobayashi, 2011

×