the state of web type
DESCRIPTION
Presentation delivered to the Auckland Web Meetup on 20 May 2010, regarding the use of type on the web, its history and the new techniques and services that are emerging in this space.TRANSCRIPT
![Page 1: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/1.jpg)
WEB TYPEThe State of
Auckland Web Meetup ¶ 20 May 2010 ¶ Matthew Buchanan
![Page 2: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/2.jpg)
A seventh-grader writing a book report on Microsoft Word had more font choices than
the person designing Esquire magazine’s website or the Ikea online catalog.
—DEBORAH NETBURN, LOS ANGELES TIMES
latimesblogs.latimes.com/home_blog/2010/05/the-changing-typography-of-the-web.html
![Page 3: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/3.jpg)
Sour
ce: w
ww.flickr.com
/photos/six_7_8/3854121575/
![Page 4: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/4.jpg)
WHERE WERE WE?
![Page 5: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/5.jpg)
BROWSER FONTSVerdanaArialHelveticaLucidaTahomaTrebuchetCalibri
sans
SERIF
SERIFTimesGeorgiaPalatinoCambria
![Page 6: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/6.jpg)
<h1>My Title</h1>
h1 {background-image: url(title.png);text-indent: -999em;overflow: hidden;
}
theGOOD
IMAGE REPLACEMENT
theBAD
Any typefaceConsistent renderingTypographic controlWidest support
Not dynamicInefficientText selectionImages-off issue
![Page 7: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/7.jpg)
<h1>My Title</h1>
<script> if(typeof sIFR == "function") sIFR.replaceElement("h1", "font.swf");
</script>
theGOOD
FLASH REPLACEMENT
theBAD
Reasonably secureConsistent renderingWide support
LicensingConfigurationText selectionText scalingNo Apple love
![Page 8: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/8.jpg)
<h1>My Title</h1>
<script> Cufon.set("fontFamily", "League Gothic"); Cufon.replace("h1");</script>
theGOOD
CANVAS / VML REPLACEMENT
theBAD
Reasonably secureConsistent renderingNo pluginsWide supportWorks on iPhone OS
LicensingFont conversionConfigurationScreen readersFOUT
![Page 9: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/9.jpg)
WHAT’S NEW?
![Page 10: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/10.jpg)
@font-face { }
FONT-FACE EMBEDDING
First introduced in CSS2 recommendation
Removed from CSS2.1 specification
Implemented in IE4, September 1997—Proprietary EOT format
Now in Firefox 3.5, Safari 3.1, Opera 10, Chrome 4
![Page 11: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/11.jpg)
Being a web designer will soon requirea deeper understanding of typography
and how typefaces work.—JASON SANTA MARIA, A LIST APART 296
www.alistapart.com/articles/on-web-typography/
![Page 12: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/12.jpg)
@font-face {font-family: 'Graublau Web';src: url('GraublauWeb.eot');src: local('☺'),url('GraublauWeb.otf') format('opentype');
}
theGOOD
FONT-FACE EMBEDDING
theBAD
Real fonts on the webWeb standardsNo plugins
LicensingRenderingSecurityPage weightFOUT
![Page 13: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/13.jpg)
FONT-FACE FORMATSIE4+ Embedded OpenType (EOT) 60%Firefox 3.5 TrueType, OpenType 5.8%
Firefox 3.6 TrueType, OpenType, WOFF 15.3%
Opera 10 TrueType, OpenType 1.8%
Chrome 4 TrueType, OpenType, SVG 5.5%
Safari 3.1+ TrueType, OpenType, SVG 4%
iPhone OS SVG total92.4%
Sour
ce: m
arke
tsha
re.h
itslin
k.co
m/b
row
ser-
mar
ket-
shar
e.as
px?q
prid
=2
![Page 14: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/14.jpg)
FONT-FACE LICENSING
Typefaces are electronic files, like MP3s—Difficult to protect against piracy
Problem: browsers linking to raw font files—Foundries want their hard work protected
Foundries use EULAs to control embedding—Some specify SWF, Cufón licences, most just PDF
Obfuscation—All formats vulnerable to being “unwrapped”
![Page 15: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/15.jpg)
BETTER HOW?
![Page 16: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/16.jpg)
FONT-FACE EFFECT
Web designers talking/thinking about type
Type foundries participating
New techniques and formats—Paul Irish: “Bulletproof @font-face syntax”—Web Open File Format (WOFF)
Hosted “middlemen” solutions
No single, standard format (yet)
![Page 17: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/17.jpg)
There is the possibility that the middlemen, by increasing acceptance of web fonts, will hasten the arrival of a licensing standard—
and that this will, in turn, prompt Microsoft to support @font-face for any licensed font.—JEFFREY ZELDMAN, GODFATHER OF WEB DESIGN
www.zeldman.com/x/54
![Page 18: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/18.jpg)
NEW SERVICESTypotheque First foundry service, per-font fee
Typekit Hosted subscription service, via JS+CSS
FontSquirrel Library of free fonts, kit & file generators
Kernest Free and paid subscription service
FontFont Per-font fee, self-hosted or via Typekit
Fonts.com Hosted service, free trial, via JS+CSS
Fontdeck Private beta, CSS-only hosted solution
Google Announced today, open-source libraryNEW!
![Page 19: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/19.jpg)
FREE FONTS
FertigoEXLJBRIS
CallunaEXLJBRIS
ChunkFiveLEAGUE OF MOVEABLE TYPE
League GothicLEAGUE OF MOVEABLE TYPE
Museo SansEXLJBRIS
TitilliumACCADEMIA DI BELLE ARTI URBINO
QuicksandANDREW PAGLINAWAN
Goudy BookletterBARRY SCHWARTZ
![Page 20: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/20.jpg)
QUALITY CONTROL
Strunk White s
Strunk & White’s
CHUNKFIVE
FERTIGO
![Page 23: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/23.jpg)
EXAMPLES
Sour
ce: w
ww.typekit.com
/gallery
![Page 24: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/24.jpg)
EXAMPLES
Sour
ce: w
ww.typekit.com
/gallery
![Page 25: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/25.jpg)
IE
FIREFOX 3.6
iPHONE OS
SAFARI,CHROME,
OPERATTF/OTF
WOFF
EOT
SVG
SERVICE
MIDDLEMEN
CDNSECURITYLICENSING
![Page 26: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/26.jpg)
SECURITY
Security through obfuscation—Edit “name” table, breaks desktop installation
(typophile.com/node/70404)—Serve fonts as base64-encoded data URI—Cryptography—Referrer checking—Subsetting of glyphs—Use multiple files, recombine with font stack
(skolar-1, skolar-2, etc.)
![Page 27: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/27.jpg)
TYPEKIT
![Page 28: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/28.jpg)
TYPEKIT
![Page 29: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/29.jpg)
TYPEKIT
![Page 30: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/30.jpg)
<h1 class="tk-skolar">My Title</h1>
<script type="text/javascript"src="http://use.typekit.com/vzv4jhc.js">
</script>
<script type="text/javascript">try{ Typekit.load(); } catch(e){}
</script>
TYPEKIT
![Page 31: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/31.jpg)
theGOOD
TYPEKIT
theBAD
Multi-platformHostedDistributedLicensedUpdatedSecureCost-effectiveEasy
Point of failureRenderingRent vs BuyPage weight
![Page 32: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/32.jpg)
FONTDECK
![Page 33: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/33.jpg)
@font-face {font-family: 'Egyptienne URW Extra Narrow Bold';src: url('http://f.fontdeck.com/ … .eot');src: local('Egyptienne URW Extra Narrow Bold'), url('http://f.fontdeck.com/ … .woff')format('woff'),
url('http://f.fontdeck.com/ … .ttf')format('opentype');
font-weight: bold;font-style: normal;
}
FONTDECK
![Page 34: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/34.jpg)
LOOKS GOOD
![Page 35: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/35.jpg)
RENDERING
Each OS platform implements own engine
Quartz 2D in OS X is smooth, but adds weight
Windows ClearType sharper, more jaggy
Windows DirectWrite offers improvement
Hinting & sub-pixel rendering can help
![Page 36: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/36.jpg)
Font hinting … uses tables of mathematical instructions to align letterforms to the
pixel grid and to determine which pixels should be greyscaled.
—THOMAS GIANNATTASIO, SMASHING MAG
www.smashingmagazine.com/2009/11/02/the-ails-of-typographic-anti-aliasing/
![Page 37: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/37.jpg)
HINTING
Sour
ce: w
ww.cooper.com/journal/
Same glyphs, but right has hinting applied
Trading off legibility against integrity
Painstaking process, hundreds of hours
Tuning for specific rendering engines
![Page 38: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/38.jpg)
RENDERING: PILL GOTHIC
IE7XP
ChromeVISTA
IE7XPIE7XP
IE8WIN 7
SafariOS X
Sour
ce: w
ww.typekit.com
![Page 40: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/40.jpg)
RENDERING: FF TISASafariOS X
IE8VISTA
IE7XPIE7XP
IE7XP
FirefoxWIN 7
Sour
ce: w
ww.typekit.com
![Page 41: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/41.jpg)
IN USE
![Page 42: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/42.jpg)
BIG NAMES
![Page 43: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/43.jpg)
BIG NAMES
![Page 44: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/44.jpg)
BIG NAMES
![Page 45: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/45.jpg)
BIG NAMES
![Page 46: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/46.jpg)
BIG NAMES
![Page 47: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/47.jpg)
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>WebFont.load({google: { families: ['Droid Sans'] } });
</script>
GOOGLE WEBFONTSAnnounced today, open-source webfonts libraryLaunching with 18 fonts ready to useTeamed up with TypekitTypekit open sources its WebFont Loader
NEW!
![Page 48: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/48.jpg)
RESOURCESnicewebtype.comwebtypography.netwww.alistapart.com/issues/296typekit.comfontsquirrel.comtheleagueofmoveabletype.comtypographica.orgtypophile.com/forum/ilovetypography.com/2009/08/07/the-font-as-service/code.google.com/webfonts
![Page 49: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/49.jpg)
Most font replacement techniques,including my own, were meant as
stepping stones to @font-face. 2010 isgoing to be the year of @font-face.—SIMO KINNUNEN, CREATOR OF CUFÓN
www.newsurl.net/in-depth-the-future-of-web-fonts/
![Page 50: The State of Web Type](https://reader033.vdocument.in/reader033/viewer/2022051311/53f12ae98d7f72104c8b4736/html5/thumbnails/50.jpg)
Matthew Buchananmatthewbuchanan.name
www.cactuslab.com
THANKS