[MUSIC]

Good typography starts with choosing a good typeface.

No matter how nice graphical elements look on a page,

a choice of a bad typeface can quickly ruin it.

When entering into the process of choosing a typeface, first ask yourself,

where will it appear.

Well on the web duh, but where on the web?

What's the context?

Will it be in a navigation or in paragraphs or

in headings or in all of these?

Answers to these questions will be determined if you're looking for

a text typeface which is engineered for small sizes to a variety of settings, or

display typeface which tends to be more flashy and works well at large sizes.

These two descriptors deal with the size and function for

which a typeface is intended.

In this video we'll look at how to choose a text typeface for the web.

And in the next, we'll look at how to choose a display face.

It's often smart to choose a text typeface before a 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 this 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 chosing 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 good x-height?

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

tell apart at smaller 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-75% of the cap height.

Then you've got yourself a good candidate for a tech space.

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

tight, then at smaller sizes the letters can get muddled together which

can hurt legibility.

Looser letter spacing allow the letter forms to still breath at smaller sizes.

We do have some control over letter spacing in CSS,

but in a later video, we'll talk about why it's not always a great idea to

manually letter space text copy.

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

Next, you'll want to make sure the typeface has overall even color, as it

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

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

characters which can break your reading flow.

A trick you can employ is to blur your eyes as you look at the typeface.

We'll manually mimic that here.

Do you see any dark splotches or uneven patches of color showing up?

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

Avenir Next looks nice and even now.

Other areas that deal with white space are Counters.

Counter is the fully or

partially closed white space inside letter forms like O, B, or E.

Large or 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 whitespace.

This family comes with a text and 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 encounters more room to breath.

Although the display face wouldn't work well at small sizes, its lower XI and

tighter letter spacing helps greater amounts of text fit into tighter spaces.

A trait that's beneficial for headlines.

At the time of this recording, House is currently working on translating this

family into web fonts for public release.

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

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

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

Is it serious?

Is it lighthearted, witty, pointed, classy, no nonsensical, the list goes on.

As you peruse type phases, have these words in the back of your mind and

see if a type phase speaks in that certain mood.

Consider who your audience is and

what kind of style of type phases they might be accustomed to.

Are they doctors, lawyers or kids?

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

You might not want to choose something that's been over used, but

you can still plan these norms and create familiarity, or

earn trust in choosing a proper type phase 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 mean 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'll 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 type face better.

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

You would hate to get half way through building a site and

realize the web fonts don't contain a certain character or symbol that's needed.

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

Does the typeface have italic styles?

Will we need different widths for versatility?

Are small caps necessary?

What accented characters are included for

language support, and what kind 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 setting with upper case only.

Lastly, cost can also be a big factor when choosing a typeface for the web.

Sometimes you'll have a larger budget for

webfonts, which provides you with more flexibility and options to choose from.

Other times, there might not be room in the budget for

webfont licensing, or even subscription models.

If that's the case, try to help the client understand the benefits of

good typography, and why there's a cost associated to webfonts.

For example, I might tell a client free typefaces are fine to use and

I will happily go down that route if needed.

But be aware that currently there's only a small number of

really good versatile free web fonts.

This drastically limits our options.

Because of that, the good ones are often used on many sites which won't do

us any favors in distinguishing your site, to set your site and

brand apart, I would recommend going with the subscription web font model which can

run between 25 to $100 a year.

Although there's some cost, I think your brand and users will be

much more mileage out of paid web fonts than if we went with free fonts.

After that, sometimes a client makes room in the budget, and sometimes they don't.

In the latter case, we want to have all these principles we discussed in

the back of our mind, as we browse free web font sites like Google Fonts and

Font Squirrel to find good ones.

That concludes how to choose a text typeface.

Sometimes designers utilize a versatile text family for

small and large sizes on a site.

But other times weird intricacies with the letter forms can show up

because the fonts are engineered for smaller not larger sizes.

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

So, in the next video, we'll get how to choose a display typeface.

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

resources in the teacher's note section that influence what we discussed here.

And I highly recommend checking those out if you have time.