To Hell with Web Safe Fonts
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

To Hell with Web Safe Fonts

on

  • 30,453 views

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. ...

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

Statistics

Views

Total Views
30,453
Views on SlideShare
30,025
Embed Views
428

Actions

Likes
16
Downloads
129
Comments
0

10 Embeds 428

http://lensco.be 230
http://www.slideshare.net 170
http://www.barcampantwerpen.org 9
http://paper.li 8
http://www.felgner.ch 5
http://translate.googleusercontent.com 2
http://felgner.ch 1
http://www.e-presentations.us 1
http://www.twylah.com 1
http://www.linkedin.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

To Hell with Web Safe Fonts Presentation Transcript

  • 1. To hell with WEB SAFE FONTS Lennart Schoors
  • 2. Me . web designer at Netlog http://www.netlog.com . blog at http://lensco.be
  • 3. Web Safe Fonts Fonts on the internet today
  • 4. You can do cool things with Times New Roman
  • 5. But still ... . Verdana . Arial (Helvetica if you’re lucky) . Lucida Grande . Georgia . limited, sometimes boring font stacks
  • 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. Solutions? Option one: spice up your font stacks
  • 8. font-family: Plantin, quot;Plantin stdquot;, quot;Plantinquot;, quot;Baskervillequot;, Georgia, quot;Times New Romanquot;, serif;
  • 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. . 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. check the font matrix: icanhaz.com/fontmatrix
  • 12. Solutions? Option two: font-embedding
  • 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. Support . Safari 3.1 . Firefox 3.5 . Opera 10 . IE4
  • 15. Since IE4!? What’s the catch? . Embedded Open Type (EOT) . encoded & limited . WEFT (Web Embedding Fonts Tool)
  • 16. WEFT 3.2 (°2003) – cumbersome and annoying
  • 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. 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. Until then . www.webfonts.info . www.theleagueofmoveabletype.com . Popular free fonts for embedding: . Graublau Sans Web, Fertigo, Fontin, Fontin Sans, Kaffeesatz, Museo, ...
  • 20. Summary: Get creative
  • 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. Rockwell, Helvetica Neue, Optima and Andale Mono on www.lensco.be
  • 23. We got rid of the “web safe” colors, now let’s get rid of “web safe” fonts!
  • 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