The New Web Typography #webfonts @aigachicago
Web Design is 95%  Typography    Oliver Reichenstein       October 19, 2006      http://bit.ly/aKq4RK
Web design is aboutthe user experience& brand experience
From desktop to mobile
Great Typography     equals Great Usability
Brand consistency → familiarity, comfortAppropriate typeface → clear communicationGood typography → readability & navigati...
2011 – year of Web fonts?Web fonts supported by all major browsers!    Mobile Web coming along quickly
It feels like 1985 again       Web fonts will bring atypographic revolution to Web design    similar to desktop publishing!
So just what are  Web fonts?
The ability to go beyond      “Web-safe” fontsh1 {font-family:  Helvetica, Arial, Verdana,  Calibri, Sans-serif;  font-siz...
Expand your typographic choices   with downloadable fontsh1 {font-family: ‘Gill Sans’  Helvetica, Arial, Verdana,  Calibri...
WhyWeb fonts?
Primary benefits of Web fontsEliminate headline images    > Text is more flexible    > Streamline workflow
Primary benefits of Web fontsEliminate headline imagesImprove typographic consistency (print>Web)
Primary benefits of Web fontsEliminate headline imagesImprove typographic consistency (print>Web)Achieve Web standards com...
How did we get here?
Web fonts have come a long way1998            2004   2008   2010
Web font formatsToday there are 4 typical Web font formats:• TrueType® (.TTF) or OpenType® (.OTF)• EOT (Embedded OpenType)...
Technology moves quickly97.5% of desktop browsers support Web fontsWOFF is only supported by 38% of browsers   Source: W3S...
Are Web fonts easy  to implement?
Web fonts can be complicated TTF W EO SV     OF T G     F
Coding CSS to support all browsers/* Internet Explorer */           /* Firefox 3.6+ Opera 11.5+ */@font-face {            ...
Are you kidding me?
Web fonts are at the early stagesImage source: http://upload.wikimedia.org/wikipedia/commons/d/d3/Technology-Adoption-Life...
How can we simplify   Web fonts?
Web fonts hosting servicesWeb designers simply add a link to their CSSThe service does the heavy-liftingAutomatic updating...
Challengeswith Web fonts
Differences in font renderingFonts look different on Mac®, Windows®,  Android™ systems> If you design on a Mac, proof on a...
Not all fonts look good on screenLegacy “desktop” fonts made for print outputText vs. Headline fontsNew fonts are being de...
Font file sizeOn the Web, it’s all about latency!Ways to optimize fonts  > Subset characters for language support  > Remov...
OpenType features in CSS3  Coming soon to all browsers?            Firefox test page:http://catalog.monotypeimaging.com/de...
A few of my  favorite Web fonts    tools
browserlab.adobe.com
typetester.org
webtype.com/tools/swapper/
webfontspreview.com
What Fonthttp://chengyinliu.com/whatfont.html
“Type well used is invisible as type,  just as the perfect talking voice  is the unnoticed vehicle for the   transmission ...
Thank You!                   Bill Davis              Bill@Fonts.comTypefaces used: Akko™ designed by Akira Kobayashi, 2011
New Web Typography
Upcoming SlideShare
Loading in...5
×

New Web Typography

2,415

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,415
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
30
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×