Type in your WordPress Themes by Sara Cannon WordCamp NYC

  • View
    103

  • Download
    0

Embed Size (px)

DESCRIPTION

Typography and Your Theme:Believe it or not, generally WordPress sites are made up mostly of typography. This makes the relationship that these typographical elements have to each other very important. This talk will cover beautiful web type and various methods of implementations in WordPress themes. I will be going over webfonts, typographical CSS tips and tricks, and what different services to look at for your non-system fonts. We will go over the importance of making a site/brand guideline for a custom Twenty Ten child theme to keep consistency, account for every little detail, and be functionally lovely. No type element goes un-styled!

Transcript

  • 1. TYPOGRAPHY AND YOUR THEME sara cannon / sara-cannon.com / follow @saracannon

2. TYPOGRAPHY AND YOUR THEME SARA CANNON Scout Branding Companytwitter: @saracannonblog: sara-cannon.com 3. TYPOGRAPHY AND YOUR THEMEWEB DESIGN IS 95% TYPOGRAPHY 4. TYPOGRAPHY AND YOUR THEMEH&FJ 5. TYPOGRAPHY AND YOUR THEME 6. TYPOGRAPHY AND YOUR THEMEArcher 7. TYPOGRAPHY AND YOUR THEMEGOTHAM 8. TYPOGRAPHY AND YOUR THEME 9. TYPOGRAPHY AND YOUR THEMEVEER 10. TYPOGRAPHY AND YOUR THEME 11. TYPOGRAPHY AND YOUR THEME 12. TYPOGRAPHY AND YOUR THEME 13. TYPOGRAPHY AND YOUR THEMEADOBE 14. TYPOGRAPHY AND YOUR THEME 15. TYPOGRAPHY AND YOUR THEME THE LEAGUE OF MOVEABLE TYPE 16. TYPOGRAPHY AND YOUR THEME 17. TYPOGRAPHY AND YOUR THEME 18. TYPOGRAPHY AND YOUR THEME 19. TYPOGRAPHY AND YOUR THEME 20. TYPOGRAPHY AND YOUR THEMEOPEN SOURCE! OFL (OPEN FONT LICENSE)THELEAGUEOFMOVEABLETYPE.COM/MANIFESTO 21. TYPOGRAPHY AND YOUR THEME EXLJBRIS 22. TYPOGRAPHY AND YOUR THEME 23. TYPOGRAPHY AND YOUR THEME 24. TYPOGRAPHY AND YOUR THEMEWEB TYPOGRAPHY 25. TYPOGRAPHY AND YOUR THEME 26. TYPOGRAPHY AND YOUR THEME CUFON / FLIR / SIFR 27. TYPOGRAPHY AND YOUR THEME@FONT-FACE 28. TYPOGRAPHY AND YOUR THEME 29. TYPOGRAPHY AND YOUR THEMEADOBE: 30. TYPOGRAPHY AND YOUR THEME H&FJ 31. TYPOGRAPHY AND YOUR THEME HF&J 32. TYPOGRAPHY AND YOUR THEME SITE EXAMPLES 33. TYPOGRAPHY AND YOUR THEMEhttp://www.katerusby.com/ 34. TYPOGRAPHY AND YOUR THEME ROSEWOOD NEUTRAFACE 35. TYPOGRAPHY AND YOUR THEME http://michelvrana.com/ 36. TYPOGRAPHY AND YOUR THEMELEAGUE GOTHIC DROID SERIF 37. TYPOGRAPHY AND YOUR THEMEhttp://www.designmadeingermany.de 38. TYPOGRAPHY AND YOUR THEMEDin Round Web 39. TYPOGRAPHY AND YOUR THEME http://www. jaxvineyards.com 40. TYPOGRAPHY AND YOUR THEME FF-Din-Web FF-Tisa-Web 41. TYPOGRAPHY AND YOUR THEME http://www.sequence.com 42. TYPOGRAPHY AND YOUR THEME I WANT TO GO 43. TYPOGRAPHY AND YOUR THEME 44. TYPOGRAPHY AND YOUR THEMEFONT-STACKS 45. TYPOGRAPHY AND YOUR THEME@FONT-FACE 46. TYPOGRAPHY AND YOUR THEME@FONT-FACE 47. TYPOGRAPHY AND YOUR THEME@FONT-FACEhttp://paulirish.com/2009/bulletproof-font- face-implementation-syntax/ 48. TYPOGRAPHY AND YOUR THEME@FONT-FACEtruetype (.ttf) opentype (.otf) web open font format (.wo ) 49. TYPOGRAPHY AND YOUR THEME@FONT-FACEfont hinting 50. TYPOGRAPHY AND YOUR THEME 51. TYPOGRAPHY AND YOUR THEMEHAND CODE TYPEKITFONTSQUIRREL / FONTSPRING GOOGLE API 52. TYPOGRAPHY AND YOUR THEME FONTSQUIRREL.COM @FONT-FACE GENERATOR WOFF Font - The emerging standard format. EOT (light) Font - Targets Internet Explorer. SVG Font - Targets Webkit Mobile platforms (iPhone and iPad) 53. TYPOGRAPHY AND YOUR THEMETYPEKIT.COM 54. TYPOGRAPHY AND YOUR THEME 55. TYPOGRAPHY AND YOUR THEME TYPEKIT HAS 68PARTICIPATING FOUNDRIES 56. TYPOGRAPHY AND YOUR THEMEADOBE: 57. TYPOGRAPHY AND YOUR THEME VEER: 58. TYPOGRAPHY AND YOUR THEME 59. TYPOGRAPHY AND YOUR THEME TYPOGRAPHIC STYLE GUIDE FOR YOUR THEME 60. TYPOGRAPHY AND YOUR THEME http://2010dev.wordpress.com/ 61. TYPOGRAPHY AND YOUR THEME 62. TYPOGRAPHY AND YOUR THEME 63. TYPOGRAPHY AND YOUR THEME 64. TYPOGRAPHY AND YOUR THEME 65. TYPOGRAPHY AND YOUR THEME 66. TYPOGRAPHY AND YOUR THEMECOMBATING FOUT FlashOfUnstyledText 67. TYPOGRAPHY AND YOUR THEME COMBATING FOUT blog.typekit.com/2010/05/19/typekit-and-google/ 68. TYPOGRAPHY AND YOUR THEMECOMBATING FOUTcode.google.com/apis/webfonts/ docs/webfont_loader.html 69. TYPOGRAPHY AND YOUR THEMECOMBATING FOUTTYPEKIT DEFAULT EMBED: WEB FONT LOADER EMBED: 70. TYPOGRAPHY AND YOUR THEMECOMBATING FOUT 71. TYPOGRAPHY AND YOUR THEMECOMBATING FOUT github.com/typekit/webfontloader 72. TYPOGRAPHY AND YOUR THEMECOMBATING FOUT 73. TYPOGRAPHY AND YOUR THEMETAKE IT FURTHERStyling Condensed Fonts 74. TYPOGRAPHY AND YOUR THEMETAKE IT FURTHER 75. TYPOGRAPHY AND YOUR THEME type crunch!!! 76. TYPOGRAPHY AND YOUR THEMEWINDOWS?Disable Typekit IE6 Disable Typekit for Windows Use Google Font API for Windows 77. TYPOGRAPHY AND YOUR THEME 78. TYPOGRAPHY AND YOUR THEME 79. TYPOGRAPHY AND YOUR THEME USER AGENT 80. TYPOGRAPHY AND YOUR THEMEWINDOWS?Firefox on Windows USER AGENT 81. TYPOGRAPHY AND YOUR THEMEWINDOWS?Firefox on Windows XP 82. TYPOGRAPHY AND YOUR THEMEWHAT NOT TO DO 83. TYPOGRAPHY AND YOUR THEME Style Your WebsiteWith Comic Sans! 84. TYPOGRAPHY AND YOUR THEME Or The ClassicPapyrus! 85. TYPOGRAPHY AND YOUR THEME Or Even Papyrus Condensed!SORRY AVATAR 86. TYPOGRAPHY AND YOUR THEME 87. TYPOGRAPHY AND YOUR THEME THE INFAMOUSEYE BLEED. 88. TYPOGRAPHY AND YOUR THEME EYE BLEED!!! AHHH THE BURNING!FREE SET OF STEAK KNIVES!!! 89. TYPOGRAPHY AND YOUR THEME THE EVEN MOREINFAMOUS EYEBLEED. 90. TYPOGRAPHY AND YOUR THEME EYE BLEED!!! AHHH THE BURNING! FREE SET OF STEAK KNIVES!!! 91. TYPOGRAPHY AND YOUR THEME WHAT TO DO 92. TYPOGRAPHY AND YOUR THEMECHECK ALL BROWSERS ALWAYS. 93. TYPOGRAPHY AND YOUR THEME FOLLOW THEINDUSTRY 94. TYPOGRAPHY AND YOUR THEMEblog.typekit.com 95. TYPOGRAPHY AND YOUR THEMEilovetypography.com 96. TYPOGRAPHY AND YOUR THEME typographica.org 97. TYPOGRAPHY AND YOUR THEME FIND INSPIRATION! 98. TYPOGRAPHY AND YOUR THEME siteinspire.net 99. TYPOGRAPHY AND YOUR THEME typographyserved.com 100. TYPOGRAPHY AND YOUR THEMEministryoftype.co.uk 101. TYPOGRAPHY AND YOUR THEMEwordpress.org/showcase 102. TYPOGRAPHY AND YOUR THEME Thank You!sara cannon / sara-cannon.com / follow @saracannon