New Web Typography
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

New Web Typography

on

  • 2,205 views

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

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

Statistics

Views

Total Views
2,205
Views on SlideShare
2,205
Embed Views
0

Actions

Likes
4
Downloads
26
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

New Web Typography Presentation Transcript

  • 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 aboutthe user experience& brand experience
  • 4. From desktop to mobile
  • 5. Great Typography equals Great Usability
  • 6. Brand consistency → familiarity, comfortAppropriate typeface → clear communicationGood typography → readability & navigationUser Centric → highest level of usability and UX
  • 7. 2011 – year of Web fonts?Web fonts supported by all major browsers! Mobile Web coming along quickly
  • 8. It feels like 1985 again Web fonts will bring atypographic revolution to Web design similar to desktop publishing!
  • 9. So just what are Web fonts?
  • 10. The ability to go beyond “Web-safe” fontsh1 {font-family: Helvetica, Arial, Verdana, Calibri, Sans-serif; font-size: 40px; font-style: bold;}
  • 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. WhyWeb fonts?
  • 13. Primary benefits of Web fontsEliminate headline images > Text is more flexible > Streamline workflow
  • 14. Primary benefits of Web fontsEliminate headline imagesImprove typographic consistency (print>Web)
  • 15. Primary benefits of Web fontsEliminate headline imagesImprove typographic consistency (print>Web)Achieve Web standards compliance > Accessibility > SEO indexibility
  • 16. How did we get here?
  • 17. Web fonts have come a long way1998 2004 2008 2010
  • 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. 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. Are Web fonts easy to implement?
  • 21. Web fonts can be complicated TTF W EO SV OF T G F
  • 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. Are you kidding me?
  • 24. Web fonts are at the early stagesImage source: http://upload.wikimedia.org/wikipedia/commons/d/d3/Technology-Adoption-Lifecycle.png
  • 25. How can we simplify Web fonts?
  • 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. Challengeswith Web fonts
  • 28. Differences in font renderingFonts look different on Mac®, Windows®, Android™ systems> If you design on a Mac, proof on a PC
  • 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. 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. OpenType features in CSS3 Coming soon to all browsers? Firefox test page:http://catalog.monotypeimaging.com/demo/ot.aspx
  • 32. A few of my favorite Web fonts tools
  • 33. browserlab.adobe.com
  • 34. typetester.org
  • 35. webtype.com/tools/swapper/
  • 36. webfontspreview.com
  • 37. What Fonthttp://chengyinliu.com/whatfont.html
  • 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. Thank You! Bill Davis Bill@Fonts.comTypefaces used: Akko™ designed by Akira Kobayashi, 2011