Web Typography presentation

  • 1,290 views
Uploaded on

 

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,290
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
9
Comments
0
Likes
0

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

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