It's often smart to choose a text typeface before display.

Because much of the copy on a site will be set in this choice.

In his pocket guide on combining typefaces,

Tim Brown calls on your anchor typeface because it acts as a reference point for

every element in your composition.

He encourages you to make your body text the anchor, if possible.

So when choosing a text typeface on the web, your first priority is legibility.

If a site's body copy is hard to read, then visitors won't stick around for long.

Let's look at a few things to consider in determining if a typeface has good

legibility and readability.

First, does the typeface have a good x-height?

An x-height that's too low will make the lowercase letters hard to read and

tell apart at small sizes.

An x-height can also be too high if it's nearing the cap height,

making it hard to discern what's uppercase and what's lowercase.

A general measurement to go by is if the x-height is around 60 to 75% of the cap

height, then you've got yourself a good candidate for a text face.

Next, let's consider the white space around the letter forms and

its impact on legibility.

If the space between letters, also known as letter-spacing,

is too narrow or too tight, then at smaller sizes,

the letters can get muddled together, which hurts legibility.

Looser letter-spacing also allows the letter forms to still breathe at small

sizes.

While we do have some control over letter spacing with code,

it's not advisable to manually letter space body text.

Find a typeface that already has proper looser letter spacing for text.

Next, you will want to make sure the typeface as overall even color, as it

balances the positive space of characters and the negative space of white space.

You wouldn't want your text to feel too dense in certain areas or

characters, which can break the reading flow.

A trick you can employ is to blur your eyes as you're looking at the typeface.

We'll manually mimic that here.

Do any dark splotches or uneven places of color show up?

If so, you probably want to mark that one off the list.

Avenir Next looks quite even though.

Other areas that deal with white space are counters.

A counter is the fully or partially closed white space inside letterforms like o,

b or e.

Larger open counters can also aid legibility

because they are less prone to close up at smaller sizes.

Let's look at Neutraface 2 by House Industries as an example on x-height and

white space.

This family comes with a text and a display version.

Both of them here are set at the same point size, but

we can immediately notice some differences.

Though the cap heights are similar, the text version has a higher x-height,

which helps retain legibility at smaller sizes.

The letter spacing is looser in the text version than in the display version,

giving the characters and counters more room to breath.

Although the display face wouldn't work well at small sizes, its lower x-height

and tighter letter spacing helps greater amount of text fit into tighter spaces.

A trait that's beneficial for headlines.

Next, you wanna think about the mood of the typeface matching the content at hand.

Familiarize yourself with the content by taking the time to read it thoroughly.

Then write down some ways to describe it in your own words.

Is it serious, lighthearted, witty, pointed, classy?

As you peruse typefaces, have these words in a back of your mind and

see if a typeface speaks in that certain mood.

Consider who your audience is and

what kinds of styles of typefaces they might be accustomed to.

Are they doctors, lawyers, kids?

Are there certain genres that a target industry is known for?

You might not want to choose something that's been overused.

But you can still play into these norms and create familiarity or

interest by choosing a proper typeface that speaks in the right mood.

With text faces, it should be noted that mood can be

conveyed with the slightest subtleties in the letterforms.

A simple change in the way a serif is handled can

be in the world of a difference in text because there's a lot of it on the page.

Don't go for something that's overly ornate or

has a lot of character, as it will have too much going on for body copy.

In any case, the mood of the typeface should fit the content at hand, but don't

sacrifice legibility just because you like the mood of another typeface better.

Don't forget to make sure the typeface has everything you need.

You would hate to get halfway through designing a layout and

realize the font doesn't contain a certain character or symbol that's needed.

Things to consider are, does the typeface have a range of weights?

Does the typeface have metallic styles?

Will we need different widths for versatility?

Are small caps necessary?

What accented characters are included for language support?

And what kinds of numerical figures are needed?

To clarify that last note, there are a few different styles of numerical figures.

We'll look at old style and lining figures.

Old style figures vary in height and descend below the baseline at times.

These are nice for text and body copy,

as they flow well with the rhythm set by the text.

And they're necessary when using small caps.

Lining figures all have the same height and baseline and are generally good for

display, headlines or a setting with uppercase only.

That concludes how to choose a text typeface.

Sometimes designers utilize a versatile text family that works for

both small and large text sizes.

Other times, a single typeface won't work for all text sizes because weird

intricacies can appear in the letter forms at different sizes.

Also, you might just want to have some variety with your type.

So in the next video, we will look at how to choose a display typeface.

For further study on choosing a typeface, there's some great articles and

resources in the teachers notes that influenced what we discussed here.

And I highly recommend taking some time to read them.