the state of web typography
DESCRIPTION
A summary of where web typography is as a technology. Covers CSS3 and @font-face.TRANSCRIPT
![Page 1: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/1.jpg)
1Sunday, April 3, 2011
![Page 2: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/2.jpg)
three YEARS ago
BarCamp Miami 2008
2Sunday, April 3, 2011
![Page 3: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/3.jpg)
css2 TYPOGRAPHYfont-family
font-style
font-weight
font-size
word-spacing
letter-spacing
text-decoration
text-transform
line-height
vertical-align
3Sunday, April 3, 2011
![Page 4: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/4.jpg)
beyond WEB-SAFE typographysIFR
CufónP+C DTR
FLIRSIIR
sIFR 3DTR
typeface.jsswfIR
& more!
4Sunday, April 3, 2011
![Page 5: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/5.jpg)
“Being a web designer will soon require a deeper understanding of
typography and how typefaces work.”
N O V E M B E R 2 0 0 9
5Sunday, April 3, 2011
![Page 6: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/6.jpg)
2010the year of @font-face
\
6Sunday, April 3, 2011
![Page 7: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/7.jpg)
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
7Sunday, April 3, 2011
![Page 8: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/8.jpg)
2010: Year of @font-face
8Sunday, April 3, 2011
![Page 9: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/9.jpg)
2010: Year of @font-face
9Sunday, April 3, 2011
![Page 10: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/10.jpg)
2010: Year of @font-face
10Sunday, April 3, 2011
![Page 11: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/11.jpg)
2010: Year of @font-face
11Sunday, April 3, 2011
![Page 12: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/12.jpg)
2010: Year of @font-face
12Sunday, April 3, 2011
![Page 13: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/13.jpg)
Where are we now?:
2011
13Sunday, April 3, 2011
![Page 14: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/14.jpg)
css3 TYPOGRAPHY
font-variant
font-stretch
text-shadow
hypenation
word-wrap
font-size-adjust
text-emphasize
14Sunday, April 3, 2011
![Page 15: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/15.jpg)
css3 TYPOGRAPHYtext-decoration
15Sunday, April 3, 2011
![Page 16: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/16.jpg)
css3 TYPOGRAPHYmulti-column
16Sunday, April 3, 2011
![Page 17: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/17.jpg)
css3 TYPOGRAPHYmulti-column
17Sunday, April 3, 2011
![Page 18: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/18.jpg)
css3 TYPOGRAPHYtext-overflow
18Sunday, April 3, 2011
![Page 19: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/19.jpg)
css3 TYPOGRAPHYtext-overflow
19Sunday, April 3, 2011
![Page 20: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/20.jpg)
20Sunday, April 3, 2011
![Page 21: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/21.jpg)
@font-face SYNTAXBulletproof @font-face
21Sunday, April 3, 2011
![Page 22: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/22.jpg)
@font-face SYNTAXMo’ Bulletproof @font-face
22Sunday, April 3, 2011
![Page 23: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/23.jpg)
@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
Fontspring @font-face syntax
23Sunday, April 3, 2011
![Page 24: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/24.jpg)
@font-face GENERATOR
24Sunday, April 3, 2011
![Page 25: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/25.jpg)
Question:Why does the syntax have to be
so complicated?
Answer:Different browsers like different
file formats.
25Sunday, April 3, 2011
![Page 26: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/26.jpg)
@font-face FORMATS
OTF - OpenType Font
TTF - TrueType Font
EOT - Embedded OpenType
WOFF - Web Open Font Format
SVG - Scalable Vector Graphic
26Sunday, April 3, 2011
![Page 27: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/27.jpg)
BROWSER compatibilityFirefox 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)
27Sunday, April 3, 2011
![Page 28: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/28.jpg)
WOFF?
why^
28Sunday, April 3, 2011
![Page 29: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/29.jpg)
29Sunday, April 3, 2011
![Page 30: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/30.jpg)
font RENDERING
http://blog.typekit.com/2010/10/05/type-rendering-on-the-web/
@font-face relies on a browser’s native font rendering
30Sunday, April 3, 2011
![Page 31: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/31.jpg)
font RENDERING
http://blog.typekit.com/2010/10/05/type-rendering-on-the-web/
Operating systems
Web browsers
Font smoothing preferences
Font files
Typeface hinting
31Sunday, April 3, 2011
![Page 32: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/32.jpg)
http://www.apple.com/
font RENDERINGEasy fix: hi-res displays
32Sunday, April 3, 2011
![Page 33: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/33.jpg)
font ABUSERemember this?
(I’ve blocked it out)
33Sunday, April 3, 2011
![Page 34: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/34.jpg)
http://www.alistapart.com/articles/on-web-typography/
“Just because you can usethe font that looks
like it’s wearing bellbottoms,doesn't mean you should.”
34Sunday, April 3, 2011
![Page 35: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/35.jpg)
“With great powercomes great responsibility.”
U N C L E B E NSP IDERMAN
35Sunday, April 3, 2011
![Page 36: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/36.jpg)
font LICENSINGNot 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)
36Sunday, April 3, 2011
![Page 37: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/37.jpg)
font LICENSINGFree & open source
• fontsquirrel.com
• openfontlibrary.org
• theleagueofmoveabletype.com
• code.google.com/webfonts
37Sunday, April 3, 2011
![Page 38: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/38.jpg)
font LICENSINGPaid font solutions
• Typekit
• Fontdeck
• WebINK (Extensis)
• Typotheque
• Kernest
• and more
• look for something from Hoefler & Frere-Jones (HF&J) soon
38Sunday, April 3, 2011
![Page 39: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/39.jpg)
paid FONT solutions
Licensed fonts
Hosted
Secure
Writes the code
Standards compliant
Rent versus buy
Flash of Unstyled Text (FOUT)
No offline version
$$$
39Sunday, April 3, 2011
![Page 40: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/40.jpg)
Question:What’s the difference between Typekit (or any font delivery
service) and @font-face?
Answer:Not much.
40Sunday, April 3, 2011
![Page 41: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/41.jpg)
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
41Sunday, April 3, 2011
![Page 42: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/42.jpg)
the FUTURE?More paid (and unpaid) solutions
?42Sunday, April 3, 2011
![Page 43: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/43.jpg)
the FUTURE?Improved rendering
43Sunday, April 3, 2011
![Page 44: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/44.jpg)
resources & LINKShttp://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/
44Sunday, April 3, 2011
![Page 45: The State of Web Typography](https://reader037.vdocuments.mx/reader037/viewer/2022110115/54c708254a795939288b4581/html5/thumbnails/45.jpg)
T H A N K Sderekbender.com
@derekbenderslideshare.net/derekbender
featuring
League Gothic, Futura, Georgia, Helvetica Neue & Tungsten
vidaroo.com
45Sunday, April 3, 2011