4. red, yellow, blue, green, orange,
brown, violet (purple), and black
With only 8 options, choosing is easy
5. Apricot, Aquamarine, Bittersweet
Black, Blue, Blue Gray, Blue Green,
Blue Violet, Brick Red, Brown, Burnt
Orange, Burnt Sienna, Cadet Blue,
Carnation Pink, Copper, Cornflower,
Forest Green, Gold, Goldenrod, Gray,
Green, Green Blue, Green Yellow,
Indian Red*, Lavender, Lemon Yellow,
Magenta, Mahogany, Maize, Maroon,
Melon, Mulberry*, Navy Blue, Olive
Green, Orange, Orange Red, Orange
Yellow, Orchid, Flesh*, Periwinkle,
Pine Green, Plum, Midnight Blue, Raw
Sienna, Raw Umber, Red, Red Orange,
Red Violet, Salmon, Sea Green, Sepia,
Sky Blue, Silver, Spring Green, Tan,
Thistle*, Turquoise Blue, Violet, Violet
Blue, Violet Red, White, Yellow, Yellow
Green, Yellow Orange
*Renamed: Chestnut (1999), Mango Tango (2003),
Peach (1962), Indigo (2000)
With 64 options, making choices gets trickier
6.
7. Arial Impact
Arial Black Times New Roman
Comic Sans MS Trebuchet MS
Georgia Verdana
Courier New
With only 9 options, choosing is easy...
8. Arial
Helvetica is better
Impact :-p
ugly
Arial Black Times New Roman
too dark for body copy hard to read online
Comic Sans MS Trebuchet MS
never ever!
Georgia Verdana
didn’t deserve the
Courier New promotion IKEA
gave it
good for code, not for copy
...but some options are better than others.
9. I’m not bad.
I’m just drawn that way.
Comic Sans is a lot like Jessica Rabbit
19. Takeaway no. 2
Understanding typeface
categories is more important
than knowing individual fonts
20. Display
Straigh(orward, easy to read at a small size for an
extended period of 8me. Not too visually exci8ng,
Text but long form copy isn’t really meant to be. It’s for
sharing ideas in a clear visual presenta8on that
doesn’t overpower the concepts therein.
Headline: Bodoni Classic Freestyle
from FontSpring
Body copy: Calibri from Microsoft
Display fonts vs. Text fonts
21. Typekit
FontSpring
Google Web Fonts
Navigating font styles & tags
22. Academic Categories Popular Styles & Tags
Humanist Bitmap
Transitional Blackletter
Modern / Geometric Comic & Cartoon
Distressed (Grunge)
Futuristic (Techno)
Retro & Novelty
Script & Handwriting
Stencil
Typewriter & Monospace
Western
Fonts are categorized by shape and cultural reference
24. FontSpring
Helvetica Neue
Licensed by Apple
Good for: Avoid:
Body copy Over-reliance
Academic Category 2: Transitional
25. FontSpring
Typekit
Good for: Avoid:
Historic (Modern Era) Body copy
Academic Category 3: Modern / Geometric
26. Typekit
FontSpring
FontSpring
Good for: Avoid:
Headlines Historical (pre-1990s)
Button text
Popular Styles 1: Bitmap
27. FontSpring
Typekit
Good for: Avoid:
Edgy Body copy
Metal m/ Feminine brands
Historical (Middle Ages)
Popular Styles 2: Blackletter
28. Typekit
FontSpring
Google Web Fonts
Good for: Avoid:
Captions, Headlines Long Passages
Popular Styles 3: Comic & Cartoon
29. FontSpring
Typekit
FontSpring
Good for: Avoid:
Texture Repetition
Popular Styles 4: Distressed (Grunge)
30. Typekit
FontSpring
FontSpring
Good for: Avoid:
Headlines, Body copy Inconsistency
(in certain instances)
Popular Styles 5: Futuristic (Techno)
31. FontSpring
Typekit
Google Web Fonts
Good for: Avoid:
Nuthin’ Like the plague
Popular Styles 6: Retro & Novelty
32. Google Web Fonts
FontSpring
Typekit
Good for: Avoid:
Headlines, Over-elaborate
Calls-to-Action flourishes, childish
Popular Styles 7: Script & Handwriting
33. Typekit
FontSpring
FontSpring
Good for: Avoid:
Callouts, adding edge Body copy
Popular Styles 8: Stencil
34. FontSpring
Typekit
Typekit
Good for: Avoid:
Code, Personal manifestos Monotony
Popular Styles 9: Typewriter & Monospace
35. Google Web Fonts
FontSpring
FontSpring
Good for: Avoid:
Party invites Business use
Body copy
Popular Styles 10: Western
37. Hey there! Look at me.
Hmm...That’s totally a knock-off.
Bodoni and Didot from FontSpring
Howdy Partner
Best not jump my claim, rodeo clown.
Rosewood and Mesquite
Why can’t we be friends?
Because you’re ripping off my swag. Kenyan Coffee and Steelfish
from FontSpring
Typefaces clash when they are too similiar
38. I’m looking for
a leading role.
Steelspring Serif from FontSpring
I’ll be your sidekick. I do my best Georgia
work in making you look good.
Combine a sober face with a more stylish enabler
39. I’m classic and Miller Text Bold Italic
back in vogue.
My steady, unadorned look provides
contrast to your 4lowing, curvy lines. Cambria
You can have the limelight.
Don’t overlook italics
40. My superslim appearance
delivers a punch of personality.
Steelfish Regular from FontSpring
My tall x-height makes the body copy easier to read Arial
at a smaller size. I may look pretty boring, but I’ll tell
you what you need to know.
Headlines for style, body copy for substance
41. Takeaway no. 4
Successful typographical
heirarchies rely on the effective
use of contrast
42. Navigation
Headline
Sub-Headline for main content
Introductory quote
Body copy
Sidebar headline
Sidebar body copy
Link text
Call to action
Contact information
Footer links
Carefully note all levels of information in your design
43. Navigation Tab 1 Navigation Tab 2 Navigation Tab 3
THE HEADLINE IS THE BIG IDEA
This subhead introduces the reader to the topic
“The quote hooks the audience.”
Venison beef ribs shoulder bacon strip steak. Salami turkey fatback swine, Related Topic Headline
tenderloin flank pork drumstick chuck. Beef tri-tip pork chop ham hock andouille,
flank brisket shankle pork loin spare ribs shank sausage drumstick meatloaf.
Venison beef ribs shoulder bacon strip
Chicken beef ribs tenderloin short loin. Flank fatback t-bone salami pancetta steak. Salami turkey fatback swine,
shankle. Tenderloin brisket ball tip, pork loin tri-tip hamburger fatback turkey t- tenderloin flank pork drumstick chuck.
bone pork chop shoulder ham hock pastrami bacon. Salami ribeye pork belly, Beef tri-tip pork chop ham hock
ham corned beef venison meatball strip steak drumstick swine andouille ball tip andouille, flank brisket shankle pork
pork chop sirloin chuck. loin spare ribs shank sausage
drumstick meatloaf.
The next subhead separates one idea from another. Venison beef ribs shoulder bacon strip
Venison beef ribs shoulder bacon strip steak. Salami turkey fatback swine, steak. Salami turkey fatback swine,
tenderloin flank pork drumstick chuck. Beef tri-tip pork chop ham hock andouille, tenderloin flank pork drumstick chuck.
flank brisket shankle pork loin spare ribs shank sausage drumstick meatloaf.
Call to action tells the user what to do next >>>
Contact Information
Footer Link 1 | Footer Link 2 | Footer Link 3 | Footer Link 4
“Wireframe” design set entirely in Avenir
Use size, color, weight, and shape to create contrast
44. Naviga&on Tab 1 Naviga&on Tab 2 Naviga&on Tab 3
THE HEADLINE IS THE BIG IDEA
This subhead introduces the reader to the topic
“The quote hooks the audience.”
Venison beef ribs shoulder bacon strip steak. Salami turkey fatback swine, tenderloin Related Topic Headline
flank pork drumstick chuck. Beef tri-tip pork chop ham hock andouille, flank brisket
shankle pork loin spare ribs shank sausage drumstick meatloaf. Chicken beef ribs
Venison beef ribs shoulder bacon strip
tenderloin short loin. Flank fatback t-bone salami pancetta shankle. Tenderloin brisket steak. Salami turkey fatback swine,
ball tip, pork loin tri-tip hamburger fatback turkey t-bone pork chop shoulder ham hock tenderloin flank pork drumstick chuck.
pastrami bacon. Salami ribeye pork belly, ham corned beef venison meatball strip Beef tri-tip pork chop ham hock andouille,
steak drumstick swine andouille ball tip pork chop sirloin chuck. flank brisket shankle pork loin spare ribs
shank sausage drumstick meatloaf.
The next subhead separates one idea from another. Venison beef ribs shoulder bacon strip
Venison beef ribs shoulder bacon strip steak. Salami turkey fatback swine, tenderloin steak. Salami turkey fatback swine,
flank pork drumstick chuck. Beef tri-tip pork chop ham hock andouille, flank brisket tenderloin flank pork drumstick chuck.
shankle pork loin spare ribs shank sausage drumstick meatloaf.
Call to action tells the user what to do next >>>
Contact Information “Heirarchy” design set in:
Calibri, Mufferaw, Museo , Vanburg,
Footer Link 1 | Footer Link 2 | Footer Link 3 | Footer Link 4 Franklin Gothic Book, Museo Slab,
Georgia, and Rockwell
Apply contrasting typefaces to specific data elements
45. Bacon Ipsum
Venison beef ribs shoulder bacon strip steak. Salami
turkey fatback swine, tenderloin flank pork drumstick
chuck. Beef tri-tip pork chop ham hock andouille, flank
brisket shankle pork loin spare ribs shank sausage
drumstick meatloaf. Chicken beef ribs tenderloin short
loin. Flank fatback t-bone salami pancetta shankle.
Tenderloin brisket ball tip, pork loin tri-tip hamburger
fatback turkey t-bone pork chop shoulder ham hock
pastrami bacon. Salami ribeye pork belly, ham corned
beef venison meatball strip steak drumstick swine
andouille ball tip pork chop sirloin chuck.
http://www.baconipsum.com
Move over greeking, now there’s something meatier
46. Takeaway no. 5
You do not have complete
control over how your
typography is displayed
48. http://www.fontspring.com/fontface
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
Use bulletproof @font-face syntax
49. Em = M
Typically*, 1Em = 16 pixels
*Also typical is that your user has changed their settings.
Deploy relative type size controls
50. { font: 'Exactly what I want', 'A solid substitute',
A reasonable stand-in, Works in a pinch, I guess
this is okay, C’mon asshole buy a new computer; }
Continue to build regressive type stacks