A quick overview of typography concepts and dynamic font usage.

1. Typography
&
WordPress
by C H E L S E A O T A K A N

2. Legibility
vs
Readability

3. The
of Words

4. The
shape
of Words

5. Legibility
the ability to recognize and
understand individual letters

6. Readability
the ease of reading and
understanding text

7. Readability
This is the normal amount of tracking for this
font. Tracking uniformly adjusts the spacing
Tracking between letters.
The amount of universal
space between letters This is an example of positive tracking.
This is an example of negative tracking.
CSS Property
Kerning, unlike tracking, is the amount of
letter-spacing
space between specific letters designed by the
type designer. Kerning attempts to distribute
whitespace evenly between letters.

8. Readability
This is a nice spacey amount of leading. The
lines still read as the same paragraph, but do
Leading not interfere with the shapes of the words.
The amount of space Leading is set at 1.5. That’s halfway between
between lines of text single and double spaced.
CSS Property This is a very small amount of leading. The
leading is set at 1.0, equivalent to single
line-height spaced. At this point the descenders and
ascenders begin running into each other,
compromising word shapes.

9. Readability
This is a very large amount of leading. The
Leading leading is set at 3.5, equivalent to triple
The amount of space
between lines of text
spaced. At this point the lines begin to look as
CSS Property
line-height if they are separate paragraphs is more
difficult to read as a continuous block of text.

10. Readability
Not only is it a wholly remarkable book, it is
also a highly successful one - more popular
than the Celestial Home Care Omnibus, better
selling than Fifty More Things to do in Zero
Orphans Gravity, and more controversial than Oolon
words by themselves at Colluphid's trilogy of philosophical blockbusters
the end of a paragraph Where God Went Wrong, Some More of God's
Greatest Mistakes and Who is this God Person
Anyway?
Douglas Adams
The Hitchhiker’s Guide to the Galaxy

11. Readability
Not only is it a wholly remarkable book, it is
also a highly successful one - more popular
than the Celestial Home Care Omnibus, better
selling than Fifty More Things to do in Zero
Orphans Gravity, and more controversial than Oolon
words by themselves at Colluphid's trilogy of philosophical blockbusters
the end of a paragraph Where God Went Wrong, Some More of God's
Greatest Mistakes and Who is this God Person
Anyway?
Douglas Adams
The Hitchhiker’s Guide to the Galaxy

12. Typography exists to
honor content.
Robert Bringhurst
The Elements of Typographic Style

13. Stop!

14. 1 Get content first!
2 Read and interpret
meaning and tone.
3 Determine content
hierarchy and form.

15. 1 Get content first!
2 Read and interpret
meaning and tone.
3 Determine content
hierarchy and form.

16. 1 Get content first!
2 Read and interpret
meaning and tone.
3 Determine content
hierarchy and form.

17. Transitional
Handwritten
Choosing
Slab Serif
Typefaces
Geometric
Humanist
Sans Serif

18. Respect your content
via comicsanscriminal.com

19. DEFIBRILLATOR

20. D E F I B R I L L ATO R

21. Combining Typefaces
Vitesse
This is Vitesse Sans. In eu leo neque, ut porta ipsum.
Integer congue nibh sed eros viverra convallis. Nam
venenatis vehicula mi, ac vestibulum ipsum viverra et.
Donec libero mauris, rutrum nec porttitor vitae, pretium ac
Same Family magna. Vestibulum vitae leo ac eros porta porta. Vivamus
dictum tellus at ante convallis id vestibulum lectus
molestie. Aenean sit amet diam elementum risus
adipiscing luctus. Ut scelerisque imperdiet neque ac
consectetur. Vivamus hendrerit, quam faucibus porttitor
accumsan, ligula metus vulputate mi.

22. Combining Typefaces
This is St Transmission
This is St Ryde. Both these fonts were designed by
Sascha Timplan. In eu leo neque, ut porta ipsum. Integer
congue nibh sed eros viverra convallis. Nam venenatis
Same vehicula mi, ac vestibulum ipsum viverra et. Donec
Designer libero mauris, rutrum nec porttitor vitae, pretium ac
magna. Vestibulum vitae leo ac eros porta porta.
Vivamus dictum tellus at ante convallis id vestibulum
lectus molestie. Aenean sit amet diam elementum risus
adipiscing luctus.

23. Combining Typefaces
This is Otari.
This is PMN Caecelia. Both these typefaces are
considered to be Humanist typefaces. In eu leo neque,
ut porta ipsum. Integer congue nibh sed eros viverra
Same convallis. Nam venenatis vehicula mi, ac vestibulum
Classification ipsum viverra et. Donec libero mauris, rutrum nec
porttitor vitae, pretium ac magna. Vestibulum vitae leo
ac eros porta porta. Vivamus dictum tellus at ante
convallis id vestibulum lectus molestie. Aenean sit amet
diam elementum risus adipiscing luctus.

