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!

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