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.
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
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Good typography starts with choosing a
good typeface.
0:04
No matter how nice graphical elements look
on a page,
0:07
a choice of a bad typeface can quickly
ruin it.
0:10
When entering into the process of choosing
a typeface, first ask yourself,
0:13
where will it appear.
0:17
Well on the web duh, but where on the web?
0:19
What's the context?
0:21
Will it be in a navigation or in
paragraphs or
0:23
in headings or in all of these?
0:25
Answers to these questions will be
determined if you're looking for
0:28
a text typeface which is engineered for
small sizes to a variety of settings, or
0:31
display typeface which tends to be more
flashy and works well at large sizes.
0:36
These two descriptors deal with the size
and function for
0:41
which a typeface is intended.
0:44
In this video we'll look at how to choose
a text typeface for the web.
0:46
And in the next, we'll look at how to
choose a display face.
0:50
It's often smart to choose a text typeface
before a display,
0:53
because much of the copy on a site will be
set in this choice.
0:57
In his pocket guide on combining
typefaces,
1:00
Tim Brown calls this your Anchor Typeface,
because it acts as a reference point for
1:03
every element in your composition.
1:07
He encourages you to make your body text
the anchor if possible.
1:08
So when chosing a text typeface on the
web, your first priority is legibility.
1:13
If a site's body copy is hard to read,
then visitors won't stick around for long.
1:17
Let's look at a few things to consider in
determining if a typeface has
1:22
good legibility and readability.
1:25
First, does the typeface have good
x-height?
1:28
An x-height that's too low will make the
lower case letters hard to read and
1:31
tell apart at smaller sizes.
1:35
An x height can also be too high if it's
nearing the cap height,
1:37
making it hard to discern what's uppercase
and what's lowercase.
1:41
A general measurement to go by is if the x
height is around 60-75% of the cap height.
1:44
Then you've got yourself a good candidate
for a tech space.
1:50
Next, let's consider the white space
around the letter forms and
1:53
its impact on legibility.
1:57
If the space between letters, also known
as letter spacing, is too narrow or
1:59
tight, then at smaller sizes the letters
can get muddled together which
2:03
can hurt legibility.
2:06
Looser letter spacing allow the letter
forms to still breath at smaller sizes.
2:08
We do have some control over letter
spacing in CSS,
2:12
but in a later video, we'll talk about why
it's not always a great idea to
2:15
manually letter space text copy.
2:19
Find a typeface that already has proper,
looser letter spacing for text.
2:21
Next, you'll want to make sure the
typeface has overall even color, as it
2:26
balances the positive space of characters
and the negative space of white space.
2:30
You wouldn't want for the text to feel too
dense in certain areas or
2:35
characters which can break your reading
flow.
2:38
A trick you can employ is to blur your
eyes as you look at the typeface.
2:41
We'll manually mimic that here.
2:45
Do you see any dark splotches or uneven
patches of color showing up?
2:47
If so, then you probably want to mark that
one off the list.
2:52
Avenir Next looks nice and even now.
2:55
Other areas that deal with white space are
Counters.
2:58
Counter is the fully or
3:01
partially closed white space inside letter
forms like O, B, or E.
3:03
Large or open counters can also aid
legibility because they are less prone to
3:08
close up at smaller sizes.
3:12
Let's look at Neutraface 2 by House
Industries as an example on
3:14
x height and whitespace.
3:18
This family comes with a text and display
version.
3:19
Both of them here are set at the same
point size, but
3:22
we can immediately notice some
differences.
3:25
Though the cap heights are similar, the
text version has a higher x height,
3:28
which helps retain legibility at smaller
sizes.
3:32
The letter spacing is looser in the text
version than in the display version,
3:35
giving the characters encounters more room
to breath.
3:38
Although the display face wouldn't work
well at small sizes, its lower XI and
3:42
tighter letter spacing helps greater
amounts of text fit into tighter spaces.
3:46
A trait that's beneficial for headlines.
3:51
At the time of this recording, House is
currently working on translating this
3:54
family into web fonts for public release.
3:57
Next, you want to think about the mood of
the typeface matching the content at hand.
4:00
Familiarize yourself with the content by
taking time to read it thoroughly, and
4:05
write down some ways to describe it in
your own words.
4:09
Is it serious?
4:12
Is it lighthearted, witty, pointed,
classy, no nonsensical, the list goes on.
4:13
As you peruse type phases, have these
words in the back of your mind and
4:19
see if a type phase speaks in that certain
mood.
4:22
Consider who your audience is and
4:26
what kind of style of type phases they
might be accustomed to.
4:27
Are they doctors, lawyers or kids?
4:30
Are there certain genres that the target
industry is known for?
4:32
You might not want to choose something
that's been over used, but
4:36
you can still plan these norms and create
familiarity, or
4:39
earn trust in choosing a proper type phase
that speaks in the right mood.
4:41
With text faces, it should be noted that
mood can be conveyed with
4:46
the slightest subtleties in the
letterforms.
4:49
A simple change in the way a serif is
handled can mean the world of
4:51
a difference in text.
4:55
Because there's a lot of it on the page.
4:56
Don't go for something that's overly
ornate or has a lot of character.
4:58
As it'll have too much going on for body
copy.
5:02
In any case the mood of the typeface
should fit the content at hand.
5:04
But don't sacrifice legibility just
because you
5:08
like the mood of another type face better.
5:10
Don't forget to make sure the type face
has everything you need.
5:14
You would hate to get half way through
building a site and
5:16
realize the web fonts don't contain a
certain character or symbol that's needed.
5:19
Things to consider are, does the web font
have a range of weights?
5:23
Does the typeface have italic styles?
5:27
Will we need different widths for
versatility?
5:29
Are small caps necessary?
5:32
What accented characters are included for
5:34
language support, and what kind of
numerical figures are needed?
5:36
To clarify that last note, there are a few
different styles of numerical figures.
5:40
We'll look at old style and lining
figures.
5:43
Old style figures vary in height and
descend below the baseline at times.
5:46
These are nice for text and
5:50
body copy, as they flow well with the
rhythm set by the text.
5:51
And they're necessary when using small
caps.
5:55
Lining figures all have the same height
and baseline, and
5:57
are generally good for display, headlines,
or setting with upper case only.
6:00
Lastly, cost can also be a big factor when
choosing a typeface for the web.
6:05
Sometimes you'll have a larger budget for
6:10
webfonts, which provides you with more
flexibility and options to choose from.
6:12
Other times, there might not be room in
the budget for
6:16
webfont licensing, or even subscription
models.
6:19
If that's the case, try to help the client
understand the benefits of
6:22
good typography, and why there's a cost
associated to webfonts.
6:26
For example, I might tell a client free
typefaces are fine to use and
6:30
I will happily go down that route if
needed.
6:34
But be aware that currently there's only a
small number of
6:37
really good versatile free web fonts.
6:39
This drastically limits our options.
6:43
Because of that, the good ones are often
used on many sites which won't do
6:45
us any favors in distinguishing your site,
to set your site and
6:49
brand apart, I would recommend going with
the subscription web font model which can
6:52
run between 25 to $100 a year.
6:56
Although there's some cost, I think your
brand and users will be
6:58
much more mileage out of paid web fonts
than if we went with free fonts.
7:02
After that, sometimes a client makes room
in the budget, and sometimes they don't.
7:08
In the latter case, we want to have all
these principles we discussed in
7:11
the back of our mind, as we browse free
web font sites like Google Fonts and
7:15
Font Squirrel to find good ones.
7:19
That concludes how to choose a text
typeface.
7:21
Sometimes designers utilize a versatile
text family for
7:23
small and large sizes on a site.
7:26
But other times weird intricacies with the
letter forms can show up
7:29
because the fonts are engineered for
smaller not larger sizes.
7:32
Also, you might just wanna have some
variety with your type.
7:36
So, in the next video, we'll get how to
choose a display typeface.
7:39
For further study on choosing a typeface,
there's some great articles and
7:43
resources in the teacher's note section
that influence what we discussed here.
7:46
And I highly recommend checking those out
if you have time.
7:50
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up