A summary of where web typography is as a technology. Covers CSS3 and @font-face.

1. Sunday, April 3, 2011 1

2. three YEARS ago
BarCamp Miami 2008
Sunday, April 3, 2011 2

3. css2 TYPOGRAPHY
font-family
font-style
font-weight
font-size
word-spacing
letter-spacing
text-decoration
text-transform
line-height
vertical-align
Sunday, April 3, 2011 3

4. beyond WEB-SAFE typography
sIFR
Cufón
P+C DTR
FLIR
SIIR
sIFR 3
DTR
typeface.js
swfIR
& more!
Sunday, April 3, 2011 4

5. “Being a web designer will soon
require a deeper understanding of
typography and how typefaces work.”
NOVEMBER 2009
Sunday, April 3, 2011 5

6. 2010
the year of @font-face
Sunday, April 3, 2011 6

7. why 2010?
Improved browser support
New type format for web only (WOFF)
More fonts allowing web use in EULA
More @font-face resources being available
New implementation techniques
• Typekit, Fontdeck & others
• Roll your own
Sunday, April 3, 2011 7

8. 2010: Year of @font-face
Sunday, April 3, 2011 8

9. 2010: Year of @font-face
Sunday, April 3, 2011 9

10. 2010: Year of @font-face
Sunday, April 3, 2011 10

11. 2010: Year of @font-face
Sunday, April 3, 2011 11

12. 2010: Year of @font-face
Sunday, April 3, 2011 12

13. Where are we now?:
2011
Sunday, April 3, 2011 13

14. css3 TYPOGRAPHY
font-variant
font-stretch
text-shadow
hypenation
word-wrap
font-size-adjust
text-emphasize
Sunday, April 3, 2011 14

15. css3 TYPOGRAPHY
text-decoration
Sunday, April 3, 2011 15

16. css3 TYPOGRAPHY
multi-column
Sunday, April 3, 2011 16

17. css3 TYPOGRAPHY
multi-column
Sunday, April 3, 2011 17

18. css3 TYPOGRAPHY
text-overflow
Sunday, April 3, 2011 18

19. css3 TYPOGRAPHY
text-overflow
Sunday, April 3, 2011 19

20. Sunday, April 3, 2011 20

21. @font-face SYNTAX
Bulletproof @font-face
Sunday, April 3, 2011 21

22. @font-face SYNTAX
Mo’ Bulletproof @font-face
Sunday, April 3, 2011 22

23. @font-face SYNTAX
Fontspring @font-face syntax
Works in Safari 5.03, IE 6-9, Firefox 3.6-4,
Chrome 8, iOS 3.2-4.2, Android 2.2-2.3, Opera 11
Sunday, April 3, 2011 23

24. @font-face GENERATOR
Sunday, April 3, 2011 24

25. Question:
Why does the syntax have to be
so complicated?
Answer:
Different browsers like different
file formats.
Sunday, April 3, 2011 25

26. @font-face FORMATS
OTF - OpenType Font
TTF - TrueType Font
EOT - Embedded OpenType
WOFF - Web Open Font Format
SVG - Scalable Vector Graphic
Sunday, April 3, 2011 26

27. BROWSER compatibility
Firefox 3.5+ (TTF, OTF)
Firefox 3.6+ (TTF, OTF, WOFF)
Safari 3.1+ (TTF, OTF, SVG)
Chrome 5+ (TTF, OTF, WOFF, SVG)
Opera 10+ (TTF, OTF, SVG)
IE 4+ (EOT)
IE 9+ (EOT, WOFF)
MobileWebkit (SVG)
Android (TTF, OTF)
Sunday, April 3, 2011 27

28. ^
why
WOFF
?
Sunday, April 3, 2011 28

29. Sunday, April 3, 2011 29

30. font RENDERING
@font-face relies on a browser’s native font rendering
http://blog.typekit.com/2010/10/05/type-rendering-on-the-web/
Sunday, April 3, 2011 30

31. font RENDERING
Operating systems
Web browsers
Font smoothing preferences
Font files
Typeface hinting
http://blog.typekit.com/2010/10/05/type-rendering-on-the-web/
Sunday, April 3, 2011 31

32. font RENDERING
Easy fix: hi-res displays
http://www.apple.com/
Sunday, April 3, 2011 32

33. font ABUSE
Remember this?
(I’ve blocked it out)
Sunday, April 3, 2011 33

34. “Just because you can use
the font that looks
like it’s wearing bellbottoms,
doesn't mean you should .”
http://www.alistapart.com/articles/on-web-typography/
Sunday, April 3, 2011 34

35. “With great power
comes great responsibility.”
UNCLE BEN
SPIDERMAN
Sunday, April 3, 2011 35

36. font LICENSING
Not all fonts are licensed for web usage
Font foundries have no way to keep fonts from being used
Typefaces are electronic files, like MP3s
• Difficult to protect against piracy
• Like pirating a movie
It’s illegal (And not cool)
Sunday, April 3, 2011 36

37. font LICENSING
Free & open source
• fontsquirrel.com
• openfontlibrary.org
• theleagueofmoveabletype.com
• code.google.com/webfonts
Sunday, April 3, 2011 37

38. font LICENSING
Paid font solutions
• Typekit
• Fontdeck
• WebINK (Extensis)
• Typotheque
• Kernest
• and more
• look for something from Hoefler & Frere-Jones (HF&J) soon
Sunday, April 3, 2011 38

39. paid FONT solutions
Licensed fonts Rent versus buy
Hosted Flash of Unstyled Text (FOUT)
Secure No offline version
Writes the code $$$
Standards compliant
Sunday, April 3, 2011 39

40. Question:
What’s the difference between
Typekit (or any font delivery
service) and @font-face?
Answer:
Not much.
Sunday, April 3, 2011 40

41. the FUTURE?
More fonts will include web use in EULAs
Focus on security (DRM?)
More new quality webfonts
More affordable typefaces
Offline preview in your own designs
Sunday, April 3, 2011 41

42. the FUTURE?
More paid (and unpaid) solutions
?
Sunday, April 3, 2011 42

43. the FUTURE?
Improved rendering
Sunday, April 3, 2011 43

44. resources & LINKS
http://www.alistapart.com/articles/on-web-typography/
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
http://lostworldsfairs.com/
CSS3 Fonts module - http://www.w3.org/TR/WD-font/
http://net.tutsplus.com/tutorials/html-css-techniques/typography-on-the-web/
@font-face Code Generator - http://www.fontsquirrel.com/fontface/generator
http://blog.typekit.com/2010/10/05/type-rendering-on-the-web/
How to Choose a Typeface - http://bit.ly/choosetype
Elements of Typographic Style Applied to the Web - http://webtypography.net/intro/
Gzip your fonts - http://www.phpied.com/gzip-your-font-face-files/
Sunday, April 3, 2011 44

45. THANKS
derekbender.com
@derekbender
slideshare.net/derekbender
vidaroo.com
featuring
League Gothic, Futura, Georgia, Helvetica Neue & Tungsten
Sunday, April 3, 2011 45