Presentation for WordCamp Kansas City 2012

1. By Nile Flores
http://blondish.net
@blondishnet

2.  Explain typography and its importance in regards
to web design
 Examples of typography that works
 Tips for better typography usage
 A couple ways to apply typography to a
WordPress theme
 Other typography resources

3. The art and technique of arranging type in
order to make language visible.
- Wikipedia
http://en.wikipedia.org/wiki/Typography

4.  Leading – the space
between the lines (ex: in
CSS – line-height)
 Kerning – the space in
between individual
characters
 Tracking – the amount
of spacing between
groups of letters.

5.  Spacing of font
 Shape of font
 Grouping of letters in a
specific shape or order
 Size of font
 Color(s) of font

12.  Choose legible typefaces (fonts) that will not be
hard to read even for those with visual impairing
issues
 Keep it simple when it comes to choosing a
number of fonts
 Keep in mind color combination in regards to
being able to read specific word with a specific
font

13.  Keep in mind the white-space of your theme
when applying graphics that contain words or if
you are using specific web fonts
 Be consistent throughout your site with spacing
(leading, kerning, tracking)
 Use web friendly fonts that will not take a lot of
time to load

15. @font-face is an font embedding technique that can
be done in the style sheet (CSS).

16.  Pick a font you want to use (of course, keep in
mind the licensing to make sure you can use it as
a web font)
 If it makes it easy, convert it to a web font. Ot you
can choose from the hundred of free ones at Font
Squirrel. (bit.ly/fontsqgen)

17. Continued…
In your WordPress theme’s style.css, after the
theme information, put the following:
@font-face {
font-family: ‘YOURFONTNAME';
src: url('font/YOURFONTNAME.eot');
src: url('font/YOURFONTNAME.eot?#iefix') format('embedded-opentype'),
url('font/YOURFONTNAME.woff') format('woff'),
url('font/YOURFONTNAME.ttf') format('truetype'),
url('font/YOURFONTNAME.svg#segoepr') format('svg');
font-weight: normal;
font-style: normal;
}

18. Continued…
• Replace YOURFONTNAME with the exact font
name of your file
• Load your web fonts to a folder in your theme call
font
• In your style sheet (style.css), add the font to the
areas of your theme that you want your new font
to appear.

19. Continued…
 Make sure to add a fallback font in case a user
has a browser that does not support your web font
EXAMPLE:
h1{
font-family: YOURFONTNAME, Arial, Sans-Serif;
}

20. Cufón text replacement is a font embedding
technique that uses jQuery

21.  Pick your web font and go to (bit.ly/cufongen )
to convert your font for cufón text replacement
 Download the jQuery file for the cufón text
replacement
 Load your jQuery files to a folder in your theme’s
directory. Example: /js
 Note: Change YOURFONTNAME to the font
name or file name

22. Continued…
 Add to your theme’s header.php file:
<script src="<?php get_template_directory_uri(); ?>/js/cufon-yui.js"
type="text/javascript"></script>
<script src="<?php get_template_directory_uri();
?>/js/YOURFONTNAME.font.js" type="text/javascript"></script>

23. Continued…
 Add the following JavaScript lines so that the CSS
elements you want to convert will change to the
font you want.
EXAMPLE:
<script type="text/javascript">
Cufon.replace(‘h1, { fontFamily: ‘YOURFONTNAME', hover:
true });
</script>

24. It is a matter of preference
@font-face Cufón Text
Replacement
•Uses and works more with
CSS, less jQuery calls to • Uses jQuery
page • Not all browsers support
•Not all browsers support this method
this method • Fonts are more like
•SEO friendly, less load images, slower on load
time (unless font is a huge
file)

25. TypeKit is a third party resource site that has fonts
you can insert javascript into your header (using
their tutorial) or using a plugin.
Typekit has plans that depend on how many
pageviews your site has per month.
http://typekit.com

26. Google’s free font directory that are optimized for
the web. – bit.ly/gwebfonts
Plugin – WP Google Fonts bit.ly/wpgfonts

27.  UrbanFonts.com
 Fontalicious.com
 Typekit.com
 FontSquirrel.com
 Google.com/WebFonts

28. Any Questions?

29. Nile Flores
Site: http://blondish.net
Twitter: @blondishnet
Facebook: http://fb.com/NileFlores