The State of Web Type
Post on 17-Aug-2014
14132 Views
Preview:
DESCRIPTION
Transcript
WEB TYPEThe State of
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.
—DEBORAH NETBURN, LOS ANGELES TIMES
latimesblogs.latimes.com/home_blog/2010/05/the-changing-typography-of-the-web.html
Sour
ce: w
ww.flickr.com
/photos/six_7_8/3854121575/
WHERE WERE WE?
BROWSER FONTSVerdanaArialHelveticaLucidaTahomaTrebuchetCalibri
sans
SERIF
SERIFTimesGeorgiaPalatinoCambria
<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
<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
<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
WHAT’S NEW?
@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
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/
@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
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
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.—JEFFREY ZELDMAN, GODFATHER OF WEB DESIGN
www.zeldman.com/x/54
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!
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
QUALITY CONTROL
Strunk White s
Strunk & White’s
CHUNKFIVE
FERTIGO
IE
FIREFOX 3.6
iPHONE OS
SAFARI,CHROME,
OPERATTF/OTF
WOFF
EOT
SVG
SERVICE
MIDDLEMEN
CDNSECURITYLICENSING
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
TYPEKIT
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>
TYPEKIT
theGOOD
TYPEKIT
theBAD
Multi-platformHostedDistributedLicensedUpdatedSecureCost-effectiveEasy
Point of failureRenderingRent vs BuyPage weight
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;
}
FONTDECK
LOOKS GOOD
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.
—THOMAS GIANNATTASIO, SMASHING MAG
www.smashingmagazine.com/2009/11/02/the-ails-of-typographic-anti-aliasing/
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
RENDERING: PILL GOTHIC
IE7XP
ChromeVISTA
IE7XPIE7XP
IE8WIN 7
SafariOS X
Sour
ce: w
ww.typekit.com
RENDERING: FF TISASafariOS X
IE8VISTA
IE7XPIE7XP
IE7XP
FirefoxWIN 7
Sour
ce: w
ww.typekit.com
IN USE
BIG NAMES
BIG NAMES
BIG NAMES
BIG NAMES
BIG NAMES
<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!
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
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/
Matthew Buchananmatthewbuchanan.name
www.cactuslab.com
THANKS
top related