TYPOGRAPHY AND YOUR THEME




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




          SARA CANNON
          Scout Branding Company

          twitter: @saracannon

    ...
TYPOGRAPHY AND YOUR THEME




 WEB DESIGN IS
95% TYPOGRAPHY
TYPOGRAPHY AND YOUR THEME




       H&FJ
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME




       Archer
TYPOGRAPHY AND YOUR THEME




     GOTHAM
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME




       VEER
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME




     ADOBE
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME




THE LEAGUE OF
MOVEABLE TYPE
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME




     OPEN SOURCE!
OFL (OPEN FONT LICENSE)

THELEAGUEOFMOVEABLE
 TYPE.COM/MANIFESTO
TYPOGRAPHY AND YOUR THEME




  EXLJBRIS
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME




   WEB
TYPOGRAPHY
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME




CUFON / FLIR / SIFR
TYPOGRAPHY AND YOUR THEME




   @FONT-FACE
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME


         ADOBE:
TYPOGRAPHY AND YOUR THEME


          H&FJ
TYPOGRAPHY AND YOUR THEME


          HF&J
TYPOGRAPHY AND YOUR THEME




SITE EXAMPLES
TYPOGRAPHY AND YOUR THEME

  http://www.katerusby.com/
TYPOGRAPHY AND YOUR THEME




                      ROSEWOOD




                      NEUTRAFACE
TYPOGRAPHY AND YOUR THEME

   http://michelvrana.com/
TYPOGRAPHY AND YOUR THEME




                       LEAGUE GOTHIC




                        DROID SERIF
TYPOGRAPHY AND YOUR THEME

http://www.designmadeingermany.de
TYPOGRAPHY AND YOUR THEME




                       Din Round Web
TYPOGRAPHY AND YOUR THEME

 http://www. jaxvineyards.com
TYPOGRAPHY AND YOUR THEME




                        FF-Din-Web




                        FF-Tisa-Web
TYPOGRAPHY AND YOUR THEME

   http://www.sequence.com
TYPOGRAPHY AND YOUR THEME




I WANT TO GO
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME




   FONT-STACKS
TYPOGRAPHY AND YOUR THEME




   @FONT-FACE
TYPOGRAPHY AND YOUR THEME



@FONT-FACE
TYPOGRAPHY AND YOUR THEME



@FONT-FACE



http://paulirish.com/2009/bulletproof-font-
face-implementation-syntax/
TYPOGRAPHY AND YOUR THEME



@FONT-FACE

truetype (.ttf)
opentype (.otf)
web open font format (.wo )
TYPOGRAPHY AND YOUR THEME



@FONT-FACE

font hinting
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME




   HAND CODE
    TYPEKIT
 FONTSQUIRREL /
  FONTSPRING
  GOOGLE API
TYPOGRAPHY AND YOUR THEME




  FONTSQUIRREL.COM
          @FONT-FACE GENERATOR

       WOFF Font - The emerging standard ...
TYPOGRAPHY AND YOUR THEME




   TYPEKIT.COM
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME




    TYPEKIT HAS   68
 PARTICIPATING FOUNDRIES
TYPOGRAPHY AND YOUR THEME


         ADOBE:
TYPOGRAPHY AND YOUR THEME


          VEER:
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME




TYPOGRAPHIC STYLE
  GUIDE FOR YOUR
      THEME
TYPOGRAPHY AND YOUR THEME

 http://2010dev.wordpress.com/
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME



COMBATING FOUT


            Flash

            Of

            Unstyled

            Text
TYPOGRAPHY AND YOUR THEME



 COMBATING FOUT




blog.typekit.com/2010/05/19/typekit-and-google/
TYPOGRAPHY AND YOUR THEME



COMBATING FOUT



code.google.com/apis/webfonts/
docs/webfont_loader.html
TYPOGRAPHY AND YOUR THEME



COMBATING FOUT

TYPEKIT DEFAULT EMBED:




WEB FONT LOADER EMBED:
TYPOGRAPHY AND YOUR THEME



COMBATING FOUT
TYPOGRAPHY AND YOUR THEME



COMBATING FOUT




github.com/typekit/webfontloader
TYPOGRAPHY AND YOUR THEME



