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
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.
How to Choose a Typeface, Douglas Bonneville
Upping Your Type Game, Jessica Hische
Historically Accurate Example, Jessica Hische
CSS-Tricks, Chris Coyier
On Choosing Type, I Love Typography
Lists on Typekit, Typekit
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 a text typeface,
0:00
let's see how to go about choosing a
display face for the web.
0:03
As we saw earlier, display typefaces are
meant for
0:07
larger sizes like big headlines, site
titles, or pool quotes.
0:10
This allows for a bit more expressive and
creative opportunity with letter forms.
0:14
Nice intricacies like thing serifs will be
lost a point sizes, but
0:19
here they can shine.
0:24
Big bold condensed text with narrow
counters would close up at body sizes, but
0:26
here you can soak them all in.
0:31
A nice casual sign painter script would
hardly be legible in paragraphs, but
0:33
here it can flow beautifully as a heading.
0:37
So how should we go about choosing one?
0:41
First, make sure it's legible and
readable.
0:43
Just because the type is bigger doesn't
mean that
0:46
every character of a type face will be
legible.
0:49
If a person can't read a headline or a
title then the message hasn't been
0:52
enhanced by good typography, it's been
lost by bad.
0:55
Although there's much more room for
expression with display type.
0:58
Make sure you're choosing a well designed
legible type face.
1:03
Just because something looks cool in a
specimen image doesn't mean it'll
1:06
be usable.
1:10
Make use of the test we talked about by
blurring your eyes to
1:11
see if the typeface has even overall color
in all its characters.
1:14
Most web font sites include a type tester
with their type faces.
1:18
Write out example headlines to make sure
it's evenly spaced and
1:22
see what sizes it works best at.
1:25
Display type should have a tighter spacing
than text typefaces.
1:27
Other things that can help readability in
display faces are short
1:32
ascenders and descenders.
1:36
In the setting of headlines,
1:37
these features help reduce choppiness in
the text.
1:39
Again, one of the big questions will be to
ask,
1:42
does the mood of the typeface fit the
content?
1:46
For text faces we talked about channeling
the mood with subtle nuances in typefaces.
1:49
With display, we have a bit more room for
expressiveness and mood.
1:54
We can use the words we came up with
through our content exercise in
1:58
the previous video, and apply them to our
search for
2:02
a display face that fits the right vibe.
2:04
If you're creating a site that's set
around a certain time period in history,
2:07
look for typefaces that are true to that
period.
2:11
That will take some research, but instead
of choosing the mood we
2:13
think the period should look like, we'll
be truly conveying what it is like.
2:16
Jessica Hische has some great thoughts on
this,
2:20
which are linked to in the teacher's
notes.
2:22
Next, we'll again want to think about who
are our readers or users.
2:25
If we're creating a site for people in a
specific industry, for
2:30
relevance, let's say web designers, then
that effects how we choose a type face.
2:33
Take for instance this example on how to
play into the typographic styles people in
2:37
the web design industry are accustomed to.
2:42
Let's say we want to display snippets of
example CSS in blog posts on the site.
2:45
Code programs like TextWrangler or
2:50
Sublime are used by web designers, and
default to mono-spaced typefaces.
2:52
These are fonts originally created for
2:57
typewriters whose characters all occupy
the same amount of horizontal space.
2:58
They're great for code, but they wouldn't
be a great choice for
3:04
text faces [SOUND] due to the decreased
legibility and long paragraphs.
3:07
We can still play into this [SOUND]
industry norm with our CSS
3:10
snippets though.
3:13
By utilizing a mono-space font, we can
typographically make the snippet appear as
3:15
it would in an actual code environment.
3:19
Chris Coyier does an amazing job of this
at http://www.csstricks.com.
3:21
And even goes a step further with color.
3:26
So take into account who are your readers,
and
3:29
what style of typefaces they might be
accustomed to.
3:31
I won't fully go into other priorities
again,
3:34
as they were covered in the previous
video.
3:37
But similarly to text typefaces, take into
account the budget, and make sure
3:39
the display face has everything you need
in regards to weights, styles, or accents.
3:44
Because display is used in less context.
3:49
There's a bit more flexibility here,
3:51
but you never want to set body text in all
caps, you can actually
3:53
utilize a display face to great effect
that only has upper case characters.
3:56
Also, it's possible to have a good
typography with a single weighted font for
4:01
your display face.
4:05
These situations might not be ideal, but
they can be worked with.
4:06
Lastly, there might be a scenario where
you land a client who
4:11
already has a typeface for their brand.
4:14
The process then is sometimes as simple as
finding the web font
4:16
version of that typeface.
4:19
But other times there might not be web
font licenses available for it yet.
4:21
In that case you want to find a typeface
that channels a similar mood and
4:26
style to the print version as you
translate their brand to the web.
4:30
You could Google alternative to insert
typeface name here.
4:34
But what's the fun in that?
4:38
Utilize all the knowledge you take in here
to make a well informed decision for
4:40
what alternative fits best your client's
needs.
4:43
You might just arrive at a different
conclusion than those online forums.
4:47
Later on in the course, we'll get into
more details on how to pair typefaces.
4:51
But I hope this has helped to still some
of the ambiguity around choosing
4:55
a typeface for the Web.
4:59
Think about where it's going to live,
5:00
what makes it legible, if its mood matches
the content and audience.
5:02
Does it have everything you need?
5:06
And what factor will cost play?
5:08
This is by no means an exact science, so
please have some fun along the way.
5:10
The answer to these questions should help
guide you in a good direction.
5:14
And leave room for your own personal taste
and design choices.
5:17
Next, we'll look at the different ways to
implement web fonts on a site.
5:21
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