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.
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.
Barbara Haven, Communicator at State of CaliforniaGlad to see such a clear assessment of the State of Web Type. I'd hoped typography on the web could become better and look forward to trying new options. It's amazing that a presentation like this from thousands of miles away became available, and that I could find it.3 years ago
David Chambers, Software Developer at I’m doing my own thing atmThis slideshow made a great impression on me. It is clear that both the layout and typography were carefully considered. I was surprised by the inclusion of information only hours old at the time!
Thanks for sharing this, Matthew. It's great to have this resource available (BY-NC, of course) so that the community at large can benefit from the significant amount of time you clearly spent putting together this presentation.3 years ago
The State of
WEB TYPE
Auckland Web Meetup ¶ 20 May 2010 ¶ Matthew Buchanan
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
Source: www.flickr.com/photos/six_7_8/3854121575/
WHERE WERE WE?
BROWSER FONTS
Verdana
Arial
sans Helvetica
SERIF Lucida
Tahoma
Trebuchet
Calibri
Times
Georgia
SERIF Palatino
Cambria
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
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
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
WHAT’S NEW?
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
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/
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
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”
BETTER HOW?
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)
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
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
OPEN-SOURCE 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
QUALITY CONTROL
Strunk & White’s
FE RTIG O
Strunk White s
CHU NKFIVE
EXAMPLES
Source: www.typotheque.com
EXAMPLES
Source: sxsw.beercamp.com
EXAMPLES
Source: www.typekit.com/gallery
EXAMPLES
Source: www.typekit.com/gallery
MIDDLEMEN
IE
EOT
SAFARI,
CHROME,
TTF/OTF OPERA
SECURITY
SERVICE LICENSING CDN
WOFF FIREFOX 3.6
SVG
iPHONE OS
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.)
TYPEKIT
Multi-platform
Hosted
Distributed Point of failure
the Licensed the Rendering
GOOD Updated BAD Rent vs Buy
Secure Page weight
Cost-effective
Easy
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
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/
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
RENDERING: PILL GOTHIC
Safari
OS X
IE8
WIN 7
IE7
XP
Source: www.typekit.com
Chrome
IE7
VISTA
XP
RENDERING: PILL GOTHIC
Source: www.typekit.com
RENDERING: FF TISA
Safari
OS X
IE8
VISTA
IE7
XP
Source: www.typekit.com
Firefox
IE7
WIN 7
XP
IN USE
BIG NAMES
BIG NAMES
BIG NAMES
BIG NAMES
BIG NAMES
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>
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/
THANKS
Matthew Buchanan
matthewbuchanan.name
www.cactuslab.com
Noelia Gomez
Thanks for sharing ! 3 years ago
It's amazing that a presentation like this from thousands of miles away became available, and that I could find it. 3 years ago
Thanks for sharing this, Matthew. It's great to have this resource available (BY-NC, of course) so that the community at large can benefit from the significant amount of time you clearly spent putting together this presentation. 3 years ago