Choosing fonts for body copy
D E S I G N F U N D A M E N TA L S
This is Major Tom
to Ground Control
I'm stepping through the door, and I'm floating in
a most peculiar way. And the stars look very
different today.
This is Major Tom
to Ground Control
I'm stepping through the door, and I'm floating
in a most peculiar way. And the stars look very
different today.
This is Major Tom to
Ground Control
I'm stepping through the door, and I'm floating
in a most peculiar way. And the stars look very
different today.
This is Major Tom to
Ground Control
I'm stepping through the door, and I'm floating
in a most peculiar way. And the stars look very
different today.
This is Major Tom to
Ground Control
I'm stepping through the door, and I'm floating
in a most peculiar way. And the stars look very
different today.
This is Major Tom to
Ground Control
I'm stepping through the door, and I'm floating
in a most peculiar way. And the stars look very
different today.
Choosing a typeface
for body copy
W H Y C H O O S E T WO T Y P E FAC E S ?
Choosing one typeface that is interesting
enough for headings and readable enough for
long stretches of text is hard
Improved quality Consistently better quality fonts
Free Flexible typefaces
Incomplete fonts No more FOUT (flash of unstyled text)
Quality can still be hit or miss Costs $50/year
Typefaces for body
copy should have:
Typefaces for body
copy should have:
1. High x-height
Typefaces for body
copy should have:
1. High x-height
2. Medium contrast
Typefaces for body
copy should have:
1. High x-height
2. Medium contrast
3. At least 4 styles
x
Maven Pro, 16px
x
Fairplex Narrow, 16px
x
Baskerville, 16px
x
Maven Pro, 16px
x
Fairplex Narrow, 16px
x
Baskerville, 16px
For long chunks of text, taller is better
abc abc abc
Didot: High contrast Proxima Nova: Medium contrast Courier New: Low contrast
abc abc abc
Didot: High contrast Proxima Nova: Medium contrast Courier New: Low contrast
abc abc abc
Didot: High contrast Proxima Nova: Medium contrast Courier New: Low contrast
High contrast typefaces are really
hard to read at small size and in
long chunks of text. You’ll want to
save these typefaces for headings
or any kind of display text.
abc abc abc
Didot: High contrast Proxima Nova: Medium contrast Courier New: Low contrast
Low contrast typefaces
are really hard to read
at small size and in long
chunks of text. You’ll
want to save these
typefaces for things like
code snippets or
decorative text.
abc abc abc
Didot: High contrast Proxima Nova: Medium contrast Courier New: Low contrast
Medium contrast typefaces are the
easiest to read in long chunks
because there’s just enough
differentiation but not so much that
it starts to jumble together
x
Maven Pro, 16px
x
Fairplex Narrow, 16px
x
Baskerville, 16px
Regular
Look for typefaces Regular Italic
that have at least
four styles: Bold
Bold Italic
Use real italics as much as you can
(But if you can’t, it’s not the end of the world. Shh, don’t tell!)
Should you use a
serif
or a
With the flicks
sans-serif
Without the flicks
for your body copy?
Typefaces for body
copy should have:
1. High x-height
2. Medium contrast
3. At least 4 styles
EXERCISE
Choose at least three body copy
typefaces. Test them and put the winner
into your project
