Embed Size (px)
DESCRIPTION
A summary of where web typography is as a technology. Covers CSS3 and @font-face.
Citation preview
1Sunday, April 3, 2011
three YEARS ago
BarCamp Miami 2008
2Sunday, April 3, 2011
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
beyond WEB-SAFE typographysIFR
CufónP+C DTR
FLIRSIIR
sIFR 3DTR
typeface.jsswfIR
& more!
4Sunday, April 3, 2011
“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
2010the year of @font-face
\
6Sunday, April 3, 2011
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
2010: Year of @font-face
8Sunday, April 3, 2011
2010: Year of @font-face
9Sunday, April 3, 2011
2010: Year of @font-face
10Sunday, April 3, 2011
2010: Year of @font-face
11Sunday, April 3, 2011
2010: Year of @font-face
12Sunday, April 3, 2011
Where are we now?:
2011
13Sunday, April 3, 2011
css3 TYPOGRAPHY
font-variant
font-stretch
text-shadow
hypenation
word-wrap
font-size-adjust
text-emphasize
14Sunday, April 3, 2011
css3 TYPOGRAPHYtext-decoration
15Sunday, April 3, 2011
css3 TYPOGRAPHYmulti-column
16Sunday, April 3, 2011
css3 TYPOGRAPHYmulti-column
17Sunday, April 3, 2011
css3 TYPOGRAPHYtext-overflow
18Sunday, April 3, 2011
css3 TYPOGRAPHYtext-overflow
19Sunday, April 3, 2011
20Sunday, April 3, 2011
@font-face SYNTAXBulletproof @font-face
21Sunday, April 3, 2011
@font-face SYNTAXMo’ Bulletproof @font-face
22Sunday, April 3, 2011
@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
@font-face GENERATOR
24Sunday, April 3, 2011
Question:Why does the syntax have to be
so complicated?
Answer:Different browsers like different
file formats.
25Sunday, April 3, 2011
@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
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
WOFF?
why^
28Sunday, April 3, 2011
29Sunday, April 3, 2011
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
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
http://www.apple.com/
font RENDERINGEasy fix: hi-res displays
32Sunday, April 3, 2011
font ABUSERemember this?
(I’ve blocked it out)
33Sunday, April 3, 2011
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
“With great powercomes great responsibility.”
U N C L E B E NSP IDERMAN
35Sunday, April 3, 2011
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
font LICENSINGFree & open source
• fontsquirrel.com
• openfontlibrary.org
• theleagueofmoveabletype.com
• code.google.com/webfonts
37Sunday, April 3, 2011
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
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
Question:What’s the difference between Typekit (or any font delivery
service) and @font-face?
Answer:Not much.
40Sunday, April 3, 2011
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
the FUTURE?More paid (and unpaid) solutions
?42Sunday, April 3, 2011
the FUTURE?Improved rendering
43Sunday, April 3, 2011
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
T H A N K Sderekbender.com
@derekbenderslideshare.net/derekbender
featuring
League Gothic, Futura, Georgia, Helvetica Neue & Tungsten
vidaroo.com
45Sunday, April 3, 2011
