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

Sign up for Treehouse

How to Choose a Text Typeface for the Web

6:51 with Hope Armstrong

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

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