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

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

28. Challenges
with Web fonts

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

34. browserlab.adobe.com

35. typetester.org

36. webtype.com/tools/swapper/

37. webfontspreview.com

38. What Font
http://chengyinliu.com/whatfont.html

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