Your SlideShare is downloading. ×
0
The State of


         WEB TYPE
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 ma...
Source: www.flickr.com/photos/six_7_8/3854121575/
WHERE WERE WE?
BROWSER FONTS
        Verdana
        Arial
 sans   Helvetica
SERIF   Lucida
        Tahoma
        Trebuchet
        Cali...
IMAGE REPLACEMENT
<h1>My Title</h1>

h1 {
  background-image: url(title.png);
  text-indent: -999em;
  overflow: hidden;
}...
FLASH REPLACEMENT
<h1>My Title</h1>

<script>
   if(typeof sIFR == "function")
      sIFR.replaceElement("h1", "font.swf")...
CANVAS / VML REPLACEMENT
<h1>My Title</h1>

<script>
   Cufon.set("fontFamily", "League Gothic");
   Cufon.replace("h1");
...
WHAT’S NEW?
FONT-FACE EMBEDDING
       @font-face { }

First introduced in CSS2 recommendation
Removed from CSS2.1 specification
Implem...
Being a web designer will soon require
a deeper understanding of typography
       and how typefaces work.
 — JA SO N SAN ...
FONT-FACE EMBEDDING
@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
    url(...
FONT-FACE FORMATS
IE4+          Embedded OpenType (EOT)   60%




                                                Source: ...
FONT-FACE LICENSING
Typefaces are electronic files, like MP3s
 —Difficult to protect against piracy
Problem: browsers linking...
BETTER HOW?
FONT-FACE EFFECT
Web designers talking/thinking about type
Type foundries participating
New techniques and formats
 —Paul ...
There is the possibility that the middlemen,
by increasing acceptance of web fonts, will
hasten the arrival of a licensing...
NEW SERVICES
Typotheque     First foundry service, per-font fee

Typekit        Hosted subscription service, via JS+CSS

F...
OPEN-SOURCE FONTS
   Titillium                           League Gothic
AC CAD EM IA DI BE LLE ARTI U RBINO    LEAG UE OF M...
QUALITY CONTROL

Strunk & White’s
         FE RTIG O




Strunk         White s
      CHU NKFIVE
EXAMPLES




Source: www.typotheque.com
EXAMPLES




Source: sxsw.beercamp.com
EXAMPLES




Source: www.typekit.com/gallery
EXAMPLES




Source: www.typekit.com/gallery
MIDDLEMEN
                                          IE
                             EOT
                                  ...
SECURITY
Security through obfuscation
 —Edit “name” table, breaks desktop installation
    (typophile.com/node/70404)
 —Se...
TYPEKIT
TYPEKIT
TYPEKIT
TYPEKIT
<h1 class="tk-skolar">My Title</h1>

<script type="text/javascript"
  src="http://use.typekit.com/vzv4jhc.js">
</s...
TYPEKIT
       Multi-platform
       Hosted
       Distributed            Point of failure
 the   Licensed         the   R...
FONTDECK
FONTDECK

@font-face {
  font-family: 'Egyptienne URW Extra Narrow Bold';
  src: url('http://f.fontdeck.com/ … .eot');
  s...
LOOKS GOOD
RENDERING
Each OS platform implements own engine
Quartz 2D in OS X is smooth, but adds weight
Windows ClearType sharper, m...
Font hinting … uses tables of mathematical
   instructions to align letterforms to the
 pixel grid and to determine which ...
HINTING



Same glyphs, but right has hinting applied




                                             Source: www.cooper....
RENDERING: PILL GOTHIC
Safari
OS X
 IE8
WIN 7
 IE7
 XP




                                  Source: www.typekit.com
Chrom...
RENDERING: PILL GOTHIC




Source: www.typekit.com
RENDERING: FF TISA
Safari
OS X
 IE8
VISTA
 IE7
 XP




                               Source: www.typekit.com
Firefox
  IE...
IN USE
BIG NAMES
BIG NAMES
BIG NAMES
BIG NAMES
BIG NAMES
NEW!
            GOOGLE WEBFONTS
Announced today, open-source webfonts library
Launching with 18 fonts ready to use
Teamed...
RESOURCES
nicewebtype.com
webtypography.net
www.alistapart.com/issues/296
typekit.com
fontsquirrel.com
theleagueofmoveable...
Most font replacement techniques,
 including my own, were meant as
stepping stones to @font-face. 2010 is
 going to be the...
THANKS
Matthew Buchanan
matthewbuchanan.name
  www.cactuslab.com
Upcoming SlideShare
Loading in...5
×

The State of Web Type

14,978

Published on

Presentation delivered to the Auckland Web Meetup on 20 May 2010, regarding the use of type on the web, its history and the new techniques and services that are emerging in this space.

Published in: Design, Technology
6 Comments
50 Likes
Statistics
Notes
No Downloads
Views
Total Views
14,978
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
361
Comments
6
Likes
50
Embeds 0
No embeds

No notes for slide

Transcript of "The State of Web Type"

  1. 1. The State of WEB TYPE Auckland Web Meetup ¶ 20 May 2010 ¶ Matthew Buchanan
  2. 2. 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. —D EBO RA H N ET BURN, LO S AN GE LE S TI ME S latimesblogs.latimes.com/home_blog/2010/05/the-changing-typography-of-the-web.html
  3. 3. Source: www.flickr.com/photos/six_7_8/3854121575/
  4. 4. WHERE WERE WE?
  5. 5. BROWSER FONTS Verdana Arial sans Helvetica SERIF Lucida Tahoma Trebuchet Calibri Times Georgia SERIF Palatino Cambria
  6. 6. IMAGE REPLACEMENT <h1>My Title</h1> h1 { background-image: url(title.png); text-indent: -999em; overflow: hidden; } Any typeface Not dynamic the the GOOD Consistent rendering Typographic control BAD Inefficient Text selection Widest support Images-off issue
  7. 7. FLASH REPLACEMENT <h1>My Title</h1> <script> if(typeof sIFR == "function") sIFR.replaceElement("h1", "font.swf"); </script> Reasonably secure Licensing the the GOOD Consistent rendering Wide support BAD Configuration Text selection Text scaling No Apple love
  8. 8. CANVAS / VML REPLACEMENT <h1>My Title</h1> <script> Cufon.set("fontFamily", "League Gothic"); Cufon.replace("h1"); </script> Reasonably secure Licensing the the GOOD Consistent rendering No plugins BAD Font conversion Configuration Wide support Screen readers Works on iPhone OS FOUT
  9. 9. WHAT’S NEW?
  10. 10. FONT-FACE EMBEDDING @font-face { } 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
  11. 11. Being a web designer will soon require a deeper understanding of typography and how typefaces work. — JA SO N SAN TA M A RI A, A LIST APART 296 www.alistapart.com/articles/on-web-typography/
  12. 12. FONT-FACE EMBEDDING @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.otf') format('opentype'); } Real fonts on the web Licensing the the GOOD Web standards No plugins BAD Rendering Security Page weight FOUT
  13. 13. FONT-FACE FORMATS IE4+ Embedded OpenType (EOT) 60% Source: marketshare.hitslink.com/browser-market-share.aspx?qprid=2 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 total 92.4%
  14. 14. 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”
  15. 15. BETTER HOW?
  16. 16. 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)
  17. 17. 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. — JE F FR EY Z EL D M A N, G ODFAT HE R OF WE B DE SI GN www.zeldman.com/x/54
  18. 18. NEW SERVICES Typotheque 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 NEW! Announced today, open-source library
  19. 19. OPEN-SOURCE FONTS Titillium League Gothic AC CAD EM IA DI BE LLE ARTI U RBINO LEAG UE OF MOVEABLE TYPE Fertigo Museo Sans E XLJ BRIS EXLJ BR IS Calluna ChunkFive E XLJ BRIS LEAG UE OF MOVEABLE TYPE Quicksand Goudy Bookletter A ND RE W PAGL INAWA N BAR R Y SCH WARTZ
  20. 20. QUALITY CONTROL Strunk & White’s FE RTIG O Strunk White s CHU NKFIVE
  21. 21. EXAMPLES Source: www.typotheque.com
  22. 22. EXAMPLES Source: sxsw.beercamp.com
  23. 23. EXAMPLES Source: www.typekit.com/gallery
  24. 24. EXAMPLES Source: www.typekit.com/gallery
  25. 25. MIDDLEMEN IE EOT SAFARI, CHROME, TTF/OTF OPERA SECURITY SERVICE LICENSING CDN WOFF FIREFOX 3.6 SVG iPHONE OS
  26. 26. 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.)
  27. 27. TYPEKIT
  28. 28. TYPEKIT
  29. 29. TYPEKIT
  30. 30. 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>
  31. 31. TYPEKIT Multi-platform Hosted Distributed Point of failure the Licensed the Rendering GOOD Updated BAD Rent vs Buy Secure Page weight Cost-effective Easy
  32. 32. FONTDECK
  33. 33. 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; }
  34. 34. LOOKS GOOD
  35. 35. 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
  36. 36. Font hinting … uses tables of mathematical instructions to align letterforms to the pixel grid and to determine which pixels should be greyscaled. —TH OM AS GIANNAT TA SI O, S MA SH I N G MAG www.smashingmagazine.com/2009/11/02/the-ails-of-typographic-anti-aliasing/
  37. 37. HINTING Same glyphs, but right has hinting applied Source: www.cooper.com/journal/ Trading off legibility against integrity Painstaking process, hundreds of hours Tuning for specific rendering engines
  38. 38. RENDERING: PILL GOTHIC Safari OS X IE8 WIN 7 IE7 XP Source: www.typekit.com Chrome IE7 VISTA XP
  39. 39. RENDERING: PILL GOTHIC Source: www.typekit.com
  40. 40. RENDERING: FF TISA Safari OS X IE8 VISTA IE7 XP Source: www.typekit.com Firefox IE7 WIN 7 XP
  41. 41. IN USE
  42. 42. BIG NAMES
  43. 43. BIG NAMES
  44. 44. BIG NAMES
  45. 45. BIG NAMES
  46. 46. BIG NAMES
  47. 47. NEW! GOOGLE WEBFONTS Announced today, open-source webfonts library Launching with 18 fonts ready to use Teamed up with Typekit Typekit open sources its WebFont Loader <script src="http://ajax.googleapis.com/ ajax/libs/webfont/1/webfont.js"></script> <script> WebFont.load({ google: { families: ['Droid Sans'] } }); </script>
  48. 48. RESOURCES nicewebtype.com webtypography.net www.alistapart.com/issues/296 typekit.com fontsquirrel.com theleagueofmoveabletype.com typographica.org typophile.com/forum/ ilovetypography.com/2009/08/07/the-font-as-service/ code.google.com/webfonts
  49. 49. Most font replacement techniques, including my own, were meant as stepping stones to @font-face. 2010 is going to be the year of @font-face. —S IM O K I NN UN EN, C RE ATO R OF CU FÓN www.newsurl.net/in-depth-the-future-of-web-fonts/
  50. 50. THANKS Matthew Buchanan matthewbuchanan.name www.cactuslab.com
  1. A particular slide catching your eye?

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

×