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
We'll start by defining typography and looking at examples of type in real life.
Further Reading
- What Is Typography? - Matthew Butterick
- Why Does Typography Matter? - Matthew Butterick
-
Understanding the Difference Between Type and Lettering - Joseph Alessio
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
[MUSIC]
0:00
Hey, I'm Hope Armstrong, a teacher and
product designer here at Treehouse.
0:09
Every day, you see typography in action.
0:14
It's on the menu of that
restaurant you love eating at,
0:17
it's on road signs you drive by,
and it's definitely all over that
0:20
favorite site of yours, which is,
let's be honest, Treehouse, of course.
0:24
All that to say typography is everywhere,
whether people realize it or not.
0:29
Something so
ubiquitous is often taken for granted.
0:35
But it's really powerful, as designs
are often mostly comprised of type.
0:38
There's so much to learn.
0:43
First, we need to understand
what typography is.
0:45
On Matthew Butterick's site, Practical
Typography, he defines the term simply
0:48
as follows, typography is the visual
component of the written word.
0:53
This means typography comes into play when
words are visually displayed on surfaces,
0:59
like screens, paper,
posters, signs, and more.
1:04
Though the words or
1:09
content of something might remain
the same, the typography can change.
1:10
Let's take a look.
1:15
Here's the text, I shot the serif.
1:17
We can shape how it looks
through typography.
1:19
For example, we could increase the size
of the text and align it in the center.
1:22
We could change the typeface from Georgia
to Futura and set it in uppercase letters.
1:27
We could also adjust the letter spacing or
tracking between characters.
1:33
We could go on forever making
different adjustments, but
1:38
I wanted to give you a quick
sample of typography in action.
1:42
If you don't know how to do any of these
things, don't worry, we'll cover how to
1:46
practically apply all of this and
more later on in the course.
1:51
So far, we've seen that typography
involves changing, arranging, or
1:56
ordering type.
2:01
But we wouldn't want to do this
without a purpose or reason as to why.
2:02
A major purpose behind
typography is utility.
2:08
This means presenting the text in
a way that is useful, clear, and
2:12
legible to its reader.
2:15
The content of a webpage could be
incredible, but if the typography is
2:18
lackluster, then it's gonna be difficult
for people to read and navigate.
2:22
They'll either struggle through it or
quit along the way.
2:28
Both situations are undesirable.
2:32
This is why typography as utility is
extremely important to present text in
2:35
a way that's clear, orderly, and legible
for readers and users of your site.
2:40
Another purpose behind typography is
designing for an emotional connection.
2:46
Type can have a personality or mood,
it gives off a certain vibe and conveys
2:51
something to the reader before they've
even digested a single word on the page.
2:56
The flavor of your typography should
match the voice of your content.
3:02
You wouldn't want something that
looks like chocolate ice cream
3:06
to taste like tater tots.
3:10
Let's say you have an official,
3:13
serious business document that's
set in a fun, quirky typeface.
3:15
Although the content might
send the right message,
3:20
the design or typography would not at all.
3:23
As you practice typography,
3:26
you'll wanna make sure the design aspect
of it enhances the message at hand.
3:28
It can keep readers engaged and
also create delight in them.
3:33
Because so
many different things can come into play,
3:37
good typography might seem a bit
tricky at first to execute.
3:41
I like to think of it as striking a
balance between utility and designing for
3:45
an emotional connection.
3:49
Throughout this course, we'll look at
different ways to maintain that balance,
3:52
because typography is one of the most
important elements of design.
3:56
Next, I wanna make a distinction
between typography and lettering.
4:01
These are two fields that
are popular today, but
4:06
commonly confused in the industry.
4:08
Both deal with letter forms,
but in different ways.
4:11
Typography involves working with pre-made
letter systems like typefaces and
4:15
fonts, to lay out an arranged content.
4:20
Whereas lettering involves crafting
letter forms for a single use and
4:23
purpose instead of utilizing
a pre-made letter system.
4:26
This definition is based on Joseph
Alessio's article in the teacher's notes.
4:30
It's great for further reading.
4:35
Now that we understand the difference,
our focus for this course will be on
4:38
typography, and you'll be able to use
those terms correctly in your industry.
4:42
Lastly, let's look at what a typeface is
and the elements that define and shape it.
4:48
The terms typeface and font are commonly
used interchangeably today, but
4:54
they are distinctly different.
4:58
A typeface is the design of
a collection of characters.
5:01
So the term should be used when talking
about the look of those letters, numbers,
5:04
and symbols.
5:09
For example, I dig Futura,
it's such a good-looking typeface.
5:10
A font is a single instance or
embodiment of a specific weight,
5:16
width, or style of a typeface.
5:21
For example, the computer file for
Helvetica bold italic would be a font,
5:23
whereas Helvetica would be the typeface.
5:29
Next time you're out and about,
spot some typography you like and
5:32
take note of what distinguishes it and
how it makes you feel.
5:36
In the next video, I'll explain how
typography relates to the user experience.
5:41
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