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