@joelgoodman
hi, i’m
JOEL G GOODMAN
@joelgoodman
joelgoodman.co
I own a boutique web firm
@braverymedia
braverymedia.co
BRAVERY
TRANSMEDIA
HISTORY LESSON
remember when...

Arial
Comic Sans MS
Courier New
Georgia
Tahoma
Times New Roman
Trebuchet MS
Verdana
Symbol
&
http://www...
life was so simple with
9 fonts to worry about
@font-face
today...
today...
Google: 632 families
Adobe Edge Fonts: 502 families
and that’s just the
free services!
FEELINGS
design for emotion...
SHAPE WEIGHT STYLE
CLASSIFICATION
classifications...
SERIF SANS-SERIF SCRIPT
SLAB SERIF DISPLAY
how do you choose?
MAKING SENSE
of it...
rules...
Don’t use more than 2 different fonts in
any given design.
R UL E OF THU MB
rules...
Don’t combine the same font-styles.
SE COND R UL E OF THU MB
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...
font styles...
Serif Font
Also Serif Font
font styles...
Sans-serif Font
Also Sans-serif Font
Mixed Serif Fonts
Messenger bag fingerstache dolor vinyl , you probably haven't heard of them banjo
odio jean shorts proid...
Mixed Sans-serif Fonts
Messenger bag fingerstache dolor vinyl , you probably haven't heard of
them banjo odio jean shorts p...
This works, though!
Messenger bag fingerstache dolor vinyl , you probably haven't heard of
them banjo odio jean shorts proi...
Using Playfair Display
and Source Sans Pro
served by Google Fonts
tip...
You can get a lot of mileage out of just
one font family.
G OOD TO KN OW
Using Omnes Pro
served by Typekit
Using Open Sans
@font-face CSS
rules...
Some fonts are better for headlines than
others. Some are better for body text.
R UL E OF THU MB
rules...
Use hierarchy to clearly distinguish
different elements in your design.
R UL E OF THU MB
headings should
stand out.
headings should
separate sections
on the page.
rules...
Adjust your copy line-height to give your
text blocks room to breathe.
R UL E OF THU MB
rules...
Consider your users. Is your text too small
for weak eyes? Is it too big and hard to
move your eyes across the pa...
rules...
If you have a large block of text, don’t
make the font-size too small.
R UL E OF THU MB
rules...
Pay attention to licenses and copyrights.
R UL E OF LE GAL ITY
No, REALLY.
Pay attention to licenses and copyrights!!!
R UL E OF LE GAL ITY
licensing options...
FREE SERVICES
• Google Webfonts
• Adobe Edge Fonts

PAID SERVICES
• Typekit
• Cloudtype (Hoefler & Co...
resources...
• thinkingwithtype.com
• practicaltypography.com
• ilovetypography.com
• fontbook.com
• typekit.com
• google....
thanks!
@braverymedia
braverymedia.co
@joelgoodman
joelgoodman.co
Typography Matters
Typography Matters
Typography Matters
Upcoming SlideShare
Loading in...5
×

Typography Matters

294

Published on

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

Published in: Design, Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
294
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Typography Matters

  1. 1. @joelgoodman
  2. 2. hi, i’m JOEL G GOODMAN @joelgoodman joelgoodman.co
  3. 3. I own a boutique web firm @braverymedia braverymedia.co BRAVERY TRANSMEDIA
  4. 4. HISTORY LESSON
  5. 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. 6. life was so simple with 9 fonts to worry about
  7. 7. @font-face today...
  8. 8. today... Google: 632 families Adobe Edge Fonts: 502 families
  9. 9. and that’s just the free services!
  10. 10. FEELINGS
  11. 11. design for emotion... SHAPE WEIGHT STYLE CLASSIFICATION
  12. 12. classifications... SERIF SANS-SERIF SCRIPT SLAB SERIF DISPLAY
  13. 13. how do you choose?
  14. 14. MAKING SENSE of it...
  15. 15. rules... Don’t use more than 2 different fonts in any given design. R UL E OF THU MB
  16. 16. rules... Don’t combine the same font-styles. SE COND R UL E OF THU MB
  17. 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. 18. font styles... Serif Font Also Serif Font
  19. 19. font styles... Sans-serif Font Also Sans-serif Font
  20. 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. 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. 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. 23. Using Playfair Display and Source Sans Pro served by Google Fonts
  24. 24. tip... You can get a lot of mileage out of just one font family. G OOD TO KN OW
  25. 25. Using Omnes Pro served by Typekit
  26. 26. Using Open Sans @font-face CSS
  27. 27. rules... Some fonts are better for headlines than others. Some are better for body text. R UL E OF THU MB
  28. 28. rules... Use hierarchy to clearly distinguish different elements in your design. R UL E OF THU MB
  29. 29. headings should stand out.
  30. 30. headings should separate sections on the page.
  31. 31. rules... Adjust your copy line-height to give your text blocks room to breathe. R UL E OF THU MB
  32. 32. 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
  33. 33. rules... If you have a large block of text, don’t make the font-size too small. R UL E OF THU MB
  34. 34. rules... Pay attention to licenses and copyrights. R UL E OF LE GAL ITY
  35. 35. No, REALLY. Pay attention to licenses and copyrights!!! R UL E OF LE GAL ITY
  36. 36. licensing options... FREE SERVICES • Google Webfonts • Adobe Edge Fonts
 PAID SERVICES • Typekit • Cloudtype (Hoefler & Co.) • MyFonts • Fontdeck • lots of others…
  37. 37. resources... • thinkingwithtype.com • practicaltypography.com • ilovetypography.com • fontbook.com • typekit.com • google.com/fonts • typecast.com
  38. 38. thanks! @braverymedia braverymedia.co @joelgoodman joelgoodman.co
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×