Type on the Web (with WordPress)

1. TYPEon the web andy christian @andrew_cpht andywashere.com tadpole.cc slides @ andywashere.com/wcchi

2. I have a question!

3. "Typography is what language looks like." - Ellen Lupton

6. Go oGLe!

7. Lucida Console Tahoma Times New Roman Trebuchet MS Verdana  (Webdings) Arial Arial Black Comic Sans Courier New Georgia Impact

8. use images instead dynamic image replacement javascript-based font replacement

9. @font-face

10. Futura

11. 12 Point (pt) 1pt = 1/72 in. 16 Pixels (px) 1 Em Ratio to base/parent size 100%

12. Squid Pinterest Williamsburg, laborum cupidatat +1 iPhone polaroid direct trade nisi cardigan tattooed placeat. Butcher fanny Squid Pinterest Williamsburg, laborum cupidatat +1 iPhone polaroid direct trade nisi cardigan tattooed placeat. Butcher fanny Squid Pinterest Williamsburg, laborum cupidatat +1 iPhone polaroid direct trade nisi cardigan tattooed placeat. Butcher fanny CSS Property: line-height Leading

13. W o l f p u t a b i r d o n i t c r e d c h u r c h - k e y p h o t o b o o t h , p o r k b e l l y v i n y l T e r r y R i c h a r d s o n a c c u s a m u s p i t c h f o r k . Tracking/Kerning Wolfputabirdonitcredchurch-keyphotobooth,porkbelly vinylTerryRichardsonaccusamuspitchforkartisanconsectetur veniamswagskateboard. Wolf put a bird on it cred church-key photo booth, pork belly vinyl Terry Richardson accusamus pitchfork artisan consectetur veniam swag skateboard. CSS Property: letter-spacing

14. Measure Proident swag viral, beard artisan ullamco enim plaid placeat freegan culpa qui scenester cornhole. Beard ennui nesciunt consequat jean shorts trust fund. Messenger bag ﬁngerstache ut, High Life shoreditch. Banh mi brunch. Echo Park next level mumblecore trust fund PBR. Carles master cleanse salvia Wes Anderson, minim farm. Proident swag viral, beard artisan ullamco enim plaid placeat freegan culpa qui scenester cornhole. Beard ennui nesciunt. Consequat jean shorts trust fund. Messenger bag ﬁngerstache ut, High Life shoreditch. Banh mi brunch. Echo Park next level mumblecore trust fund PBR. Carles master cleanse salvia Wes Anderson, minim farm-to-table cray occupy tousled. Proident swag viral, beard artisan ullamco enim plaid. Placeat freegan culpa qui scenester.

15. Love

16. totally serious

17. Serif Sans Serif Slab Serif Script/HandwritingBlackletter Monospace and much more...

18. Sans Serif & Serif Helvetica This is Garamond. Freegan veniam laborum, magna do quis locavore Godard actually Pinterest. Fixie est chillwave labore. Next level Terry Richardson deserunt tempor, dreamcatcher proident salvia. Pork belly dolore nostrud sapiente fap selvage nulla, street art sunt. Nesciunt Vice DIY, officia church- key bicycle rights fixie ea dreamcatcher. Street art Schlitz freegan chambray. Voluptate eiusmod street art, ea ugh Echo Park Tonx.

19. Calluna This is Delicious. Both typefaces are by Exljbris. Freegan veniam laborum, magna do quis locavore Godard actually Pinterest. Fixie est chillwave labore. Next level Terry Richardson deserunt tempor, dreamcatcher proident salvia. Pork belly dolore nostrud sapiente fap selvage nulla, street art sunt. Nesciunt Vice DIY, officia church-key bicycle rights fixie ea dreamcatcher. Street art Schlitz freegan chambray. Voluptate eiusmod street art, ea ugh Echo Park Tonx. Same Designer

