typography matters

@joelgoodman

hi, i’mJOEL 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.ampsoft.net/webdesign-l/WindowsMacFonts.html

life was so simple with 9 fonts to worry about

@font-facetoday...

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 SENSEof it...

rules...

Don’t use more than 2 different fonts in any given design.

R U L E O F T H U M B

rules...

Don’t combine the same font-styles.

S E C O N D R U L E O F T H U M B

rules guidelines

B U T T E R I C K ’ S P R AC T I C A L T Y P O G R A P H Y

Mixing fonts is like mixing patterned

shirts and ties—there aren’t immutable

rules. Some people have a knack for it;

some don’t.

font styles...

Serif FontAlso Serif Font

font styles...

Sans-serif FontAlso Sans-serif Font

Mixed Serif FontsMessenger 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

Mixed Sans-serif FontsMessenger 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

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 chillwave veniam wolf typewriter cillum. Est occaecat semiotics, chambray

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 O O D T O K N O W

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 U L E O F T H U M B

rules...

Use hierarchy to clearly distinguish different elements in your design.

R U L E O F T H U M B

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 U L E O F T H U M B

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 U L E O F T H U M B

rules...

If you have a large block of text, don’t make the font-size too small.

R U L E O F T H U M B

rules...

Pay attention to licenses and copyrights.

R U L E O F L E G A L I T Y

No, REALLY.

Pay attention to licenses and copyrights!!!

R U L E O F L E G A L I T Y

licensing options...FREE SERVICES • Google Webfonts • Adobe Edge Fonts

PAID SERVICES • Typekit • Cloudtype (Hoefler & Co.) • MyFonts • Fontdeck • lots of others…

resources...

• thinkingwithtype.com • practicaltypography.com • ilovetypography.com • fontbook.com

• typekit.com • google.com/fonts • typecast.com

thanks!

@braverymedia braverymedia.co @joelgoodman joelgoodman.co