To hell with

WEB SAFE
 FONTS
  Lennart Schoors
Me
. web designer at Netlog
 http://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
But still ...
 . Verdana
 . Arial (Helvetica if you’re lucky)
 . Lucida Grande
 . Georgia
 . limited, sometimes boring fon...
Alternatives
. image replacement, sIFR, Cufon, ...
   . accessibility
   . maintenance
   . often hard to get it just righ...
Solutions?
Option one: spice up your font stacks
font-family: Plantin, quot;Plantin stdquot;, quot;Plantinquot;,
quot;Baskervillequot;, Georgia, quot;Times New Romanquot;,...
Go wild!
. Vista/Office fonts
   . Calibri, Candara, Corbel, Cambria, ...
   . Centhury Gothic, Rockwell,
    Garamond, Gi...
. type foundry fonts
   . Frutiger, Meta, Archer, Gotham, DIN, ...
. watch your fallbacks (weight, width)
   . The Quick B...
check the font matrix: icanhaz.com/fontmatrix
Solutions?
Option two: font-embedding
@font-face
. part of CSS2
. simple
@font-face {
	 font-family: quot;Fontin Sansquot;;
	 src: url(FontinSans.otf);
	}

h1 {...
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
IE implementation
IE chokes on prescribed procedure, so:

 <!--[if IE]>
 	 <style>
 	 	 @font-face {
 	 	 	 font-family: q...
The piracy issue
. EOT = new standard?
   . fear of ‘DRM’
. Access Control Headers
. Foundries are hesitant
   . Similar t...
Until then
 . www.webfonts.info
 . www.theleagueofmoveabletype.com

 . Popular free fonts for embedding:
    . Graublau Sa...
Summary:
Get creative
Get creative!
. Expand your font choice
. Mix fonts (like em, strong, links, quotes, ...)
. Use weights, font-styles, smal...
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-yo...
Upcoming SlideShare
Loading in...5
×

To Hell with Web Safe Fonts

23,154

Published on

Outlining some issues with the current approaches for fonts on the internet, and discussing some alternatives: more creative font stacks and font embedding. Presented at Barcamp Antwerp March 21 2009. More at http://lensco.be

Published in: Technology, Art & Photos, Design
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
23,154
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
130
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

To Hell with Web Safe Fonts

  1. 1. To hell with WEB SAFE FONTS Lennart Schoors
  2. 2. Me . web designer at Netlog http://www.netlog.com . blog at http://lensco.be
  3. 3. Web Safe Fonts Fonts on the internet today
  4. 4. You can do cool things with Times New Roman
  5. 5. But still ... . Verdana . Arial (Helvetica if you’re lucky) . Lucida Grande . Georgia . limited, sometimes boring font stacks
  6. 6. 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
  7. 7. Solutions? Option one: spice up your font stacks
  8. 8. font-family: Plantin, quot;Plantin stdquot;, quot;Plantinquot;, quot;Baskervillequot;, Georgia, quot;Times New Romanquot;, serif;
  9. 9. 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!), ...
  10. 10. . 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
  11. 11. check the font matrix: icanhaz.com/fontmatrix
  12. 12. Solutions? Option two: font-embedding
  13. 13. @font-face . part of CSS2 . simple @font-face { font-family: quot;Fontin Sansquot;; src: url(FontinSans.otf); } h1 { font-family: quot;Fontin Sansquot;, serif; }
  14. 14. Support . Safari 3.1 . Firefox 3.5 . Opera 10 . IE4
  15. 15. Since IE4!? What’s the catch? . Embedded Open Type (EOT) . encoded & limited . WEFT (Web Embedding Fonts Tool)
  16. 16. WEFT 3.2 (°2003) – cumbersome and annoying
  17. 17. IE implementation IE chokes on prescribed procedure, so: <!--[if IE]> <style> @font-face { font-family: quot;Fontin Sansquot;; src: url(FontinSans.eot); } </style> <![endif]-->
  18. 18. The piracy issue . 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?
  19. 19. Until then . www.webfonts.info . www.theleagueofmoveabletype.com . Popular free fonts for embedding: . Graublau Sans Web, Fertigo, Fontin, Fontin Sans, Kaffeesatz, Museo, ...
  20. 20. Summary: Get creative
  21. 21. 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
  22. 22. Rockwell, Helvetica Neue, Optima and Andale Mono on www.lensco.be
  23. 23. We got rid of the “web safe” colors, now let’s get rid of “web safe” fonts!
  24. 24. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×