Web Typography presentation
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Web Typography presentation

on

  • 1,652 views

 

Statistics

Views

Total Views
1,652
Views on SlideShare
1,651
Embed Views
1

Actions

Likes
0
Downloads
9
Comments
0

1 Embed 1

http://a0.twimg.com 1

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
  • Hello, I’m Adam Wintle\n
  • Originally published 2007\n
  • Up until 2008 roughly 12 web-safe fonts\n
  • Popular web font services\n
  • Irvin\n
  • Peachanan Rojwongsuriya\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Web Typography presentation Presentation Transcript

  • 1. Web Typography With your friend Adam Wintle
  • 2. From Print to Web Original print version Website version of the same articleWeb Typography with Adam Wintle Bangkok, September 2011
  • 3. From Print to Web Original print version Website version of the same articleWeb Typography with Adam Wintle Bangkok, September 2011
  • 4. Web-safe Fonts Serif Fonts Sans-Serif Fonts Monospace Fonts Georgia Arial Courier New Palatino Comic Sans Lucida Console Times New Roman Impact Lucida Sans Tahoma Trebuchet MS VerdanaWeb Typography with Adam Wintle Bangkok, September 2011
  • 5. Web Font ServicesWeb Typography with Adam Wintle Bangkok, September 2011
  • 6. e New Yorker The New Yorker Font is IrvinWeb Typography with Adam Wintle Bangkok, September 2011
  • 7. e Peach Design www.thepeachdesign.comWeb Typography with Adam Wintle Bangkok, September 2011
  • 8. Using Web Safe Fonts HTML CSS Website <p>DON’T TRY TO BE DON’T TRY TO BE p {font-family: ORIGINAL, JUST TRY ORIGINAL, JUST TRY Verdana, Arial, TO BE GOOD. -- sans-serif;} TO BE GOOD. -- Paul Paul Rand</p> RandWeb Typography with Adam Wintle Bangkok, September 2011
  • 9. Using TypeKit www.typekit.comWeb Typography with Adam Wintle Bangkok, September 2011
  • 10. Adding TypeKit to Your Website HTML CSS <head> p { <script type="text/javascript" src="http://use.typekit.com/kqk5dww.js"></script> font-family: futura-pt-1, <script type="text/javascript">try{Typekit.load();}catch(e){}</script> futura-pt-2, Verdana, Arial, </head> sans-serif; } <p>DON’T TRY TO BE ORIGINAL, JUST TRY TO BE GOOD. -- Paul Rand</p> Website DON’T TRY TO BE ORIGINAL, JUST TRY TO BE GOOD. -- Paul RandWeb Typography with Adam Wintle Bangkok, September 2011
  • 11. Using Font Squirrel www.fontsquirrel.comWeb Typography with Adam Wintle Bangkok, September 2011
  • 12. Adding Font Squirrel to Your Website HTML CSS <p>DON’T TRY TO BE @font-face { ORIGINAL, JUST TRY font-family: Futura; TO BE GOOD. -- src: url(../fonts/futura.eot); Paul Rand</p> src: url(../fonts/futura.eot?#iefix) format(embedded-opentype), url(../fonts/futura.woff) format(woff), url(../fonts/futura.ttf) format(truetype), url(../fonts/futura.svg#Futura) format(svg); font-weight: normal; font-style: normal; } p { font-family: Futura, Verdana, Arial, sans-serif; }Web Typography with Adam Wintle Bangkok, September 2011
  • 13. ank You! Follow me on Twitter: @AdamWintle Friend me on Facebook: facebook.com/adamwintle or my business page: facebook.com/adamwintledesign or drop me an email: hello@adamwintledesign.comWeb Typography with Adam Wintle Bangkok, September 2011