Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Good typography starts with a choosing of a good typeface. We’ll start by looking at how to choose a text typeface for the web because the majority of—if not all—copy on a site will be set in this typeface.
Further Reading
- Combining Typefaces, Tim Brown
- Upping Your Type Game, Jessica Hische
- How to Choose the Right Face for a Beautiful Body, Dan Reynolds
-
How to Choose the Right Fonts for Your Website, Veronika Burian and José Scaglione
- Choosing Text Faces for the Web, Ilene Strizver
Font websites
- Google Fonts - large directory of free fonts, all available as web fonts
- Adobe Fonts - unlimited for those with a Creative Cloud subscription
- Font Squirrel - free, even for commercial use. mixed quality.
- MyFonts Top Web Fonts - large directory of fonts
- Lost Type - high-quality fonts, some available pay-as-you-want for personal use
It's often smart to choose
a text typeface before display.
0:01
Because much of the copy on a site
will be set in this choice.
0:05
In his pocket guide on
combining typefaces,
0:09
Tim Brown calls on your anchor typeface
because it acts as a reference point for
0:11
every element in your composition.
0:16
He encourages you to make your
body text the anchor, if possible.
0:18
So when choosing a text typeface on the
web, your first priority is legibility.
0:23
If a site's body copy is hard to read,
then visitors won't stick around for long.
0:29
Let's look at a few things to consider
in determining if a typeface has good
0:35
legibility and readability.
0:39
First, does the typeface
have a good x-height?
0:42
An x-height that's too low will make
the lowercase letters hard to read and
0:45
tell apart at small sizes.
0:49
An x-height can also be too high
if it's nearing the cap height,
0:51
making it hard to discern what's
uppercase and what's lowercase.
0:55
A general measurement to go by is if the
x-height is around 60 to 75% of the cap
1:00
height, then you've got yourself
a good candidate for a text face.
1:04
Next, let's consider the white
space around the letter forms and
1:11
its impact on legibility.
1:15
If the space between letters,
also known as letter-spacing,
1:17
is too narrow or too tight,
then at smaller sizes,
1:21
the letters can get muddled together,
which hurts legibility.
1:25
Looser letter-spacing also allows
the letter forms to still breathe at small
1:30
sizes.
1:35
While we do have some control
over letter spacing with code,
1:36
it's not advisable to manually
letter space body text.
1:40
Find a typeface that already has
proper looser letter spacing for text.
1:44
Next, you will want to make sure
the typeface as overall even color, as it
1:50
balances the positive space of characters
and the negative space of white space.
1:55
You wouldn't want your text to
feel too dense in certain areas or
2:00
characters, which can
break the reading flow.
2:04
A trick you can employ is to blur your
eyes as you're looking at the typeface.
2:07
We'll manually mimic that here.
2:12
Do any dark splotches or
uneven places of color show up?
2:14
If so, you probably want to
mark that one off the list.
2:19
Avenir Next looks quite even though.
2:22
Other areas that deal with
white space are counters.
2:26
A counter is the fully or partially closed
white space inside letterforms like o,
2:29
b or e.
2:34
Larger open counters
can also aid legibility
2:36
because they are less prone
to close up at smaller sizes.
2:40
Let's look at Neutraface 2 by House
Industries as an example on x-height and
2:44
white space.
2:49
This family comes with a text and
a display version.
2:51
Both of them here are set
at the same point size, but
2:56
we can immediately
notice some differences.
2:59
Though the cap heights are similar,
the text version has a higher x-height,
3:03
which helps retain
legibility at smaller sizes.
3:08
The letter spacing is looser in the text
version than in the display version,
3:11
giving the characters and
counters more room to breath.
3:16
Although the display face wouldn't work
well at small sizes, its lower x-height
3:20
and tighter letter spacing helps greater
amount of text fit into tighter spaces.
3:25
A trait that's beneficial for headlines.
3:31
Next, you wanna think about the mood of
the typeface matching the content at hand.
3:35
Familiarize yourself with the content by
taking the time to read it thoroughly.
3:40
Then write down some ways to
describe it in your own words.
3:45
Is it serious, lighthearted,
witty, pointed, classy?
3:49
As you peruse typefaces, have these
words in a back of your mind and
3:55
see if a typeface speaks
in that certain mood.
3:59
Consider who your audience is and
4:03
what kinds of styles of typefaces
they might be accustomed to.
4:05
Are they doctors, lawyers, kids?
4:09
Are there certain genres that
a target industry is known for?
4:12
You might not want to choose
something that's been overused.
4:16
But you can still play into these
norms and create familiarity or
4:19
interest by choosing a proper typeface
that speaks in the right mood.
4:23
With text faces,
it should be noted that mood can be
4:28
conveyed with the slightest
subtleties in the letterforms.
4:31
A simple change in the way
a serif is handled can
4:35
be in the world of a difference in text
because there's a lot of it on the page.
4:38
Don't go for
something that's overly ornate or
4:43
has a lot of character, as it will
have too much going on for body copy.
4:46
In any case, the mood of the typeface
should fit the content at hand, but don't
4:52
sacrifice legibility just because you
like the mood of another typeface better.
4:56
Don't forget to make sure
the typeface has everything you need.
5:02
You would hate to get halfway
through designing a layout and
5:06
realize the font doesn't contain a certain
character or symbol that's needed.
5:09
Things to consider are,
does the typeface have a range of weights?
5:15
Does the typeface have italic styles?
5:20
Will we need different widths for
versatility?
5:23
Are small caps necessary?
5:26
What accented characters are included for
language support?
5:29
And what kinds of numerical
figures are needed?
5:33
To clarify that last note, there are a few
different styles of numerical figures.
5:37
We'll look at old style and
lining figures.
5:41
Old style figures vary in height and
descend below the baseline at times.
5:46
These are nice for text and body copy,
5:51
as they flow well with
the rhythm set by the text.
5:53
And they're necessary
when using small caps.
5:57
Lining figures all have the same height
and baseline and are generally good for
6:00
display, headlines or
a setting with uppercase only.
6:06
That concludes how to
choose a text typeface.
6:11
Sometimes designers utilize
a versatile text family that works for
6:14
both small and large text sizes.
6:18
Other times, a single typeface won't
work for all text sizes because weird
6:21
intricacies can appear in the letter
forms at different sizes.
6:26
Also, you might just want to have
some variety with your type.
6:30
So in the next video, we will look
at how to choose a display typeface.
6:34
For further study on choosing a typeface,
there's some great articles and
6:39
resources in the teachers notes that
influenced what we discussed here.
6:44
And I highly recommend taking
some time to read them.
6:48
You need to sign up for Treehouse in order to download course files.
Sign up