COMBATING FOUT
TYPOGRAPHY AND YOUR THEME



TAKE IT FURTHER

Styling Condensed Fonts
TYPOGRAPHY AND YOUR THEME



TAKE IT FURTHER
TYPOGRAPHY AND YOUR THEME




type crunch!!!
TYPOGRAPHY AND YOUR THEME



WINDOWS?

Disable Typekit IE6
Disable Typekit for Windows
Use Google Font API for Windows
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME


USER AGENT
TYPOGRAPHY AND YOUR THEME



WINDOWS?

Firefox on Windows




USER AGENT
TYPOGRAPHY AND YOUR THEME



WINDOWS?

Firefox on Windows XP
TYPOGRAPHY AND YOUR THEME




 WHAT NOT
  TO DO
TYPOGRAPHY AND YOUR THEME




Style Your Website
 With Comic Sans!
TYPOGRAPHY AND YOUR THEME




Or The Classic
     Papyrus!
TYPOGRAPHY AND YOUR THEME




Or Even Papyrus Condensed!
       SORRY AVATAR
TYPOGRAPHY AND YOUR THEME
TYPOGRAPHY AND YOUR THEME




THE INFAMOUS
 EYE BLEED.
TYPOGRAPHY AND YOUR THEME




EYE BLEED!!!
AHHH THE BURNING!
 FREE SET OF STEAK KNIVES!!!
TYPOGRAPHY AND YOUR THEME




THE EVEN MORE
 INFAMOUS EYE
     BLEED.
TYPOGRAPHY AND YOUR THEME




EYE BLEED!!!
AHHH THE BURNING!
FREE SET OF STEAK KNIVES!!!
TYPOGRAPHY AND YOUR THEME




WHAT TO DO
TYPOGRAPHY AND YOUR THEME



CHECK ALL BROWSERS




        ALWAYS.
TYPOGRAPHY AND YOUR THEME




FOLLOW THE
 INDUSTRY
TYPOGRAPHY AND YOUR THEME


     blog.typekit.com
TYPOGRAPHY AND YOUR THEME


   ilovetypography.com
TYPOGRAPHY AND YOUR THEME


    typographica.org
TYPOGRAPHY AND YOUR THEME




    FIND
INSPIRATION!
TYPOGRAPHY AND YOUR THEME


      siteinspire.net
TYPOGRAPHY AND YOUR THEME


  typographyserved.com
TYPOGRAPHY AND YOUR THEME


   ministryoftype.co.uk
TYPOGRAPHY AND YOUR THEME


 wordpress.org/showcase
TYPOGRAPHY AND YOUR THEME



               Thank You!

sara cannon / sara-cannon.com / follow @saracannon
Upcoming SlideShare
Loading in...5
×

Type in your WordPress Themes by Sara Cannon WordCamp NYC

6,711

Published on

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!

