Until fairly recently, a sixth-grader doing a book report had more typographic choice than CNN had for their (very expensive) website. With the advent of the CSS @font-face, web designers have more choice than ever before. This presentation covers the basics of typographic theory for the web, as well as how to embed web fonts in your WordPress site.

1. TYPEon the
web
andy christian
@andrew_cpht
andywashere.com
tadpole.cc
slides @ andywashere.com/wcchi

2. I have a
question!

6. "Typography is what
language looks like."
- Ellen Lupton

8. Ya

10. K

11. Go oGLe!

13. Lucida Console
Tahoma
Times New Roman
Trebuchet MS
Verdana

(Webdings)
Arial
Arial Black
Comic Sans
Courier New
Georgia
Impact

15. use images
instead
dynamic image
replacement
javascript-based
font replacement

16. @font-face

25. Futura

26. 12 Point (pt)
1pt = 1/72 in.
16 Pixels (px)
1 Em
Ratio to base/parent size
100%

27. Squid Pinterest Williamsburg, laborum
cupidatat +1 iPhone polaroid direct trade
nisi cardigan tattooed placeat. Butcher fanny
Squid Pinterest Williamsburg, laborum
cupidatat +1 iPhone polaroid direct trade
nisi cardigan tattooed placeat. Butcher fanny
Squid Pinterest Williamsburg, laborum
cupidatat +1 iPhone polaroid direct trade
nisi cardigan tattooed placeat. Butcher fanny
CSS Property: line-height
Leading

28. W o l f p u t a b i r d o n i t
c r e d c h u r c h - k e y p h o t o
b o o t h , p o r k b e l l y v i n y l
T e r r y R i c h a r d s o n
a c c u s a m u s p i t c h f o r k .
Tracking/Kerning
Wolfputabirdonitcredchurch-keyphotobooth,porkbelly
vinylTerryRichardsonaccusamuspitchforkartisanconsectetur
veniamswagskateboard.
Wolf put a bird on it cred church-key photo
booth, pork belly vinyl Terry Richardson
accusamus pitchfork artisan consectetur
veniam swag skateboard.
CSS Property: letter-spacing

29. Measure
Proident swag viral, beard artisan ullamco enim plaid
placeat freegan culpa qui scenester cornhole. Beard
ennui nesciunt consequat jean shorts trust fund.
Messenger bag fingerstache ut, High Life shoreditch.
Banh mi brunch.
Echo Park next level mumblecore trust fund PBR. Carles
master cleanse salvia Wes Anderson, minim farm.
Proident swag viral, beard artisan ullamco enim plaid placeat freegan culpa
qui scenester cornhole. Beard ennui nesciunt.
Consequat jean shorts trust fund. Messenger bag fingerstache ut, High Life
shoreditch. Banh mi brunch.
Echo Park next level mumblecore trust fund PBR. Carles master cleanse salvia
Wes Anderson, minim farm-to-table cray occupy tousled.
Proident swag
viral, beard
artisan ullamco
enim plaid.
Placeat
freegan culpa
qui scenester.

32. Love

34. totally
serious

35. Serif Sans Serif
Slab Serif
Script/HandwritingBlackletter
Monospace
and much more...

36. Sans Serif & Serif
Helvetica
This is Garamond. Freegan veniam laborum, magna
do quis locavore Godard actually Pinterest. Fixie est
chillwave labore. Next level Terry Richardson
deserunt tempor, dreamcatcher proident salvia. Pork
belly dolore nostrud sapiente fap selvage nulla,
street art sunt. Nesciunt Vice DIY, officia church-
key bicycle rights fixie ea dreamcatcher. Street art
Schlitz freegan chambray. Voluptate eiusmod street
art, ea ugh Echo Park Tonx.

37. Calluna
This is Delicious. Both typefaces are by Exljbris.
Freegan veniam laborum, magna do quis locavore
Godard actually Pinterest. Fixie est chillwave labore.
Next level Terry Richardson deserunt tempor,
dreamcatcher proident salvia. Pork belly dolore
nostrud sapiente fap selvage nulla, street art sunt.
Nesciunt Vice DIY, officia church-key bicycle rights fixie
ea dreamcatcher. Street art Schlitz freegan chambray.
Voluptate eiusmod street art, ea ugh Echo Park Tonx.
Same Designer

