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
Up first, we’ll cover what is typography, where it can be found, who practices it, and more.
What Is Typography?, Matthew Butterick
Why Does Typography Matter?, Matthew Butterick
Elements of Typographic Style, Robert Bringhurst
Understanding the Difference Between Type and Lettering, Joseph Alessio
[MUSIC]
0:00
Hey, I'm Maddox and I design type through
Fort Foundry.
0:04
You can check out all the type faces and
goodsI make at fortfoundry.com.
0:07
Welcome to an introduction to typography
where we'll talk about the basics.
0:12
This will give us a solid foundation to
build upon as we
0:16
get into the later stages of the web
typography course.
0:18
First, we'll need to understand what
typography is.
0:22
You might not realize this, but you've
seen typography in action.
0:25
It's all around your everyday life.
0:29
It's on the menu of that restaurant you
love eating at, it's on those road
0:31
signs you drove by, and it's definitely
all over that favorite site of yours.
0:34
Which is lets be honest, tree house of
course.
0:38
All that to say typography is everywhere,
whether people realize it or not.
0:41
So let's define it.
0:46
On Matthew Butterick's site practical
typography,
0:47
he defines the term simply as follows.
0:50
Typography is the visual component of the
written word.
0:52
This means typography comes in to play
when words are visually displayed on
0:56
services like screens, paper, posters,
signs, and more.
1:00
Though the words or
1:06
content of something might remain the
same, the typography can change.
1:06
Let's take a look.
1:11
Here we have the text, I shot the serif.
1:12
Now if that phrase was only spoken,
typography wouldn't be involved.
1:15
But because it's visually displayed, 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:23
We could change the typeface from Georgia
to Futura, and set it in all caps, or
1:27
uppercase letters.
1:32
We could also adjust the letter spacing,
or tracking, between characters.
1:33
We could go on forever making different
adjustments.
1:37
But I just wanted to give you a quick
sample of typography in action.
1:39
If you don't know how to do any of those
things, don't worry.
1:43
We'll cover how to apply all this and more
to the web later in the course.
1:46
So far, we've seen that typography
involves changing, arranging, or
1:50
ordering type.
1:54
But we wouldn't want to do this without a
purpose or reason as to why.
1:55
A major purpose behind typography is
utility.
2:00
This means presenting the text in a way
that is useful, clear, and
2:03
legible to it's reader.
2:06
The content of a web page could be
incredible, but if the typography is
2:08
lack luster, then it's going to be
difficult for people to read and navigate.
2:12
They'll either struggle through it or quit
along the way.
2:16
Both situations are undesirable.
2:19
This is why typography as utility, is a
extremely important to present the text in
2:21
a way that's clear, orderly, and legible
for readers and users of your site.
2:26
Another purpose behind typography is
design.
2:31
Type can have a personality or mood.
2:34
It gives off a certain vibe, and conveys
something to
2:35
the reader before they've even digested a
single word on the page.
2:38
The flavor of your typography should match
the voice of your content.
2:42
You don't want something that looks like
chocolate ice cream,
2:46
to taste like meatloaf.
2:49
Let's say you have an official serious
business document that's set in a fun,
2:51
quirky typeface.
2:54
Although the content might set the right
message, the design or
2:56
typography would not at all.
2:59
As you practice typography,
3:01
you want to make sure the design aspect of
it enhances the message at hand.
3:02
It can keep readers engaged, and also
create great delight in them.
3:07
Because so many different things can come
into play,
3:11
good typography might seem a bit tricky at
first to execute.
3:14
I like to think of it as striking a
balance between utility and design.
3:17
Throughout this course we'll look at
different ways to maintain that balance.
3:21
Because typography is one of the most
important elements of web design.
3:25
Lastly I want to make a distinction
between typography and lettering.
3:29
These are two fields that are popular
today, but
3:33
commonly confused in the industry.
3:35
Both deal with letterforms, but in
different ways.
3:37
Typography involves working with premade
letter systems like typefaces and
3:41
fonts to lay out and arrange content.
3:45
Whereas lettering involved crafting
letterforms for a single use and
3:47
purpose, instead of utilizing a premade
letter system as is with typography.
3:51
This definition is based on Joseph
Alessio's article in the teacher's notes.
3:56
It's great for further reading.
4:00
Now that we understand the difference, our
focus for this course will be
4:03
on typography, and you'll be able to use
these terms correctly in your industry.
4:06
Next time you're out and about, see if you
can spot some typography you like, and
4:11
take note of what distinguishes it.
4:14
In the upcoming video,
4:16
we will learn some terms that will help us
talk about typography and type faces.
4:17
You need to sign up for Treehouse in order to download course files.
Sign up