Type in your WordPress Themes by Sara Cannon WordCamp NYC

  • 6,273 views
Uploaded on

Typography and Your Theme: …

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!

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
6,273
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
119
Comments
3
Likes
8

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

Transcript

  • 1. TYPOGRAPHY AND YOUR THEME sara cannon / sara-cannon.com / follow @saracannon
  • 2. TYPOGRAPHY AND YOUR THEME SARA CANNON Scout Branding Company twitter: @saracannon blog: sara-cannon.com
  • 3. TYPOGRAPHY AND YOUR THEME WEB DESIGN IS 95% TYPOGRAPHY
  • 4. TYPOGRAPHY AND YOUR THEME H&FJ
  • 5. TYPOGRAPHY AND YOUR THEME
  • 6. TYPOGRAPHY AND YOUR THEME Archer
  • 7. TYPOGRAPHY AND YOUR THEME GOTHAM
  • 8. TYPOGRAPHY AND YOUR THEME
  • 9. TYPOGRAPHY AND YOUR THEME VEER
  • 10. TYPOGRAPHY AND YOUR THEME
  • 11. TYPOGRAPHY AND YOUR THEME
  • 12. TYPOGRAPHY AND YOUR THEME
  • 13. TYPOGRAPHY AND YOUR THEME ADOBE
  • 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 THEME OPEN SOURCE! OFL (OPEN FONT LICENSE) THELEAGUEOFMOVEABLE TYPE.COM/MANIFESTO
  • 21. TYPOGRAPHY AND YOUR THEME EXLJBRIS
  • 22. TYPOGRAPHY AND YOUR THEME
  • 23. TYPOGRAPHY AND YOUR THEME
  • 24. TYPOGRAPHY AND YOUR THEME WEB 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 THEME ADOBE:
  • 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 THEME http://www.katerusby.com/
  • 34. TYPOGRAPHY AND YOUR THEME ROSEWOOD NEUTRAFACE
  • 35. TYPOGRAPHY AND YOUR THEME http://michelvrana.com/
  • 36. TYPOGRAPHY AND YOUR THEME LEAGUE GOTHIC DROID SERIF
  • 37. TYPOGRAPHY AND YOUR THEME http://www.designmadeingermany.de
  • 38. TYPOGRAPHY AND YOUR THEME Din 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 THEME FONT-STACKS
  • 45. TYPOGRAPHY AND YOUR THEME @FONT-FACE
  • 46. TYPOGRAPHY AND YOUR THEME @FONT-FACE
  • 47. TYPOGRAPHY AND YOUR THEME @FONT-FACE http://paulirish.com/2009/bulletproof-font- face-implementation-syntax/
  • 48. TYPOGRAPHY AND YOUR THEME @FONT-FACE truetype (.ttf) opentype (.otf) web open font format (.wo )
  • 49. TYPOGRAPHY AND YOUR THEME @FONT-FACE font hinting
  • 50. TYPOGRAPHY AND YOUR THEME
  • 51. TYPOGRAPHY AND YOUR THEME HAND CODE TYPEKIT FONTSQUIRREL / 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 THEME TYPEKIT.COM
  • 54. TYPOGRAPHY AND YOUR THEME
  • 55. TYPOGRAPHY AND YOUR THEME TYPEKIT HAS 68 PARTICIPATING FOUNDRIES
  • 56. TYPOGRAPHY AND YOUR THEME ADOBE:
  • 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 THEME COMBATING FOUT Flash Of Unstyled Text
  • 67. TYPOGRAPHY AND YOUR THEME COMBATING FOUT blog.typekit.com/2010/05/19/typekit-and-google/
  • 68. TYPOGRAPHY AND YOUR THEME COMBATING FOUT code.google.com/apis/webfonts/ docs/webfont_loader.html
  • 69. TYPOGRAPHY AND YOUR THEME COMBATING FOUT TYPEKIT DEFAULT EMBED: WEB FONT LOADER EMBED:
  • 70. TYPOGRAPHY AND YOUR THEME COMBATING FOUT
  • 71. TYPOGRAPHY AND YOUR THEME COMBATING FOUT github.com/typekit/webfontloader
  • 72. TYPOGRAPHY AND YOUR THEME COMBATING FOUT
  • 73. TYPOGRAPHY AND YOUR THEME TAKE IT FURTHER Styling Condensed Fonts
  • 74. TYPOGRAPHY AND YOUR THEME TAKE IT FURTHER
  • 75. TYPOGRAPHY AND YOUR THEME type crunch!!!
  • 76. TYPOGRAPHY AND YOUR THEME WINDOWS? 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 THEME WINDOWS? Firefox on Windows USER AGENT
  • 81. TYPOGRAPHY AND YOUR THEME WINDOWS? Firefox on Windows XP
  • 82. TYPOGRAPHY AND YOUR THEME WHAT NOT TO DO
  • 83. TYPOGRAPHY AND YOUR THEME Style Your Website With Comic Sans!
  • 84. TYPOGRAPHY AND YOUR THEME Or The Classic Papyrus!
  • 85. TYPOGRAPHY AND YOUR THEME Or Even Papyrus Condensed! SORRY AVATAR
  • 86. TYPOGRAPHY AND YOUR THEME
  • 87. TYPOGRAPHY AND YOUR THEME THE INFAMOUS EYE BLEED.
  • 88. TYPOGRAPHY AND YOUR THEME EYE BLEED!!! AHHH THE BURNING! FREE SET OF STEAK KNIVES!!!
  • 89. TYPOGRAPHY AND YOUR THEME THE EVEN MORE INFAMOUS EYE BLEED.
  • 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 THEME CHECK ALL BROWSERS ALWAYS.
  • 93. TYPOGRAPHY AND YOUR THEME FOLLOW THE INDUSTRY
  • 94. TYPOGRAPHY AND YOUR THEME blog.typekit.com
  • 95. TYPOGRAPHY AND YOUR THEME ilovetypography.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 THEME ministryoftype.co.uk
  • 101. TYPOGRAPHY AND YOUR THEME wordpress.org/showcase
  • 102. TYPOGRAPHY AND YOUR THEME Thank You! sara cannon / sara-cannon.com / follow @saracannon