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
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
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
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”
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
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.)
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
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
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>
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/