An introduction to using typography as artwork in your layout designs. Presented by Mary Diaz (University of Miami) for the Association of Creative Technologies in Academic Libraries (ACTAL).

1. The Art of Typography
October 20, 2021 at 3 p.m.

2. Hello!
I’m Mary Diaz
● Multimedia Specialist, Creative Studio at University
of Miami - Richter Library
● BA in Journalism from Temple University
○ Background in print journalism & publication design
2

3. Today’s agenda
▣ What is typography?
▣ Choosing the right fonts
▣ Placing type on the page
▣ Considering the impact of type
▣ Things to avoid
3

4. But first, let’s chat...
On a scale of 0-5:
▣ How often do you notice font choice?
▣ What is your level of experience working with
fonts?
4

5. 1.
What is
typography?
5
Photo Credit

6. ‘’
Typography is a process,
a refined craft that
makes language visible.
6
-Kristin Cullen, Design Elements, Typography Fundamentals

7. Functions of Type
▣ It literally conveys a written message
▣ Sets tone, adds personality to a page
▣ Enhances meaning
▣ Visual interest
7

8. Does it really make a difference?
8
Photo Credit

9. A quick vocab lesson
Typeface (or Type
family)
Set of letters,
numbers, and
punctuation marks
that share the same
visual properties.
Font
Variation of a given
typeface (e.g. bold,
italics)
Point size
Size of letterforms
Times New Roman - 12pt
Times New Roman Italic
Times New Roman Bold
Times New Roman Bold Italic
9
Times New Roman
(12 pt)
Times New Roman Italic
Times New Roman Bold
Times New Roman Bold
Italic

10. 2.
Choosing the
right fonts
10

11. Serif vs Sans Serif fonts
11
Times New Roman,
Minion, Playfair Display
Helvetica, Arial, Roboto
Photo Credit

12. Other Categories of Type
12
Oldstyle
Modern
Slab Serif
Script
Decorative

13. When pairing typefaces...
▣ Pay attention to type relationships:
□ Concordant
□ Contrasting
□ Conflicting (avoid me!)
13

14. Concordant relationship
14
Photo Credit

15. Contrasting relationship
15
Photo Credit

16. Conflicting relationship
16
Photo Credit

17. Legibility is #1
Have fun experimenting with fonts,
but make sure you get your message across.
17

18. 3.
Placing type on
the page
18
Photo Credit

19. C.R.A.P. Principles
▣ They sound bad, but they’re actually good
▣ Basic design guidelines to follow
▣ We’ll go through each one...
19

20. The “C”
▣ Stands for Contrast (like this)
□ Play around with color,
size, structure, form,
weight, direction
20
Photo Credit

21. The “R”
▣ Stands for Repetition
□ Be consistent - reuse
design elements for
continuity
21
Photo Credit

22. The “A”
▣ Stands for Alignment
□ Elements should be
aligned with at least
one other thing on the
page
22
Photo Credit

23. The “P”
▣ Stands for Proximity
□ Group related items
closer together
□ Keep in mind how
information will be
digested by viewer
23
Photo Credit

24. White space is your friend
▣ The negative, or empty space between
elements in a layout.
24
Photo Credit

25. But wait...there’s more!
▣ Other important design principles:
□ Hierarchy
□ Balance
□ Scale
25

26. 4.
Considering the
impact of type
26
Photo Credit

27. Type is impactful when...
▣ It is visually appealing
▣ It draws the reader in
▣ It communicates on multiple levels
27

28. 28
Photo Credit

29. What Netflix’s Top 50 Shows Can Teach Us About Font Psychology,
Sara McGuire
29
Photo Credit Photo Credit Photo Credit

30. 5.
Things to avoid
30
Photo Credit

31. 31
Some typography fails
Photo Credits
Photo Credit Photo Credit

32. Overuse of script or decorative fonts
32
This would hurt your eyes
and it’s hurting me just typing
this. It is likely readers will
just skip over your text to get
to the end. If you want to get
your message across this
isn’t the way to go about it.
Or this. This is
just as bad if
not worse. It
could look cool
as a title but
not all over
your page.
Photo Credit

33. Speaking of script fonts...
33

34. Too many fonts
34
Instead, stick to 2-3 typefaces and use
other strategies to add contrast.
Photo Credit

35. Yelling at your readers
▣ Do not use all caps in
body copy
35
Photo Credit

36. Widows and orphans
36
Photo Credit

37. Bad color choice
37
Spot color should be used to
make text stand out, not
make it harder to read.
Photo Credit

38. Skyscrapers of justified text
38
This can also lead to
“rivers”, or random
gaps in text.
Photo Credit

39. Helpful Tools
▣ Canva & Adobe Spark
▣ Adobe fonts
▣ DaFont & Font Squirrel
▣ Tiff
▣ Find more typography tools here!
39

40. Thanks!
Any questions?
Email: marydiazdlp@miami.edu
40
GIF Credit

41. Sources
Cullen, Kristin. Design Elements, Typography Fundamentals.
Ellison, Kaitlyn. “3 Principles You Need to Pair Typefaces Perfectly.”
Golombisky, Kim, and Rebecca Hagen. White Space is Not Your Enemy.
Williams, Robin. The Non-Designer’s Design Book, 2nd Edition.
Presentation template by SlidesCarnival.
41