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

2.
I have a
question!

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

4.
Ya

5.
K

6.
Go oGLe!

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

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

9.
@font-face

10.
Futura

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

12.
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

13.
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

14.
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.

15.
Love

16.
totally
serious

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

18.
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.

19.
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

20.
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

21.
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

22.
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

23.
slides @ andywashere.com/wcchi

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

25.
>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

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

27.
@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

28.
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

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