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
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
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