New Web Typography
5 likes1,849 views
The document discusses the importance of web typography and the advantages of using web fonts in design to enhance user and brand experiences. It emphasizes that web fonts can improve usability, readability, and accessibility, as well as provide design flexibility beyond traditional 'web-safe' fonts. Additionally, it outlines the evolution of web fonts, common formats, implementation challenges, and provides resources for web designers.
New Web Typography
- 1. The New Web Typography #webfonts @aigachicago
- 2. Web Design is 95% Typography Oliver Reichenstein October 19, 2006 http://bit.ly/aKq4RK
- 3. Web design is about the user experience & brand experience
- 5. From desktop to mobile
- 6. Great Typography equals Great Usability
- 7. Brand consistency → familiarity, comfort Appropriate typeface → clear communication Good typography → readability & navigation User Centric → highest level of usability and UX
- 8. 2011 – year of Web fonts? Web fonts supported by all major browsers! Mobile Web coming along quickly
- 9. It feels like 1985 again Web fonts will bring a typographic revolution to Web design similar to desktop publishing!
- 10. So just what are Web fonts?
- 11. The ability to go beyond “Web-safe” fonts h1 {font-family: Helvetica, Arial, Verdana, Calibri, Sans-serif; font-size: 40px; font-style: bold;}
- 12. Expand your typographic choices with downloadable fonts h1 {font-family: ‘Gill Sans’ Helvetica, Arial, Verdana, Calibri, Sans-serif; font-size: 40px; font-style: bold; url(‘GillSans.woff’);}
- 13. Why Web fonts?
- 14. Primary benefits of Web fonts Eliminate headline images > Text is more flexible > Streamline workflow
- 15. Primary benefits of Web fonts Eliminate headline images Improve typographic consistency (print>Web)
- 16. Primary benefits of Web fonts Eliminate headline images Improve typographic consistency (print>Web) Achieve Web standards compliance > Accessibility > SEO indexibility
- 17. How did we get here?
- 18. Web fonts have come a long way 1998 2004 2008 2010
- 19. Web font formats Today 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)
- 20. Technology moves quickly 97.5% of desktop browsers support Web fonts WOFF is only supported by 38% of browsers Source: W3Schools.com April 2011, Kombinat-typefounders.com May 2011
- 21. Are Web fonts easy to implement?
- 22. Web fonts can be complicated TTF W EO SV OF T G F
- 23. 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; }
- 24. Are you kidding me?
- 25. Web fonts are at the early stages Image source: http://upload.wikimedia.org/wikipedia/commons/d/d3/Technology-Adoption-Lifecycle.png
- 26. How can we simplify Web fonts?
- 27. Web fonts hosting services Web designers simply add a link to their CSS The service does the heavy-lifting Automatic updating of fonts/browser support Subscription service vs. one-time license fee
- 29. Differences in font rendering Fonts look different on Mac®, Windows®, Android™ systems > If you design on a Mac, proof on a PC
- 30. Not all fonts look good on screen Legacy “desktop” fonts made for print output Text vs. Headline fonts New fonts are being designed for the screen
- 31. Font file size On the Web, it’s all about latency! Ways to optimize fonts > Subset characters for language support > Remove OpenType features > Use file compression
- 32. OpenType features in CSS3 Coming soon to all browsers? Firefox test page: http://catalog.monotypeimaging.com/demo/ot.aspx
- 33. A few of my favorite Web fonts tools
- 35. typetester.org
- 39. “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
- 40. Thank You! Bill Davis Bill@Fonts.com Typefaces used: Akko™ designed by Akira Kobayashi, 2011