24. Combining Typefaces
THIS IS ARCHER SEMIBOLD
This is Archer Book. The Archer typeface has several
variations: book, light, thin, hairline, bold, semibold,
medium, and italic styles. In eu leo neque, ut porta ipsum.
Same Integer congue nibh sed eros viverra convallis. Nam
Typeface venenatis vehicula mi, ac vestibulum ipsum viverra et.
Donec libero mauris, rutrum nec porttitor vitae, pretium
ac magna. Vestibulum vitae leo ac eros porta porta.
Vivamus dictum tellus at ante convallis id vestibulum
lectus molestie.

25. Combining Typefaces
This is Times New Roman
This is Century Schoolbook. In eu leo neque, ut porta
ipsum. Integer congue nibh sed eros viverra
convallis. Nam venenatis vehicula mi, ac vestibulum
Too similar ipsum viverra et. Donec libero mauris, rutrum nec
porttitor vitae, pretium ac magna. Vestibulum vitae
leo ac eros porta porta. Vivamus dictum tellus at ante
convallis id vestibulum lectus molestie. Aenean sit
amet diam elementum risus adipiscing luctus.

26. Dynamic Type
on the Web

27. Embedding Fonts
Bulletproof Syntax
@font-face
@font-face {
Uses CSS to load font
font-family: 'StRyde';
files for display in the
src: url('fonts/stryde-webfont.eot');
end-user’s browser
src: local('?'), url('fonts/stryde-webfont.woff')
format('woff'), url('fonts/stryde-webfont.ttf') format
Compatibility ('truetype'), url('fonts/stryde-
webfont.svg#webfontFGe3Ckun') format('svg');
IE4+ Firefox 3.5+ Safari 3.1+
font-weight: normal;
Opera 10+ Chrome 4.0+
font-style: normal;
}

28. Embedding Fonts
@font-face
Uses CSS to load font FontSquirrel @font-face generator
files for display in the
fontsquirrel.com/fontface/generator
end-user’s browser
Compatibility FontSquirrel @font-face Kits
IE4+ Firefox 3.5+ Safari 3.1+
fontsquirrel.com/fontface
Opera 10+ Chrome 4.0+

29. Embedding Fonts
Hosted Google Font Directory
Services code.google.com/webfonts
Uses CSS or JavaScript
to load font files hosted
TypeKit
by a service
typekit.com
Compatibility
IE6+ Firefox 3.5+ Safari 3.1+ Fonts.com
Opera 10+ Chrome 4.0+
fonts.com

30. Embedding Fonts
cufón
Uses JavaScript to replace text with canvas or vml
rendering of a font
github.com/sorccu/cufon/wiki/about
Compatibility
IE6+ Firefox 1.5+ Safari 3+ Opera 9.5+ Chrome 1.0+

31. FOUT
flash of Google WebFont Loader
unstyled text
google.com/apis/webfonts/docs/webfont_loader.html
when the browser
shows the web-safe font
for a split second before Adds javascript events and CSS classes for
loading the external
different stages in the loading process.
font file

32. Font Hinting

33. Font Hinting
Old Windows
Windows 98
ClearType
DirectWrite
More on font hinting
damieng.com/blog/2007/06/13/font-rendering-philosophies-of-windows-and-mac-os-x

34. Bring on Retina Displays!
Displays that have more pixels per inch than the human
eye can perceive will make font-hinting obselete

35. Useful WP Stuff

36. wp_enqueue_script
<?php
wp_register_script(‘cufon’, bloginfo(‘template_directory’) .
‘/scripts/cufon.js’);
wp_enqueue_script(‘cufon’);
wp_enqueue_script(‘jquery’);
?>
via codex.wordpress.org/Function_Reference/wp_enqueue_script

37. wp_enqueue_style
<?php
wp_register_style(‘mycss’, bloginfo(‘template_directory’) .
‘/styles/mycss.css’);
wp_enqueue_style(‘mycss’);
?>
via codex.wordpress.org/Function_Reference/wp_enqueue_script

38. wp-typography
wordpress.org/extend/plugins/wp-typography
protects against orphans
adds CSS classes to &,
uppercase words, numbers, forces wrapping of long,
and quotations unbroken lines of text
smart replacement for marks, supports over 40 languages
quotes, dashes, elipses,
fractions, ordinal suffixes,
mathetmatical symbols etc.

39. WP Google Fonts
wordpress.org/extend/plugins/wp-google-fonts

41. TypeKit Fonts for WordPress
wordpress.org/extend/plugins/typekit-fonts-for-wordpress

43. @chexee
chelsea@livelylabs.com
DON’T
PANIC