The document discusses typography and its importance for web design. It defines typography as the art and technique of arranging type to make language visible. It then provides examples of typography concepts like leading, kerning, and tracking. The document gives tips for better typography usage, such as choosing legible fonts and maintaining consistency. It also provides two methods for applying web fonts in WordPress themes: using @font-face in CSS or Cufón text replacement using jQuery. Overall, the document offers an overview of typography fundamentals and techniques for implementing web fonts.

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