Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Typography for Designers!
You have completed Typography for Designers!
Preview
Display typefaces are meant for larger sizes which can allow for more expression in their style and letterforms. We’ll look at how to choose one that not only fits the right vibe but gets the job done well.
Further Reading
- Upping Your Type Game, Jessica Hische
- Historically Accurate Example, Jessica Hische
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Now that we understand how to anchor
our content with text typeface,
0:01
let's see how to go about choosing
a display face for the web.
0:05
As we saw earlier,
display typefaces are meant for
0:10
larger sizes like big headlines,
site titles, or pull quotes.
0:12
This allows for a bit more expressive and
creative opportunities with letter forms.
0:17
Nice intricacies like thin serapis
would be lost at small point sizes, but
0:23
here, they can shine.
0:28
Big, bold,
0:30
condensed text with narrow counters
would close up at body text sizes.
0:31
But here, you can soak them all in.
0:36
A nice casual sign painters script
would hardly be legible and paragraphs.
0:39
But here,
it can be flow beautifully as a heading.
0:45
So how should we go about choosing one?
0:49
First, make sure it's legible and
readable.
0:52
Just because the type is bigger,
0:56
doesn't mean that every character
of a typeface will be legible.
0:58
If a person can't read a headline or
1:02
a title, then the message hasn't
been enhanced by good typography.
1:05
It's been lost by bad typography.
1:09
Although there's much more room for
expression with display type,
1:12
make sure you're choosing a well
designed legible typeface.
1:16
Just because something looks
cool in a specimen image,
1:20
doesn't mean it'll be usable.
1:23
Make use of the tests we
talked about by blurring your
1:25
eyes to see if a typeface has an even
overall color and all of its characters.
1:28
Most fonts sites include a type
tester with their typefaces.
1:34
Write out example headlines to
make sure it's evenly spaced and
1:38
see what sizes it works best at.
1:42
Display types should have a bit
tighter spacing the text typefaces.
1:45
Other things that can help readability and
1:50
display faces are short ascenders and
descenders.
1:52
In the setting of headlines,
1:57
these features help reduce
choppiness in the text.
1:58
Again, one of the big questions
we'll want to ask is,
2:02
does the mood of the typeface
fit the content?
2:06
For text faces, we talked about channeling
the mood with subtle nuances in typefaces.
2:09
With display, we have a bit more room for
expressiveness in the mood.
2:14
We can use the words we came
up with throughout our content
2:19
exercise in the previous video and
apply them to our search for
2:22
a display face that fits the right mood.
2:26
If you're creating a site that
set around a certain time period,
2:29
look for
typefaces that are true to that period.
2:32
That will take some research but
instead of choosing the mood we think
2:36
the period should look like,
we'll be truly conveying what it was like.
2:41
Jessica Hitch has some
great thoughts on this,
2:46
which are linked to in
the teacher's notes.
2:48
Next, we'll again want to think
about who are readers or users.
2:51
If we're creating a site for
people in a specific industry,
2:56
let's say a web developer,
then that affects how we use a typeface.
3:00
Take for instance this example of how
to play into the typographic styles,
3:06
people in the web design
industry are accustomed to.
3:11
Let's say we want to display snippets
of example code in a blog post.
3:14
Coding programs like Adam or sublime text,
3:19
are used by web developers and
default to monospace typefaces.
3:22
These are fonts originally created for
3:27
typewriters, whose characters all occupy
the same amount of horizontal space.
3:29
They're great for code since it's
easier to distinguish symbols and
3:35
layout tabular data and plain text.
3:39
But they wouldn't be a great choice for
body text due to decrease legibility and
3:42
long paragraphs.
3:47
We can still play into that industry
norm with our code snippets though,
3:49
by utilizing a monospace font,
we can topographically make this
3:53
snippet appear as it would in
an actual code environment.
3:58
So take into account who your readers are,
and
4:03
what styles of typefaces might be
the right fit for their industry.
4:06
I won't fully go into
the other parties again,
4:11
as they were covered
in the previous video.
4:14
But similarly to text typefaces,
take into account the budget and make sure
4:17
a display face has everything you need in
regards to weight, styles, or accents.
4:22
Because display typefaces are used in
fewer contexts, there's a bit more
4:29
flexibility here that you'd never
want to set body text and all caps.
4:33
You can actually utilize
the display face to great effect
4:39
that only has uppercase characters.
4:43
Also it's possible to have good
typographic with a single weighted
4:46
font for your display face.
4:50
These situations might not be ideal,
but they can be worked through.
4:52
Lastly, there might be a scenario
where you land a client who
4:58
already has a typeface for their brands.
5:02
This process then is sometimes as simple
as finding the web font version of that
5:05
typeface.
5:09
But other times, there might not be web
font licenses available for it yet.
5:11
In that case, you want to find a typeface
that channels a similar mood and
5:16
style to the print version as you
translate their brand for the web.
5:21
You could Google alternative
to insert typeface here.
5:26
But what's the fun in that?
5:31
Utilize all the knowledge you've taken
here to make a well informed decision for
5:33
an alternative that best fits the client.
5:38
You might arrive at a different
conclusion than those online forums.
5:41
Later on in the course, we'll get into
more details on how to pair typefaces.
5:46
But I hope this has helped distill
some of the ambiguity around choosing
5:51
a typeface for the web.
5:55
Think about where it's gonna live.
5:58
What makes it legible?
6:00
If its mood matches the content and
audience.
6:01
Does it have everything you need?
6:05
And what factor will cosplay?
6:06
This is by no means an exact science so
have some fun along the way.
6:10
The answers to these questions should
help guide you in a good direction and
6:16
leave room for your own personal taste and
design choices.
6:22
Next, we'll take a look at weights,
styles, and sizes.
6:26
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up