Web Typography    With your friend Adam Wintle
From Print to Web                Original print version     Website version of the same articleWeb Typography with Adam Wi...
From Print to Web                Original print version     Website version of the same articleWeb Typography with Adam Wi...
Web-safe Fonts           Serif Fonts             Sans-Serif Fonts   Monospace Fonts           Georgia                 Aria...
Web Font ServicesWeb Typography with Adam Wintle                   Bangkok, September 2011
e New Yorker            The New Yorker Font is IrvinWeb Typography with Adam Wintle                   Bangkok, September ...
e Peach Design                                      www.thepeachdesign.comWeb Typography with Adam Wintle                ...
Using Web Safe Fonts               HTML                    CSS              Website        <p>DON’T TRY TO BE             ...
Using TypeKit                                      www.typekit.comWeb Typography with Adam Wintle                         ...
Adding TypeKit to Your Website               HTML                                                                         ...
Using Font Squirrel                                  www.fontsquirrel.comWeb Typography with Adam Wintle                  ...
Adding Font Squirrel to Your Website           HTML                                                       CSS       <p>DON...
ank You!                           Follow me on Twitter: @AdamWintle                     Friend me on Facebook: facebook....
Upcoming SlideShare
Loading in...5
×

Web Typography presentation

1,383

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
1,383
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Hello, I&amp;#x2019;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

    1. 1. Web Typography With your friend Adam Wintle
    2. 2. From Print to Web Original print version Website version of the same articleWeb Typography with Adam Wintle Bangkok, September 2011
    3. 3. From Print to Web Original print version Website version of the same articleWeb Typography with Adam Wintle Bangkok, September 2011
    4. 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. 5. Web Font ServicesWeb Typography with Adam Wintle Bangkok, September 2011
    6. 6. e New Yorker The New Yorker Font is IrvinWeb Typography with Adam Wintle Bangkok, September 2011
    7. 7. e Peach Design www.thepeachdesign.comWeb Typography with Adam Wintle Bangkok, September 2011
    8. 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. 9. Using TypeKit www.typekit.comWeb Typography with Adam Wintle Bangkok, September 2011
    10. 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. 11. Using Font Squirrel www.fontsquirrel.comWeb Typography with Adam Wintle Bangkok, September 2011
    12. 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. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×