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.

1. The State of
WEB TYPE
Auckland Web Meetup ¶ 20 May 2010 ¶ Matthew Buchanan

2. 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.
—D EBO RA H N ET BURN, LO S AN GE LE S TI ME S
latimesblogs.latimes.com/home_blog/2010/05/the-changing-typography-of-the-web.html

3. Source: www.flickr.com/photos/six_7_8/3854121575/

4. WHERE WERE WE?

5. BROWSER FONTS
Verdana
Arial
sans Helvetica
SERIF Lucida
Tahoma
Trebuchet
Calibri
Times
Georgia
SERIF Palatino
Cambria

6. IMAGE REPLACEMENT
<h1>My Title</h1>
h1 {
background-image: url(title.png);
text-indent: -999em;
overflow: hidden;
}
Any typeface Not dynamic
the the
GOOD Consistent rendering
Typographic control
BAD Inefficient
Text selection
Widest support Images-off issue

7. FLASH REPLACEMENT
<h1>My Title</h1>
<script>
if(typeof sIFR == "function")
sIFR.replaceElement("h1", "font.swf");
</script>
Reasonably secure Licensing
the the
GOOD Consistent rendering
Wide support
BAD Configuration
Text selection
Text scaling
No Apple love

8. CANVAS / VML REPLACEMENT
<h1>My Title</h1>
<script>
Cufon.set("fontFamily", "League Gothic");
Cufon.replace("h1");
</script>
Reasonably secure Licensing
the the
GOOD Consistent rendering
No plugins
BAD Font conversion
Configuration
Wide support Screen readers
Works on iPhone OS FOUT

9. WHAT’S NEW?

10. FONT-FACE EMBEDDING
@font-face { }
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

11. Being a web designer will soon require
a deeper understanding of typography
and how typefaces work.
— JA SO N SAN TA M A RI A, A LIST APART 296
www.alistapart.com/articles/on-web-typography/

12. FONT-FACE EMBEDDING
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('☺'),
url('GraublauWeb.otf') format('opentype');
}
Real fonts on the web Licensing
the the
GOOD Web standards
No plugins
BAD Rendering
Security
Page weight
FOUT

13. FONT-FACE FORMATS
IE4+ Embedded OpenType (EOT) 60%
Source: marketshare.hitslink.com/browser-market-share.aspx?qprid=2
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 total
92.4%

14. 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”

15. BETTER HOW?

16. 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)

17. 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.
— JE F FR EY Z EL D M A N, G ODFAT HE R OF WE B DE SI GN
www.zeldman.com/x/54

18. NEW SERVICES
Typotheque 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 NEW! Announced today, open-source library

19. FREE FONTS
Titillium League Gothic
AC CAD EM IA DI BE LLE ARTI U RBINO LEAG UE OF MOVEABLE TYPE
Fertigo Museo Sans
E XLJ BRIS EXLJ BR IS
Calluna ChunkFive
E XLJ BRIS LEAG UE OF MOVEABLE TYPE
Quicksand Goudy Bookletter
A ND RE W PAGL INAWA N BAR R Y SCH WARTZ

20. QUALITY CONTROL
Strunk & White’s
FE RTIG O
Strunk White s
CHU NKFIVE

21. EXAMPLES
Source: www.typotheque.com

22. EXAMPLES
Source: sxsw.beercamp.com

23. EXAMPLES
Source: www.typekit.com/gallery

24. EXAMPLES
Source: www.typekit.com/gallery

25. MIDDLEMEN
IE
EOT
SAFARI,
CHROME,
TTF/OTF OPERA
SECURITY
SERVICE LICENSING CDN
WOFF FIREFOX 3.6
SVG
iPHONE OS

26. 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.)

27. TYPEKIT

28. TYPEKIT

29. TYPEKIT

30. TYPEKIT
<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>

31. TYPEKIT
Multi-platform
Hosted
Distributed Point of failure
the Licensed the Rendering
GOOD Updated BAD Rent vs Buy
Secure Page weight
Cost-effective
Easy

32. FONTDECK

33. FONTDECK
@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;
}

34. LOOKS GOOD

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

36. Font hinting … uses tables of mathematical
instructions to align letterforms to the
pixel grid and to determine which pixels
should be greyscaled.
—TH OM AS GIANNAT TA SI O, S MA SH I N G MAG
www.smashingmagazine.com/2009/11/02/the-ails-of-typographic-anti-aliasing/

37. HINTING
Same glyphs, but right has hinting applied
Source: www.cooper.com/journal/
Trading off legibility against integrity
Painstaking process, hundreds of hours
Tuning for specific rendering engines

38. RENDERING: PILL GOTHIC
Safari
OS X
IE8
WIN 7
IE7
XP
Source: www.typekit.com
Chrome
IE7
VISTA
XP

39. RENDERING: PILL GOTHIC
Source: www.typekit.com

40. RENDERING: FF TISA
Safari
OS X
IE8
VISTA
IE7
XP
Source: www.typekit.com
Firefox
IE7
WIN 7
XP

41. IN USE

42. BIG NAMES

43. BIG NAMES

44. BIG NAMES

45. BIG NAMES

46. BIG NAMES

47. NEW!
GOOGLE WEBFONTS
Announced today, open-source webfonts library
Launching with 18 fonts ready to use
Teamed up with Typekit
Typekit open sources its WebFont Loader
<script src="http://ajax.googleapis.com/
ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
google: { families: ['Droid Sans'] } });
</script>

48. RESOURCES
nicewebtype.com
webtypography.net
www.alistapart.com/issues/296
typekit.com
fontsquirrel.com
theleagueofmoveabletype.com
typographica.org
typophile.com/forum/
ilovetypography.com/2009/08/07/the-font-as-service/
code.google.com/webfonts

49. Most font replacement techniques,
including my own, were meant as
stepping stones to @font-face. 2010 is
going to be the year of @font-face.
—S IM O K I NN UN EN, C RE ATO R OF CU FÓN
www.newsurl.net/in-depth-the-future-of-web-fonts/

50. THANKS
Matthew Buchanan
matthewbuchanan.name
www.cactuslab.com