Published in: Technology
3 Comments
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,711
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
122
Comments
3
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "Type in your WordPress Themes by Sara Cannon WordCamp NYC"

  1. 1. TYPOGRAPHY AND YOUR THEME sara cannon / sara-cannon.com / follow @saracannon
  2. 2. TYPOGRAPHY AND YOUR THEME SARA CANNON Scout Branding Company twitter: @saracannon blog: sara-cannon.com
  3. 3. TYPOGRAPHY AND YOUR THEME WEB DESIGN IS 95% TYPOGRAPHY
  4. 4. TYPOGRAPHY AND YOUR THEME H&FJ
  5. 5. TYPOGRAPHY AND YOUR THEME
  6. 6. TYPOGRAPHY AND YOUR THEME Archer
  7. 7. TYPOGRAPHY AND YOUR THEME GOTHAM
  8. 8. TYPOGRAPHY AND YOUR THEME
  9. 9. TYPOGRAPHY AND YOUR THEME VEER
  10. 10. TYPOGRAPHY AND YOUR THEME
  11. 11. TYPOGRAPHY AND YOUR THEME
  12. 12. TYPOGRAPHY AND YOUR THEME
  13. 13. TYPOGRAPHY AND YOUR THEME ADOBE
  14. 14. TYPOGRAPHY AND YOUR THEME
  15. 15. TYPOGRAPHY AND YOUR THEME THE LEAGUE OF MOVEABLE TYPE
  16. 16. TYPOGRAPHY AND YOUR THEME
  17. 17. TYPOGRAPHY AND YOUR THEME
  18. 18. TYPOGRAPHY AND YOUR THEME
  19. 19. TYPOGRAPHY AND YOUR THEME
  20. 20. TYPOGRAPHY AND YOUR THEME OPEN SOURCE! OFL (OPEN FONT LICENSE) THELEAGUEOFMOVEABLE TYPE.COM/MANIFESTO
  21. 21. TYPOGRAPHY AND YOUR THEME EXLJBRIS
  22. 22. TYPOGRAPHY AND YOUR THEME
  23. 23. TYPOGRAPHY AND YOUR THEME
  24. 24. TYPOGRAPHY AND YOUR THEME WEB TYPOGRAPHY
  25. 25. TYPOGRAPHY AND YOUR THEME
  26. 26. TYPOGRAPHY AND YOUR THEME CUFON / FLIR / SIFR
  27. 27. TYPOGRAPHY AND YOUR THEME @FONT-FACE
  28. 28. TYPOGRAPHY AND YOUR THEME
  29. 29. TYPOGRAPHY AND YOUR THEME ADOBE:
  30. 30. TYPOGRAPHY AND YOUR THEME H&FJ
  31. 31. TYPOGRAPHY AND YOUR THEME HF&J
  32. 32. TYPOGRAPHY AND YOUR THEME SITE EXAMPLES
  33. 33. TYPOGRAPHY AND YOUR THEME http://www.katerusby.com/
  34. 34. TYPOGRAPHY AND YOUR THEME ROSEWOOD NEUTRAFACE
  35. 35. TYPOGRAPHY AND YOUR THEME http://michelvrana.com/
  36. 36. TYPOGRAPHY AND YOUR THEME LEAGUE GOTHIC DROID SERIF
  37. 37. TYPOGRAPHY AND YOUR THEME http://www.designmadeingermany.de
  38. 38. TYPOGRAPHY AND YOUR THEME Din Round Web
  39. 39. TYPOGRAPHY AND YOUR THEME http://www. jaxvineyards.com
  40. 40. TYPOGRAPHY AND YOUR THEME FF-Din-Web FF-Tisa-Web
  41. 41. TYPOGRAPHY AND YOUR THEME http://www.sequence.com
  42. 42. TYPOGRAPHY AND YOUR THEME I WANT TO GO
  43. 43. TYPOGRAPHY AND YOUR THEME
  44. 44. TYPOGRAPHY AND YOUR THEME FONT-STACKS
  45. 45. TYPOGRAPHY AND YOUR THEME @FONT-FACE
  46. 46. TYPOGRAPHY AND YOUR THEME @FONT-FACE
  47. 47. TYPOGRAPHY AND YOUR THEME @FONT-FACE http://paulirish.com/2009/bulletproof-font- face-implementation-syntax/
  48. 48. TYPOGRAPHY AND YOUR THEME @FONT-FACE truetype (.ttf) opentype (.otf) web open font format (.wo )
  49. 49. TYPOGRAPHY AND YOUR THEME @FONT-FACE font hinting
  50. 50. TYPOGRAPHY AND YOUR THEME
  51. 51. TYPOGRAPHY AND YOUR THEME HAND CODE TYPEKIT FONTSQUIRREL / FONTSPRING GOOGLE API
  52. 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. 53. TYPOGRAPHY AND YOUR THEME TYPEKIT.COM
  54. 54. TYPOGRAPHY AND YOUR THEME
  55. 55. TYPOGRAPHY AND YOUR THEME TYPEKIT HAS 68 PARTICIPATING FOUNDRIES
  56. 56. TYPOGRAPHY AND YOUR THEME ADOBE:
  57. 57. TYPOGRAPHY AND YOUR THEME VEER:
  58. 58. TYPOGRAPHY AND YOUR THEME
  59. 59. TYPOGRAPHY AND YOUR THEME TYPOGRAPHIC STYLE GUIDE FOR YOUR THEME
  60. 60. TYPOGRAPHY AND YOUR THEME http://2010dev.wordpress.com/
  61. 61. TYPOGRAPHY AND YOUR THEME
  62. 62. TYPOGRAPHY AND YOUR THEME
  63. 63. TYPOGRAPHY AND YOUR THEME
  64. 64. TYPOGRAPHY AND YOUR THEME
  65. 65. TYPOGRAPHY AND YOUR THEME
  66. 66. TYPOGRAPHY AND YOUR THEME COMBATING FOUT Flash Of Unstyled Text
  67. 67. TYPOGRAPHY AND YOUR THEME COMBATING FOUT blog.typekit.com/2010/05/19/typekit-and-google/
  68. 68. TYPOGRAPHY AND YOUR THEME COMBATING FOUT code.google.com/apis/webfonts/ docs/webfont_loader.html
  69. 69. TYPOGRAPHY AND YOUR THEME COMBATING FOUT TYPEKIT DEFAULT EMBED: WEB FONT LOADER EMBED:
  70. 70. TYPOGRAPHY AND YOUR THEME COMBATING FOUT
  71. 71. TYPOGRAPHY AND YOUR THEME COMBATING FOUT github.com/typekit/webfontloader
  72. 72. TYPOGRAPHY AND YOUR THEME COMBATING FOUT
  73. 73. TYPOGRAPHY AND YOUR THEME TAKE IT FURTHER Styling Condensed Fonts
  74. 74. TYPOGRAPHY AND YOUR THEME TAKE IT FURTHER
  75. 75. TYPOGRAPHY AND YOUR THEME type crunch!!!
  76. 76. TYPOGRAPHY AND YOUR THEME WINDOWS? Disable Typekit IE6 Disable Typekit for Windows Use Google Font API for Windows
  77. 77. TYPOGRAPHY AND YOUR THEME
  78. 78. TYPOGRAPHY AND YOUR THEME
  79. 79. TYPOGRAPHY AND YOUR THEME USER AGENT
  80. 80. TYPOGRAPHY AND YOUR THEME WINDOWS? Firefox on Windows USER AGENT
  81. 81. TYPOGRAPHY AND YOUR THEME WINDOWS? Firefox on Windows XP
  82. 82. TYPOGRAPHY AND YOUR THEME WHAT NOT TO DO
  83. 83. TYPOGRAPHY AND YOUR THEME Style Your Website With Comic Sans!
  84. 84. TYPOGRAPHY AND YOUR THEME Or The Classic Papyrus!
  85. 85. TYPOGRAPHY AND YOUR THEME Or Even Papyrus Condensed! SORRY AVATAR
  86. 86. TYPOGRAPHY AND YOUR THEME
  87. 87. TYPOGRAPHY AND YOUR THEME THE INFAMOUS EYE BLEED.
  88. 88. TYPOGRAPHY AND YOUR THEME EYE BLEED!!! AHHH THE BURNING! FREE SET OF STEAK KNIVES!!!
  89. 89. TYPOGRAPHY AND YOUR THEME THE EVEN MORE INFAMOUS EYE BLEED.
  90. 90. TYPOGRAPHY AND YOUR THEME EYE BLEED!!! AHHH THE BURNING! FREE SET OF STEAK KNIVES!!!
  91. 91. TYPOGRAPHY AND YOUR THEME WHAT TO DO
  92. 92. TYPOGRAPHY AND YOUR THEME CHECK ALL BROWSERS ALWAYS.
  93. 93. TYPOGRAPHY AND YOUR THEME FOLLOW THE INDUSTRY
  94. 94. TYPOGRAPHY AND YOUR THEME blog.typekit.com
  95. 95. TYPOGRAPHY AND YOUR THEME ilovetypography.com
  96. 96. TYPOGRAPHY AND YOUR THEME typographica.org
  97. 97. TYPOGRAPHY AND YOUR THEME FIND INSPIRATION!
  98. 98. TYPOGRAPHY AND YOUR THEME siteinspire.net
  99. 99. TYPOGRAPHY AND YOUR THEME typographyserved.com
  100. 100. TYPOGRAPHY AND YOUR THEME ministryoftype.co.uk
  101. 101. TYPOGRAPHY AND YOUR THEME wordpress.org/showcase
  102. 102. TYPOGRAPHY AND YOUR THEME Thank You! sara cannon / sara-cannon.com / follow @saracannon
  1. A particular slide catching your eye?

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

×