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
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