Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Web Typography

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Choosing a Text Typeface for the Web

7:53 with Mattox Shuler

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.

[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 up