• Save
Typography online
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Typography online

on

  • 3,306 views

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

Statistics

Views

Total Views
3,306
Views on SlideShare
3,250
Embed Views
56

Actions

Likes
3
Downloads
0
Comments
0

7 Embeds 56

http://www.systemerror.co.uk 31
http://jp74.com 14
http://feeds.feedburner.com 3
http://www.linkedin.com 3
https://twitter.com 2
http://blog.naver.com 2
http://flavors.me 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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
  • \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

Typography online Presentation 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—