Web Typography presentation

Web Typography With your friend Adam Wintle

From Print to Web Original print version Website version of the same articleWeb Typography with Adam Wintle Bangkok, September 2011

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

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 2011

e Peach Design www.thepeachdesign.comWeb Typography with Adam Wintle Bangkok, September 2011

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

Using TypeKit www.typekit.comWeb Typography with Adam Wintle Bangkok, September 2011

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

Using Font Squirrel www.fontsquirrel.comWeb Typography with Adam Wintle Bangkok, September 2011

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

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

Web Typography presentation

by Adam Wintle

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

Web Typography presentation Presentation Transcript