20. Museo Slab This is Museo Sans. Freegan veniam laborum, magna do quis locavore Godard actually Pinterest. Fixie est chillwave labore. Next level Terry Richardson deserunt tempor, dreamcatcher proident salvia. Pork belly dolore nostrud sapiente fap selvage nulla, street art sunt. Nesciunt Vice DIY, oﬃcia church-key bicycle rights ﬁxie ea dreamcatcher. Street art Schlitz freegan chambray. Voluptate eiusmod street art, ea ugh Echo Park Tonx. Same Family

21. DELICIOUS ROMAN This is also Delicious Roman. The heading is all caps and bold with extra letter-spacing. Freegan veniam laborum, magna do quis locavore Godard actually Pinterest. Fixie est chillwave labore. Next level Terry Richardson deserunt tempor, dreamcatcher proident salvia. Pork belly dolore nostrud sapiente fap selvage nulla, street art sunt. Nesciunt Vice DIY, officia church-key bicycle rights fixie ea dreamcatcher. Street art Schlitz freegan chambray. Voluptate eiusmod street art, ea ugh Echo Park Tonx, lorem ipsum dolor. Same Font

22. Times New Roman This is Garamond. These typefaces are too similar to use together. Freegan veniam laborum, magna do quis locavore Godard actually Pinterest. Fixie est chillwave labore. Next level Terry Richardson deserunt tempor, dreamcatcher proident salvia. Pork belly dolore nostrud sapiente fap selvage nulla, street art sunt. Nesciunt Vice DIY, officia church-key bicycle rights fixie ea dreamcatcher. Street art Schlitz freegan chambray. Voluptate eiusmod street art, ea ugh Echo Park Tonx, lorem ipsum dolor sit. Avoid too much similarity

23. slides @ andywashere.com/wcchi

24. EOT - Embedded Open Type TTF - TrueType Font OTF - OpenType Font WOFF - Web Open Font Format SVG - Scalable Vector Graphics

25. >9 EOT; 9+ EOT, WOFF, OTF WOFF, TTF, and SVG WOFF, OTF, and TTF Mobile Safari <4.2, only SVG WOFF, OTF, TTF, and SVG

26. @font-face { font-family: 'Web Font'; src: url('webfont.ttf'); } h1 { font-family: ‘Web Font’; } slides @ andywashere.com/wcchi

27. @font-face { font-family: 'Web Font'; src: url('webfont.eot'); src: url('webfont.eot?#iefix') format('embedded-opentype'), url('webfont.woff') format('woff'), url('webfont.ttf') format('truetype'), url('webfont.svg#webfont') format('svg'); font-weight: normal; font-style: normal; } h1 { font-family: ‘Web Font’, Helvetica, Arial, sans-serif; font-size: 1.75em; letter-spacing: 0.2em; text-transform: uppercase; } p { font-family: ‘Web Font’, Helvetica, Arial, sans-serif; line-height: 1.5em; } slides @ andywashere.com/wcchi

28. Resources Free Fonts google.com/webfonts/ fontsquirrel.com fontspace.com Free/Paid Fonts myfonts.com Subscription Fonts Services typekit.com fontdeck.com webink.com webtype.com kernest.com Pay Per Font Services fonts.com typotheque.com fontspring.com More Free Fonts http://www.creativebloq.com/graphic-design-tips/best- free-fonts-for-designers-1233380 http://www.designyourway.net/blog/resources/60- fresh-free-fonts-youd-consider-using-in-your-projects/ http://sixrevisions.com/resources/free-icon-fonts/ Blogs, Tutorials and other resources http://nicewebtype.com/ http://ilovetypography.com/ http://www.1stwebdesigner.com/css/css3-text-eﬀects- typography/ http://www.fontsquirrel.com/tools/webfont-generator/ http://www.slideshare.net/jeﬀ_croft/elegant-web- typography-presentation http://www.slideshare.net/klepas/beautiful-web- typography-5 slides @ andywashere.com/wcchi

29. andywashere.com@andrew_cpht t andy christian slides available at andywashere.com/wcchi tadpole.cc

Type on the Web (with WordPress)

Tadpole Collective

Type on the Web (with WordPress)