8. CUFÓN
Configuration
Styling type with CSS as normal
Runtime Technique
1. Any selector engine currently present is used
2. Reading style properties through getComputedStyle()
3. Reads JSON representation of VML font and
transforms into...
4. VML glyph rendering for IE, Canvas for the rest
Friday, February 19, 2010
9. CUFÓN
Configuration
Styling type with CSS as normal
Runtime Technique
1. Any selector engine currently present is used
2. Reading style properties through getComputedStyle()
3. Reads JSON representation of VML font and
transforms into...
4. VML glyph rendering for IE, Canvas for the rest
Friday, February 19, 2010
10. CUFÓN
Configuration
Styling type with CSS as normal
Runtime Technique
1. Any selector engine currently present is used
2. Reading style properties through getComputedStyle()
3. Reads JSON representation of VML font and
transforms into...
4. VML glyph rendering for IE, Canvas for the rest
Friday, February 19, 2010
12. FACELIFT
Configuration
Styling type with CSS as normal
Runtime Technique
1. Custom selector engine (or querySelectorAll)
2. Reading style properties through
getComputedStyle()
3. Calling generate.php with text and style
Friday, February 19, 2010
13. FACELIFT
Configuration
Styling type with CSS as normal
Runtime Technique
1. Custom selector engine (or querySelectorAll)
2. Reading style properties through
getComputedStyle()
3. Calling generate.php with text and style
Friday, February 19, 2010
14. FACELIFT
Configuration
Styling type with CSS as normal
Runtime Technique
1. Custom selector engine (or querySelectorAll)
2. Reading style properties through
getComputedStyle()
3. Calling generate.php with text and style
Friday, February 19, 2010
15. sIFR typeface.js Cufón Facelift
Technologies Javascript, Flash Javascript, Canvas, VML Javascript, Canvas,VML Javascript, PHP, GD or
ImageMagick
Selectable text? Yes, but not the Supported WITH visual Not supported yet. Only in Firefox. No
surrounding elements if affordance Solutions for all visual affordance.
the selection starts browsers minus Opera
inside the SWF exist.
Hover state? Supported In progress Supported Supported
Printable? Print.css lets you define Supported. Supported. <img> prints fine.
a non-flash fallback
Licensing issues Some. SWF can be TBD. JS file can be TBD. Cufon file can be None. Font file held on
paired with a domain. reused with typeface.js paired with a domain. backend and not
on any domain. distributed
Minified javascript 28.8k 11.7k 14.2k 18.4k
size
Fontin Sans (basic 12k swf 30k js 16k js n/a
characters) size
Gentium (full set) 232k swf 1334k js 400k js n/a
Friday, February 19, 2010
16. 30,000 ms
PERFORMANCE
Milliseconds to replace 120 elements on a popular homepage
Empty cache. Average of five runs.
22,500 ms
15,000 ms
7,500 ms
0 ms
sIFR Facelift Cufón typeface.js
Firefox 3 IE 7 IE 6
Friday, February 19, 2010
17. THE JS SOLUTION CONCLUSION
sIFR
Thx for the good times. xoxo.
Facelift
Font file protected, safe with licensing rules
Requires PHP and HTTP requests
Typeface.js
Quality and performance inferior to Cufon. (‘cept for selection)
Cufón
Full of win.
Friday, February 19, 2010
31. FONT FORMAT PROPOSALS
.webfont ➞ .webOTF ➞ WOFF
All foundries <3 it
Mozilla is championing it. It’s in 3.6
EOT-Lite ➞ CWT
Proposed by Ascender
EOT minus the domain binding and MTX compression
Works in IE today
Friday, February 19, 2010
34. TYPEKIT
From Small Batch, Inc: Jeff Veen, etc
Automating @font-face css declarations, ttf/eot, no
fallback
They deal with licensing, you pay buffet style, 250+ fonts
All files hosted on CDN.
Cached for 5 minutes, with etags
Friday, February 19, 2010
35. TYPEKIT
From Small Batch, Inc: Jeff Veen, etc
Automating @font-face css declarations, ttf/eot, no
fallback
They deal with licensing, you pay buffet style, 250+ fonts
All files hosted on CDN.
Cached for 5 minutes, with etags
Friday, February 19, 2010
36. TYPEKIT
From Small Batch, Inc: Jeff Veen, etc
Automating @font-face css declarations, ttf/eot, no
fallback
They deal with licensing, you pay buffet style, 250+ fonts
All files hosted on CDN.
Cached for 5 minutes, with etags
Friday, February 19, 2010
37. TYPOTHEQUE
Actual foundry, their fonts and others
Files cached for 5 minutes
Relatively small typeface roster
Free - $, per font or for typeface family
Friday, February 19, 2010
38. TYPOTHEQUE
Actual foundry, their fonts and others
Files cached for 5 minutes
Relatively small typeface roster
Free - $, per font or for typeface family
Friday, February 19, 2010
39. KERNEST
A mix of free and commercial fonts, 100+
$0-15/font/year
CSS only
No caching
Friday, February 19, 2010
40. KERNEST
A mix of free and commercial fonts, 100+
$0-15/font/year
CSS only
No caching
Friday, February 19, 2010
41. FONTDECK
Not launched yet
Great team behind it from Clearleft,
including Richard Rutter & Jon Tan
Friday, February 19, 2010
42. FONTDECK
Not launched yet
Great team behind it from Clearleft,
including Richard Rutter & Jon Tan
Friday, February 19, 2010
43. YO, I ROLL SOLO
Goin it alone
Friday, February 19, 2010
44. ROLL YOUR OWN
1.You get fonts
2.You verify the license permits your plans
3.You serve fonts to browsers.
4.You protect the font data as much as possible
5.You win life
Friday, February 19, 2010
50. ACQUIRING FONTS
Free fonts
Fontsquirrel, League of Movable Type,
WebFonts.info wiki
Proprietary fonts
Custom-designed typefaces for your client
Commercial fonts
Friday, February 19, 2010
51. ACQUIRING FONTS
Free fonts
Fontsquirrel, League of Movable Type,
WebFonts.info wiki
Proprietary fonts
Custom-designed typefaces for your client
Commercial fonts
Friday, February 19, 2010
52. ACQUIRING FONTS
Free fonts
Fontsquirrel, League of Movable Type,
WebFonts.info wiki
Proprietary fonts
Custom-designed typefaces for your client
Commercial fonts
Friday, February 19, 2010
53. ACQUIRING FONTS
Free fonts
Fontsquirrel, League of Movable Type,
WebFonts.info wiki
Proprietary fonts
Custom-designed typefaces for your client
Commercial fonts
Friday, February 19, 2010
54. PROPRIETARY TYPEFACE
Client owns the IP
Client needs to know the risks
Brief them on alternatives and considerations
If you do it right, you should
Friday, February 19, 2010
55. COMMERCIAL TYPEFACE
If client already owns it, they likely don’t own a
web/embedding license
Otherwise, read the EULA.
Talk the foundry. Communicate about your
protection techniques.
Friday, February 19, 2010
56. COMMERCIAL TYPEFACE
If client already owns it, they likely don’t own a
web/embedding license
Otherwise, read the EULA.
Talk the foundry. Communicate about your
protection techniques.
Friday, February 19, 2010
59. PICKING THE RIGHT FONT
Step One: Test it.
Step Two: Test it More
Target Combos:
FF/Win, IE6&7/Win, Saf on OSX
Friday, February 19, 2010
60. PICKING THE RIGHT FONT
Step One: Test it.
Step Two: Test it More
Target Combos:
FF/Win, IE6&7/Win, Saf on OSX
Friday, February 19, 2010
61. PICKING THE RIGHT FONT
Step One: Test it.
Step Two: Test it More
Target Combos:
FF/Win, IE6&7/Win, Saf on OSX
Friday, February 19, 2010
62. FEATURE DETECTION
/*! isFontFaceSupported()
* @font-face detection v1.0
* Paul Irish - 9/9/09
* MIT License
*/
var isFontFaceSupported = (function(){
// allows overloading
var fontret = new Boolean();
// IE supports EOT and has had EOT support since IE 5.
// This is a proprietary standard (ATOW) and thus this off-spec,
// proprietary test for it is acceptable.
if (!(!/*@cc_on@if(@_jscript_version>=5)!@end@*/0)) fontret = true;
else {
// Create variables for dedicated @font-face test
var doc = document,
st = doc.createElement('style'),
spn = doc.createElement('span'),
wid, nwid, isFakeBody = false, body = doc.body,
callback, isCallbackCalled;
Friday, February 19, 2010
63. else {
// Create variables for dedicated @font-face test
var doc = document,
FEATURE DETECTION
st = doc.createElement('style'),
spn = doc.createElement('span'),
wid, nwid, isFakeBody = false, body = doc.body,
callback, isCallbackCalled;
// The following is a font-face + glyph definition for the .
character:
st.textContent = "@font-face{font-family:testfont;src:url('data:font/
ttf;base64,................)}";
doc.getElementsByTagName('head')[0].appendChild(st);
spn.setAttribute('style','font:99px
_,serif;position:absolute;visibility:hidden');
if (!body){
body = docElement.appendChild(doc.createElement(fontface));
isFakeBody = true;
}
// the data-uri'd font only has the . glyph; which is 3 pixels wide.
spn.innerHTML = '........';
spn.id = 'fonttest';
body.appendChild(spn);
wid = spn.offsetWidth;
spn.style.font = '99px testfont,_,serif';
// needed for the CSSFontFaceRule false positives (ff3, chrome, op9)
Friday, Februaryfontret = wid !== spn.offsetWidth;
19, 2010
85. CREDIT WHERE CREDIT IS DUE
Opera: introduced the spec
IE: @font-face since IE4, <ruby>, core
web fonts
Safari: Quartz rendering
Firefox: font-size-adjust, text-rendering
Friday, February 19, 2010
99. TRICKS
disable cleartype
text-rendering
text-shadow
Friday, February 19, 2010
100. TRICKS
disable cleartype
text-rendering
text-shadow
Friday, February 19, 2010
101. GO FORTH AND MAKE
IT LOOK GOOD.
Don’t go crazy on it, though.
Friday, February 19, 2010
102. GO FORTH AND MAKE
IT LOOK GOOD.
Don’t go crazy on it, though.
Friday, February 19, 2010
103. Squeeeezing the best out of webfonts
Muchas thankos!
More:
http:/
/paulirish.com/squeeze
Me:
http://paulirish.com
http://twitter.com/paul_irish
Friday, February 19, 2010