How to Choose FontsA Practical Guide to Web-Optimized Typefaces                                                           ...
I am Mick WintersI am not Theo RosendorfLast-minute substitution
Which box did you have when you were a kid?
red, yellow, blue, green, orange,            brown, violet (purple), and blackWith only 8 options, choosing is easy
Apricot, Aquamarine, BittersweetBlack, Blue, Blue Gray, Blue Green,Blue Violet, Brick Red, Brown, BurntOrange, Burnt Sienn...
Arial                          ImpactArial Black                    Times New RomanComic Sans MS                  Trebuche...
Arial  Helvetica is better                                 Impact :-p                                     uglyArial Black ...
I’m not bad. I’m just drawn that way.Comic Sans is a lot like Jessica Rabbit
http://typekit.com/libraries/fullNow, hundreds of @font-face Webfonts are available
Takeaway no.1  Closely examining letterform anatomy leads to greater taste       in typeface design
From “The Typographic Desk Reference” by Theo Rosendorf                                                          http://ty...
Function Pro from FontSpringLook for families with multiple weights
Urbano from FontSpringDon’t distort typefaces—find the right width
Report from FontSpring                                      Cinecav X from FontSpringCompare geometry—round shapes, right ...
Caslon from FontSpring                             Bonobo from FontSpringCompare the variation of stroke widths
Gaudy Catalog from FontSpring                     Brandon Grotesque from FontSpringSerif & Sans Serif
Museo family from FontSpringSlab Serif
Takeaway no. 2    Understanding typeface  categories is more important  than knowing individual fonts
Display          Straigh(orward,
easy
to
read
at
a
small
size
for
an
          extended
period
of
8me.
Not
too
visually
ex...
Typekit                       FontSpringGoogle Web Fonts                   Navigating font styles & tags
Academic Categories     Popular Styles & TagsHumanist                BitmapTransitional            BlackletterModern / Geo...
FontSpring                                  FontSpringGood for:                       Avoid:Providing balance             ...
FontSpring              Helvetica Neue                                         Licensed by AppleGood for:                 ...
FontSpring                               TypekitGood for:                      Avoid:Historic (Modern Era)          Body c...
Typekit                             FontSpring                                                    FontSpringGood for:     ...
FontSpring                                               TypekitGood for:                           Avoid:Edgy            ...
Typekit                                                 FontSpring                                        Google Web Fonts...
FontSpring                                                  Typekit                                             FontSpring...
Typekit                                              FontSpring                                     FontSpringGood for:   ...
FontSpring                                                       Typekit                                    Google Web Fon...
Google Web Fonts                                                 FontSpring                                           Type...
Typekit                                             FontSpring                                                     FontSpr...
FontSpring                                            Typekit                                             TypekitGood for:...
Google Web Fonts                                                             FontSpring                                   ...
Takeaway no. 3  Seek surprising, yet balanced   combinations of typefaces
Hey there! Look at me.Hmm...That’s totally a knock-off.Bodoni and Didot from FontSpring                                   ...
I’m looking fora leading role.                                       Steelspring Serif from FontSpringI’ll be your sidekic...
I’m classic and                           Miller Text Bold Italicback in vogue.My steady, unadorned look provides contrast...
My superslim appearancedelivers a punch of personality.                                                             Steelf...
Takeaway no. 4    Successful typographical heirarchies rely on the effective         use of contrast
Navigation              Headline              Sub-Headline for main content              Introductory quote              B...
Navigation Tab 1                    Navigation Tab 2            Navigation Tab 3THE HEADLINE IS THE BIG IDEAThis subhead i...
Naviga&on
Tab
1                        Naviga&on
Tab
2          Naviga&on
Tab
3THE HEADLINE IS THE BIG IDEAThis subhead in...
Bacon Ipsum       Venison beef ribs shoulder bacon strip steak. Salami       turkey fatback swine, tenderloin flank pork d...
Takeaway no. 5     You do not have complete       control over how your      typography is displayed
Review your browser analytics
http://www.fontspring.com/fontface              http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntaxUse bul...
Em = M   Typically*, 1Em = 16 pixels   *Also typical is that your user has changed their settings.Deploy relative type siz...
{ font: Exactly what I want, A solid substitute,A reasonable stand-in, Works in a pinch, I guessthis is okay, C’mon asshol...
http://www.fontcomparer.com/Test to see how your substitution choices will perform
Takeaway no. 7    There are many good freefonts available, but you’ll need to   buy (or steal) the best fonts
*Only if you have lots of                              time and patience to weed                              through a to...
Best pay sites for fonts
Final Takeaway         Creative Developers       are the superstars of the        not-too-distant future
Thank you! Any questions?Feel free to connect with me on Twitter:         @mickwinters       #remixsouthfonts
How to Choose Fonts: A Practical Guide to Web-Optimized Typefaces
How to Choose Fonts: A Practical Guide to Web-Optimized Typefaces
Upcoming SlideShare
Loading in …5
×

How to Choose Fonts: A Practical Guide to Web-Optimized Typefaces

3,244 views

Published on

Presented at Remix South 2011 in Atlanta, Georgia by Mick Winters, Adjunct Professor of Design at The Creative Circus.

Published in: Design

How to Choose Fonts: A Practical Guide to Web-Optimized Typefaces

  1. 1. How to Choose FontsA Practical Guide to Web-Optimized Typefaces Image © Don Moyer Mick Winters @mickwinters Director of User Experience at HM Wallace #remixsouthfonts Adjunct Professor at The Creative Circus
  2. 2. I am Mick WintersI am not Theo RosendorfLast-minute substitution
  3. 3. Which box did you have when you were a kid?
  4. 4. red, yellow, blue, green, orange, brown, violet (purple), and blackWith only 8 options, choosing is easy
  5. 5. Apricot, Aquamarine, BittersweetBlack, Blue, Blue Gray, Blue Green,Blue Violet, Brick Red, Brown, BurntOrange, 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, OliveGreen, Orange, Orange Red, OrangeYellow, Orchid, Flesh*, Periwinkle,Pine Green, Plum, Midnight Blue, RawSienna, Raw Umber, Red, Red Orange,Red Violet, Salmon, Sea Green, Sepia,Sky Blue, Silver, Spring Green, Tan,Thistle*, Turquoise Blue, Violet, VioletBlue, Violet Red, White, Yellow, YellowGreen, Yellow Orange*Renamed: Chestnut (1999), Mango Tango (2003), Peach (1962), Indigo (2000) With 64 options, making choices gets trickier
  6. 6. Arial ImpactArial Black Times New RomanComic Sans MS Trebuchet MSGeorgia VerdanaCourier New With only 9 options, choosing is easy...
  7. 7. Arial Helvetica is better Impact :-p uglyArial Black Times New Roman too dark for body copy hard to read onlineComic Sans MS Trebuchet MS never ever!Georgia Verdana didn’t deserve theCourier New promotion IKEA gave it good for code, not for copy ...but some options are better than others.
  8. 8. I’m not bad. I’m just drawn that way.Comic Sans is a lot like Jessica Rabbit
  9. 9. http://typekit.com/libraries/fullNow, hundreds of @font-face Webfonts are available
  10. 10. Takeaway no.1 Closely examining letterform anatomy leads to greater taste in typeface design
  11. 11. From “The Typographic Desk Reference” by Theo Rosendorf http://typedeskref.com/images/5.gifPay close attention to Stem, Apex, and Counter shapes
  12. 12. Function Pro from FontSpringLook for families with multiple weights
  13. 13. Urbano from FontSpringDon’t distort typefaces—find the right width
  14. 14. Report from FontSpring Cinecav X from FontSpringCompare geometry—round shapes, right angles, sharp points
  15. 15. Caslon from FontSpring Bonobo from FontSpringCompare the variation of stroke widths
  16. 16. Gaudy Catalog from FontSpring Brandon Grotesque from FontSpringSerif & Sans Serif
  17. 17. Museo family from FontSpringSlab Serif
  18. 18. Takeaway no. 2 Understanding typeface categories is more important than knowing individual fonts
  19. 19. 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
  20. 20. Typekit FontSpringGoogle Web Fonts Navigating font styles & tags
  21. 21. Academic Categories Popular Styles & TagsHumanist BitmapTransitional BlackletterModern / Geometric Comic & Cartoon Distressed (Grunge) Futuristic (Techno) Retro & Novelty Script & Handwriting Stencil Typewriter & Monospace WesternFonts are categorized by shape and cultural reference
  22. 22. FontSpring FontSpringGood for: Avoid:Providing balance Headlines Academic Category 1: Humanist
  23. 23. FontSpring Helvetica Neue Licensed by AppleGood for: Avoid:Body copy Over-reliance Academic Category 2: Transitional
  24. 24. FontSpring TypekitGood for: Avoid:Historic (Modern Era) Body copy Academic Category 3: Modern / Geometric
  25. 25. Typekit FontSpring FontSpringGood for: Avoid:Headlines Historical (pre-1990s)Button text Popular Styles 1: Bitmap
  26. 26. FontSpring TypekitGood for: Avoid:Edgy Body copyMetal m/ Feminine brandsHistorical (Middle Ages) Popular Styles 2: Blackletter
  27. 27. Typekit FontSpring Google Web FontsGood for: Avoid:Captions, Headlines Long Passages Popular Styles 3: Comic & Cartoon
  28. 28. FontSpring Typekit FontSpringGood for: Avoid:Texture Repetition Popular Styles 4: Distressed (Grunge)
  29. 29. Typekit FontSpring FontSpringGood for: Avoid:Headlines, Body copy Inconsistency(in certain instances) Popular Styles 5: Futuristic (Techno)
  30. 30. FontSpring Typekit Google Web FontsGood for: Avoid:Nuthin’ Like the plague Popular Styles 6: Retro & Novelty
  31. 31. Google Web Fonts FontSpring TypekitGood for: Avoid:Headlines, Over-elaborateCalls-to-Action flourishes, childish Popular Styles 7: Script & Handwriting
  32. 32. Typekit FontSpring FontSpringGood for: Avoid:Callouts, adding edge Body copy Popular Styles 8: Stencil
  33. 33. FontSpring Typekit TypekitGood for: Avoid:Code, Personal manifestos Monotony Popular Styles 9: Typewriter & Monospace
  34. 34. Google Web Fonts FontSpring FontSpringGood for: Avoid:Party invites Business use Body copy Popular Styles 10: Western
  35. 35. Takeaway no. 3 Seek surprising, yet balanced combinations of typefaces
  36. 36. 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
  37. 37. I’m looking fora leading role. Steelspring Serif from FontSpringI’ll be your sidekick. I do my best Georgiawork in making you look good. Combine a sober face with a more stylish enabler
  38. 38. I’m classic and Miller Text Bold Italicback in vogue.My steady, unadorned look provides contrast to your 4lowing, curvy lines.  CambriaYou can have the limelight. Don’t overlook italics
  39. 39. My superslim appearancedelivers a punch of personality. Steelfish Regular from FontSpringMy tall x-height makes the body copy easier to read Arialat a smaller size. I may look pretty boring, but I’ll tellyou what you need to know. Headlines for style, body copy for substance
  40. 40. Takeaway no. 4 Successful typographical heirarchies rely on the effective use of contrast
  41. 41. Navigation Headline Sub-Headline for main content Introductory quote Body copy Sidebar headline Sidebar body copy Link text Call to action Contact information Footer linksCarefully note all levels of information in your design
  42. 42. Navigation Tab 1 Navigation Tab 2 Navigation Tab 3THE HEADLINE IS THE BIG IDEAThis 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 Headlinetenderloin 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 stripChicken 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 hockham corned beef venison meatball strip steak drumstick swine andouille ball tip andouille, flank brisket shankle porkpork chop sirloin chuck. loin spare ribs shank sausage drumstick meatloaf.The next subhead separates one idea from another. Venison beef ribs shoulder bacon stripVenison 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 InformationFooter 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
  43. 43. Naviga&on
Tab
1 Naviga&on
Tab
2 Naviga&on
Tab
3THE HEADLINE IS THE BIG IDEAThis 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 Headlineflank pork drumstick chuck. Beef tri-tip pork chop ham hock andouille, flank brisketshankle pork loin spare ribs shank sausage drumstick meatloaf. Chicken beef ribs Venison beef ribs shoulder bacon striptenderloin 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 stripVenison 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
  44. 44. 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.comMove over greeking, now there’s something meatier
  45. 45. Takeaway no. 5 You do not have complete control over how your typography is displayed
  46. 46. Review your browser analytics
  47. 47. http://www.fontspring.com/fontface http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntaxUse bulletproof @font-face syntax
  48. 48. Em = M Typically*, 1Em = 16 pixels *Also typical is that your user has changed their settings.Deploy relative type size controls
  49. 49. { font: Exactly what I want, A solid substitute,A reasonable stand-in, Works in a pinch, I guessthis is okay, C’mon asshole buy a new computer; } Continue to build regressive type stacks
  50. 50. http://www.fontcomparer.com/Test to see how your substitution choices will perform
  51. 51. Takeaway no. 7 There are many good freefonts available, but you’ll need to buy (or steal) the best fonts
  52. 52. *Only if you have lots of time and patience to weed through a ton of garbageBest* free sites for fonts
  53. 53. Best pay sites for fonts
  54. 54. Final Takeaway Creative Developers are the superstars of the not-too-distant future
  55. 55. Thank you! Any questions?Feel free to connect with me on Twitter: @mickwinters #remixsouthfonts

×