HelloHolaHalloBonjourJake Smith— JP74— @jake74—Typography Online— standards>next—
Typographyonline
Why use fonts?•   To establish a tone of voice•   To reaffirm product recognition/loyalty    through branding•   To commun...
1996•   Courier•   Times New Roman•   Arial
2010•   Courier•   Times New Roman•   Arial•   Verdana•   Georgia•   Impact•   Trebuchet MS•   Comic Sans
2010•   Courier•   Times New Roman•   Arial•   Verdana•   Georgia•   Impact•   Trebuchet MS•   Comic Sans
“ For nearly 15 years, web designers had two  frustrating choices when it came to type on the  web: use one of the few “we...
Nonsense**not entirely accurate
@font-face
@font-face {	 font-family: MyFontFamily;	 src: url(myfont-webfont.eot); /* IE9 Compat Modes */	 src: url(myfont-webfont.eo...
basics – @font-face•   Been around since 1998…•   Part of CSS2 spec (removed for 2.1)•   Neither browser support the most ...
pros – @font-face•   It’s in the spec•   all handled through CSS, no JS•   plenty of free fonts to use
cons – @font-face•   Hosted solution. At the mercy of others•   Adds to page download size, painful for    Chinese, Japane...
Free vs Paidsolutions
free – @font-face•   Font Squirrel•   Google Fonts API•   plenty of free fonts to use
paid – @font-face•   Typekit•   Fontdeck•   FontShop•   …and more
remember–Font foundries arelike record labels
Foundries as a label•   They have a roster of designers/artists•   The artists produce a variety of fonts/songs•   You can...
“ I know for a fact thereʼs discs of my stuff doing  the rounds in Manchester, and I donʼt give a  shit. It raises my profi...
Font services are likestreaming music services…but probably pay the artist better
Erik Spiekermann – FontShop
Erik Spiekermann – FontShop
sIFRvsCufonvs@font-face
examples…
Thank youGraciasDankeMerciJake Smith— JP74— @jake74—Typography Online— standards>next—
Typography online
Typography online
Typography online
Typography online
Typography online
Typography online
Typography online
Typography online
Typography online
Typography online
Typography online
Upcoming SlideShare
Loading in...5
×

Typography online

2,964

Published on

My slides from the Standards>Next talk at MadLab in Manchester – Wednesday 23 March 2011

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,964
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Typography online"

    1. 1. HelloHolaHalloBonjourJake Smith— JP74— @jake74—Typography Online— standards>next—
    2. 2. Typographyonline
    3. 3. Why use fonts?• To establish a tone of voice• To reaffirm product recognition/loyalty through branding• To communicate better
    4. 4. 1996• Courier• Times New Roman• Arial
    5. 5. 2010• Courier• Times New Roman• Arial• Verdana• Georgia• Impact• Trebuchet MS• Comic Sans
    6. 6. 2010• Courier• Times New Roman• Arial• Verdana• Georgia• Impact• Trebuchet MS• Comic Sans
    7. 7. “ For nearly 15 years, web designers had two frustrating choices when it came to type on the web: use one of the few “web safe” fonts preinstalled on major operating systems, or substitute text with images and Flash/ JavaScript hacks.” FontShop – http://www.fontshop.com/fontlist/n/web_fontfonts/
    8. 8. Nonsense**not entirely accurate
    9. 9. @font-face
    10. 10. @font-face { font-family: MyFontFamily; src: url(myfont-webfont.eot); /* IE9 Compat Modes */ src: url(myfont-webfont.eot?iefix) format(eot), /* IE6-IE8 */ url(myfont-webfont.woff) format(woff), /* Modern Browsers */ url(myfont-webfont.ttf) format(truetype), /* Safari, Android, iOS */ url(myfont-webfont.svg#svgFontName) format(svg); /* Legacy iOS */ } Further Hardening of the Bulletproof Syntax 21st February 2011 http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
    11. 11. basics – @font-face• Been around since 1998…• Part of CSS2 spec (removed for 2.1)• Neither browser support the most common font format TrueType• IEs proprietary EOT format killed off Netscape’s TrueDoc
    12. 12. pros – @font-face• It’s in the spec• all handled through CSS, no JS• plenty of free fonts to use
    13. 13. cons – @font-face• Hosted solution. At the mercy of others• Adds to page download size, painful for Chinese, Japanese and Korean (CJK) fonts• The majority of free fonts are utter shit• If they’re not utter shit, they’re overused *cough* Museo *cough*
    14. 14. Free vs Paidsolutions
    15. 15. free – @font-face• Font Squirrel• Google Fonts API• plenty of free fonts to use
    16. 16. paid – @font-face• Typekit• Fontdeck• FontShop• …and more
    17. 17. remember–Font foundries arelike record labels
    18. 18. Foundries as a label• They have a roster of designers/artists• The artists produce a variety of fonts/songs• You can ‘buy’ individual weights/singles or a family/album• You never actually own anything you pay them for… you license it• They can take you to court for copyright infringement
    19. 19. “ I know for a fact thereʼs discs of my stuff doing the rounds in Manchester, and I donʼt give a shit. It raises my profile.” Darren Scott Creative Director Truth Design Consultancy Fonts: Aggregate, Hydrate, Mechanic Gothic, Nitrogen
    20. 20. Font services are likestreaming music services…but probably pay the artist better
    21. 21. Erik Spiekermann – FontShop
    22. 22. Erik Spiekermann – FontShop
    23. 23. sIFRvsCufonvs@font-face
    24. 24. examples…
    25. 25. Thank youGraciasDankeMerciJake Smith— JP74— @jake74—Typography Online— standards>next—

    ×