Basic rules for using typography on the web. Given at WordCamp Austin 2014.

1. @joelgoodman

2. hi, i’m
JOEL G GOODMAN
@joelgoodman
joelgoodman.co

3. I own a boutique web firm
@braverymedia
braverymedia.co
BRAVERY
TRANSMEDIA

4. HISTORY LESSON

5. remember when...

Arial
Comic Sans MS
Courier New
Georgia
Tahoma
Times New Roman
Trebuchet MS
Verdana
Symbol
&
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

6. life was so simple with
9 fonts to worry about

7. @font-face
today...

8. today...
Google: 632 families
Adobe Edge Fonts: 502 families

9. and that’s just the
free services!

10. FEELINGS

11. design for emotion...
SHAPE WEIGHT STYLE
CLASSIFICATION

12. classifications...
SERIF SANS-SERIF SCRIPT
SLAB SERIF DISPLAY

13. how do you choose?

14. MAKING SENSE
of it...

15. rules...
Don’t use more than 2 different fonts in
any given design.
R UL E OF THU MB

16. rules...
Don’t combine the same font-styles.
SE COND R UL E OF THU MB

17. rules guidelines
BUTT E RI CK’S PR ACTI CAL TY POGR A PHY
Mixing fonts is like mixing patterned
shirts and ties—there aren’t immutable
rules. Some people have a knack for it;
some don’t.

18. font styles...
Serif Font
Also Serif Font

19. font styles...
Sans-serif Font
Also Sans-serif Font

20. Mixed Serif Fonts
Messenger bag fingerstache dolor vinyl , you probably haven't heard of them banjo
odio jean shorts proident tempor artisan. Kale chips salvia high life brooklyn vero
pour-over. Food truck accusamus laboris, non +1 mustache polaroid craft beer elit.
Master cleanse id lomo meggings, nihil viral mixtape qui forage et beard actually
consectetur. Pariatur veniam trust fund, keytar commodo whatever iphone. Pork
belly ad artisan literally, whatever wes anderson in etsy banksy non. Nulla ullamco
portland duis.
Pug flannel pickled, whatever master cleanse non keffiyeh. Umami viral truffaut,
brunch banh mi swag dreamcatcher accusamus YOLO banjo irure godard. Proident
pariatur terry richardson actually dolor helvetica. Anim messenger bag YOLO,
retro proident +1 organic neutra tempor odio american apparel vero occaecat.
Vegan bicycle rights seitan brooklyn, synth chillwave veniam wolf typewriter
cillum. Est occaecat semiotics, chambray do reprehenderit quinoa tonx officia

21. Mixed Sans-serif Fonts
Messenger bag fingerstache dolor vinyl , you probably haven't heard of
them banjo odio jean shorts proident tempor artisan. Kale chips salvia high
life brooklyn vero pour-over. Food truck accusamus laboris, non +1 mustache
polaroid craft beer elit. Master cleanse id lomo meggings, nihil viral mixtape
qui forage et beard actually consectetur. Pariatur veniam trust fund, keytar
commodo whatever iphone. Pork belly ad artisan literally, whatever wes
anderson in etsy banksy non. Nulla ullamco portland duis.
Pug flannel pickled, whatever master cleanse non keffiyeh. Umami viral
truffaut, brunch banh mi swag dreamcatcher accusamus YOLO banjo irure
godard. Proident pariatur terry richardson actually dolor helvetica. Anim
messenger bag YOLO, retro proident +1 organic neutra tempor odio
american apparel vero occaecat. Vegan bicycle rights seitan brooklyn, synth

22. This works, though!
Messenger bag fingerstache dolor vinyl , you probably haven't heard of
them banjo odio jean shorts proident tempor artisan. Kale chips salvia high
life brooklyn vero pour-over. Food truck accusamus laboris, non +1 mustache
polaroid craft beer elit. Master cleanse id lomo meggings, nihil viral mixtape
qui forage et beard actually consectetur. Pariatur veniam trust fund, keytar
commodo whatever iphone. Pork belly ad artisan literally, whatever wes
anderson in etsy banksy non. Nulla ullamco portland duis.
Pug flannel pickled, whatever master cleanse non keffiyeh. Umami viral
truffaut, brunch banh mi swag dreamcatcher accusamus YOLO banjo irure
godard. Proident pariatur terry richardson actually dolor helvetica. Anim
messenger bag YOLO, retro proident +1 organic neutra tempor odio
american apparel vero occaecat. Vegan bicycle rights seitan brooklyn, synth

23. Using Playfair Display
and Source Sans Pro
served by Google Fonts

24. tip...
You can get a lot of mileage out of just
one font family.
G OOD TO KN OW

25. Using Omnes Pro
served by Typekit

26. Using Open Sans
@font-face CSS

27. rules...
Some fonts are better for headlines than
others. Some are better for body text.
R UL E OF THU MB

31. rules...
Use hierarchy to clearly distinguish
different elements in your design.
R UL E OF THU MB

32. headings should
stand out.

33. headings should
separate sections
on the page.

34. rules...
Adjust your copy line-height to give your
text blocks room to breathe.
R UL E OF THU MB

35. rules...
Consider your users. Is your text too small
for weak eyes? Is it too big and hard to
move your eyes across the page?
R UL E OF THU MB

36. rules...
If you have a large block of text, don’t
make the font-size too small.
R UL E OF THU MB

37. rules...
Pay attention to licenses and copyrights.
R UL E OF LE GAL ITY

38. No, REALLY.
Pay attention to licenses and copyrights!!!
R UL E OF LE GAL ITY

39. licensing options...
FREE SERVICES
• Google Webfonts
• Adobe Edge Fonts
PAID SERVICES
• Typekit
• Cloudtype (Hoefler & Co.)
• MyFonts
• Fontdeck
• lots of others…

40. resources...
• thinkingwithtype.com
• practicaltypography.com
• ilovetypography.com
• fontbook.com
• typekit.com
• google.com/fonts
• typecast.com

41. thanks!
@braverymedia
braverymedia.co
@joelgoodman
joelgoodman.co