A quick overview of how to consider choosing the right typefaces when you're building a presentation or other visual communications product.

1. CHOOSING
THE RIGHT
TYPEFACES
September Design-Storm
Tahmid Chowhury | John Snow, Inc.
Aa

2. Definitions

3. Typeface: a set of
typographical symbols
and characters.
It’s the letters,
numbers, and other
characters that let us
put words on paper (or
screen).Font vs.
Typeface

4. Font: a complete
character set within a
typeface, often of a
particular size and style.
They are also specific
computer files that
contain all characters
and glyphs within a
typeface.
Font vs.
Typeface

5. In other words, a
typeface is a family of
fonts (e.g., Helvetica
Regular, Helvetica
Italic, Helvetica Black,
etc.) but a font is one
weight or style within
a typeface family (such
as Helvetica Regular).Font vs.
Typeface

6. Today, typeface and
font as basically used
interchangeably.
Font vs.
Typeface

7. Anatomyof
a Typeface
http://www.designersinsights.com/designer-resources/anatomy-of-typography

8. Serif vs.
Sans Serif

9. The Psychology
of Typefaces

10. Traditional
Serif
TIMES NEW ROMAN
Reliable
BASKERVILLE
Comfortable
GEORGIA ITALIC

11. Stable
Sans Serif
HELVETICA BOLD
ObjectiveFRANKLIN GOTHIC
Clean
CALIBRI

12. Chic
Modern
CENTURY GOTHIC
STRONGFUTURA
Stylish
DIDOT ITALIC

13. Friendly
Display
COOPER BLACK
Unique
FRANKLIN GOTHIC
ExpressiveVALENCIA

14. Pairing Typefaces

15. Typefaces have
personalities, and like
with people, typeface
personalities can
clash.
Typefaces
Personalities

16. Consider the nature of
the layout you're
dealing with (headings;
sub-headings; body
text).
Make sure roles are
clearly established and
be consistent.Layout and
Roles

17. Concord: presence of
the same trait in both
typefaces helps them
to work together.
Pairing:
Concord

18. Concord
http://webdesign.tutsplus.com/articles/a-beginners-guide-to-pairing-fonts--webdesign-5706
Droid typeface
family for Google
Android devices

19. Concord
http://webdesign.tutsplus.com/articles/a-beginners-guide-to-pairing-fonts--webdesign-5706
Cowboyslang and
Supria Sans
Condensed

20. Concord
http://webdesign.tutsplus.com/articles/a-beginners-guide-to-pairing-fonts--webdesign-5706
Anodyne and
Poulaire

21. Concord
http://webdesign.tutsplus.com/articles/a-beginners-guide-to-pairing-fonts--webdesign-5706
Bevan and
Arapey Italic

22. Concord
http://www.peatah.org/combinations2.html

23. Contrast: choosing
typefaces with
differences in style,
size, weight, form, or
color can create
visually appealing
pairings.
Pairing:
Contrast

24. Contrast
http://webdesign.tutsplus.com/articles/a-beginners-guide-to-pairing-fonts--webdesign-5706
Georgia and Arial

25. Contrast
http://webdesign.tutsplus.com/articles/a-beginners-guide-to-pairing-fonts--webdesign-5706
Lora Bold and
Istok Web

26. Contrast
http://webdesign.tutsplus.com/articles/a-beginners-guide-to-pairing-fonts--webdesign-5706
Bebas Neue and
Alex Brush

27. Contrast
http://webdesign.tutsplus.com/articles/a-beginners-guide-to-pairing-fonts--webdesign-5706
Buttermilk
and Georgia

28. Contrast
http://webdesign.tutsplus.com/articles/a-beginners-guide-to-pairing-fonts--webdesign-5706
Buttermilk
and Aller

29. Contrast
http://webdesign.tutsplus.com/articles/a-beginners-guide-to-pairing-fonts--webdesign-5706
Buttermilk
and Eccentric

30. Conflict: is to be
avoided!
Some typefaces look
awkward together,
often due to some
subtle differences.
Pairing:
Conflict

31. Conflict
http://webdesign.tutsplus.com/articles/a-beginners-guide-to-pairing-fonts--webdesign-5706
Almendra
and Stoke

32. Conflict
http://webdesign.tutsplus.com/articles/a-beginners-guide-to-pairing-fonts--webdesign-5706
Almendra
and Stoke

33. Conflict
http://webdesign.tutsplus.com/articles/a-beginners-guide-to-pairing-fonts--webdesign-5706
Almendra
and Stoke

34. Conflict
http://webdesign.tutsplus.com/articles/a-beginners-guide-to-pairing-fonts--webdesign-5706
Almendra
and Stoke

35. Conflict
http://webdesign.tutsplus.com/articles/a-beginners-guide-to-pairing-fonts--webdesign-5706
Almendra
and Stoke

36. Resources

37. dafont.com
fontsquirrel.com
1001freefonts.com
typetester.org
typebrewer.org
Typeface
Websites

38. U.S. Department of HHS
recommended fonts for
Section 508 compliance:
Section 508
Compliance
http://www.hhs.gov/web/section-508/making-files-accessible/checklist/pdf/index.html
• Times New Roman
• Verdana
• Arial
• Tahoma
• Helvetica
• Calibri

39. http://julianhansen.com/files/infographiclarge_v2.png

40. Go with your gut.
Sage Advice

41. FormoreinformationaboutJSI’s
research,monitoring,evaluation&
healthinformationwork,contact
chime@jsi.com
Follow
@jsihealth
Thank you!