Your SlideShare is downloading. ×
  • Like
  • Save
Typography online
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Typography online

  • 2,922 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,922
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

  • 1. HelloHolaHalloBonjourJake Smith— JP74— @jake74—Typography Online— standards>next—
  • 2. Typographyonline
  • 3. Why use fonts?• To establish a tone of voice• To reaffirm product recognition/loyalty through branding• To communicate better
  • 4. 1996• Courier• Times New Roman• Arial
  • 5. 2010• Courier• Times New Roman• Arial• Verdana• Georgia• Impact• Trebuchet MS• Comic Sans
  • 6. 2010• Courier• Times New Roman• Arial• Verdana• Georgia• Impact• Trebuchet MS• Comic Sans
  • 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. Nonsense**not entirely accurate
  • 9. @font-face
  • 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. 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. pros – @font-face• It’s in the spec• all handled through CSS, no JS• plenty of free fonts to use
  • 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. Free vs Paidsolutions
  • 15. free – @font-face• Font Squirrel• Google Fonts API• plenty of free fonts to use
  • 16. paid – @font-face• Typekit• Fontdeck• FontShop• …and more
  • 17. remember–Font foundries arelike record labels
  • 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. “ 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. Font services are likestreaming music services…but probably pay the artist better
  • 21. Erik Spiekermann – FontShop
  • 22. Erik Spiekermann – FontShop
  • 23. sIFRvsCufonvs@font-face
  • 24. examples…
  • 25. Thank youGraciasDankeMerciJake Smith— JP74— @jake74—Typography Online— standards>next—