WEB SAFE FONTS

To hell with

Lennart Schoors

Me

.web designer at Netloghttp://www.netlog.com

. blog at http://lensco.be

Web Safe Fonts

Fonts on the internet today

You can do cool things with Times New Roman

.Verdana

.Arial (Helvetica if you’re lucky)

.Lucida Grande

.Georgia

. limited, sometimes boring font stacks

But still ...

Alternatives

. image replacement, sIFR, Cufon, ...

.accessibility

.maintenance

.often hard to get it just right

. flash of content

.dependency (Javascript, Flash)

.more pain in the ass than they should be

Solutions?

Option one: spice up your font stacks

font-family: Plantin, "Plantin std", "Plantin", "Baskerville", Georgia, "Times New Roman", serif;

Go wild!

.Vista/Office fonts

.Calibri, Candara, Corbel, Cambria, ...

.Centhury Gothic, Rockwell,Garamond, Gill Sans, ...

. (OS X) system fonts

.American Typewriter, Futura, Optima, Palatino, Helvetica Neue (weights!), ...

. type foundry fonts

.Frutiger, Meta, Archer, Gotham, DIN, ...

.watch your fallbacks (weight, width)

.The Quick Brown Fox

.The Quick Brown Fox

.The Quick Brown Fox

check the font matrix: icanhaz.com/fontmatrix

Solutions?

Option two: font-embedding

@font-face

.part of CSS2

. simple

@font-face { font-family: "Fontin Sans"; src: url(FontinSans.otf); }

h1 { font-family: "Fontin Sans", serif; }

Support

.Safari 3.1

.Firefox 3.5

.Opera 10

. IE4

Since IE4!? What’s the catch?

.Embedded Open Type (EOT)

.encoded & limited

.WEFT (Web Embedding Fonts Tool)

WEFT 3.2 (°2003) – cumbersome and annoying

<!--[if IE]> <style> @font-face { font-family: "Fontin Sans"; src: url(FontinSans.eot); } </style><![endif]-->

IE chokes on prescribed procedure, so:

IE implementation

.EOT = new standard?

. fear of ‘DRM’

.Access Control Headers

.Foundries are hesitant

.Similar to music and movie industries

.Why not experiment with hosted, licensed fonts?

The piracy issue

Until then

.www.webfonts.info

.www.theleagueofmoveabletype.com

.Popular free fonts for embedding:

.Graublau Sans Web, Fertigo, Fontin, Fontin Sans, Kaffeesatz, Museo, ...

Summary:

Get creative

Get creative!

.Expand your font choice

.Mix fonts (like em, strong, links, quotes, ...)

.Use weights, font-styles, small caps,(font-stretch), ...

.Mind variations in size and legibility

.Test all fonts in your stack on all platforms

Rockwell, Helvetica Neue, Optima and Andale Mono on www.lensco.be

We got rid of the “web safe” colors, now let’s get rid of “web safe” fonts!

That’s all folks!. http://www.seedconference.com/

. http://www.markboultondesign.com

. http://24ways.org/2007/increase-your-font-stacks-with-font-matrix

. http://www.microsoft.com/typography/web/embedding/weft3/default.htm

. http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work

. http://webtypography.net/talks/skillswap09/

Read on at http://lensco.be