- Choosing a Text Typeface for the Web 7:53
- Choosing a Text Typeface for the Web: Review 6 questions
- Choosing a Display Typeface for the Web 5:25
- Choosing a Display Typeface for the Web: Review 5 questions
- Self-hosted Webfonts 7:36
- Self-hosted Webfonts: Review 5 questions
- Webfont Hosting Services 6:52
- Webfont Hosting Services: Review 5 questions
Preview
Video Player
00:00
00:00
Choosing a Text Typeface for the Web
7:53Good 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.
[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