38. Museo Slab
This is Museo Sans. Freegan veniam laborum, magna
do quis locavore Godard actually Pinterest. Fixie est
chillwave labore. Next level Terry Richardson
deserunt tempor, dreamcatcher proident salvia. Pork
belly dolore nostrud sapiente fap selvage nulla,
street art sunt. Nesciunt Vice DIY, officia church-key
bicycle rights fixie ea dreamcatcher. Street art Schlitz
freegan chambray. Voluptate eiusmod street art, ea
ugh Echo Park Tonx.
Same Family

39. DELICIOUS ROMAN
This is also Delicious Roman. The heading is all
caps and bold with extra letter-spacing. Freegan
veniam laborum, magna do quis locavore Godard
actually Pinterest. Fixie est chillwave labore. Next
level Terry Richardson deserunt tempor,
dreamcatcher proident salvia. Pork belly dolore
nostrud sapiente fap selvage nulla, street art sunt.
Nesciunt Vice DIY, officia church-key bicycle rights
fixie ea dreamcatcher. Street art Schlitz freegan
chambray. Voluptate eiusmod street art, ea ugh
Echo Park Tonx, lorem ipsum dolor.
Same Font

40. Times New Roman
This is Garamond. These typefaces are too similar to
use together. Freegan veniam laborum, magna do quis
locavore Godard actually Pinterest. Fixie est chillwave
labore. Next level Terry Richardson deserunt tempor,
dreamcatcher proident salvia. Pork belly dolore
nostrud sapiente fap selvage nulla, street art sunt.
Nesciunt Vice DIY, officia church-key bicycle rights
fixie ea dreamcatcher. Street art Schlitz freegan
chambray. Voluptate eiusmod street art, ea ugh Echo
Park Tonx, lorem ipsum dolor sit.
Avoid too much
similarity

41. slides @ andywashere.com/wcchi

42. EOT - Embedded Open Type
TTF - TrueType Font
OTF - OpenType Font
WOFF - Web Open Font Format
SVG - Scalable Vector Graphics

43. >9 EOT; 9+ EOT, WOFF, OTF
WOFF, TTF, and SVG
WOFF, OTF, and TTF
Mobile Safari <4.2, only SVG
WOFF, OTF, TTF, and SVG

47. @font-face {
font-family: 'Web Font';
src: url('webfont.ttf');
}
h1 {
font-family: ‘Web Font’;
}
slides @ andywashere.com/wcchi

48. @font-face {
font-family: 'Web Font';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype'),
url('webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: ‘Web Font’, Helvetica, Arial, sans-serif;
font-size: 1.75em;
letter-spacing: 0.2em;
text-transform: uppercase;
}
p {
font-family: ‘Web Font’, Helvetica, Arial, sans-serif;
line-height: 1.5em;
}
slides @ andywashere.com/wcchi

49. Resources
Free Fonts
google.com/webfonts/
fontsquirrel.com
fontspace.com
Free/Paid Fonts
myfonts.com
Subscription Fonts Services
typekit.com
fontdeck.com
webink.com
webtype.com
kernest.com
Pay Per Font Services
fonts.com
typotheque.com
fontspring.com
More Free Fonts
http://www.creativebloq.com/graphic-design-tips/best-
free-fonts-for-designers-1233380
http://www.designyourway.net/blog/resources/60-
fresh-free-fonts-youd-consider-using-in-your-projects/
http://sixrevisions.com/resources/free-icon-fonts/
Blogs, Tutorials and other resources
http://nicewebtype.com/
http://ilovetypography.com/
http://www.1stwebdesigner.com/css/css3-text-effects-
typography/
http://www.fontsquirrel.com/tools/webfont-generator/
http://www.slideshare.net/jeff_croft/elegant-web-
typography-presentation
http://www.slideshare.net/klepas/beautiful-web-
typography-5
slides @ andywashere.com/wcchi

50. andywashere.com@andrew_cpht
t
andy christian
slides available at
andywashere.com/wcchi
tadpole.cc