The State of Web Type

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

EXAMPLES

Sour

ce: w

ww.typotheque.com

EXAMPLES

Sour

ce: sxsw.beercamp.com

EXAMPLES

Sour

ce: w

ww.typekit.com

/gallery

EXAMPLES

Sour

ce: w

ww.typekit.com

/gallery

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: PILL GOTHIC

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