1
00:00:00,224 --> 00:00:09,243
[MUSIC]

2
00:00:09,243 --> 00:00:14,226
Hey, I'm Hope Armstrong, a teacher and
product designer here at Treehouse.

3
00:00:14,226 --> 00:00:17,500
Every day, you see typography in action.

4
00:00:17,500 --> 00:00:20,322
It's on the menu of that
restaurant you love eating at,

5
00:00:20,322 --> 00:00:24,610
it's on road signs you drive by,
and it's definitely all over that

6
00:00:24,610 --> 00:00:29,910
favorite site of yours, which is,
let's be honest, Treehouse, of course.

7
00:00:29,910 --> 00:00:35,190
All that to say typography is everywhere,
whether people realize it or not.

8
00:00:35,190 --> 00:00:38,459
Something so
ubiquitous is often taken for granted.

9
00:00:38,459 --> 00:00:43,410
But it's really powerful, as designs
are often mostly comprised of type.

10
00:00:43,410 --> 00:00:45,550
There's so much to learn.

11
00:00:45,550 --> 00:00:48,918
First, we need to understand
what typography is.

12
00:00:48,918 --> 00:00:53,950
On Matthew Butterick's site, Practical
Typography, he defines the term simply

13
00:00:53,950 --> 00:00:59,330
as follows, typography is the visual
component of the written word.

14
00:00:59,330 --> 00:01:04,890
This means typography comes into play when
words are visually displayed on surfaces,

15
00:01:04,890 --> 00:01:09,550
like screens, paper,
posters, signs, and more.

16
00:01:09,550 --> 00:01:10,420
Though the words or

17
00:01:10,420 --> 00:01:15,260
content of something might remain
the same, the typography can change.

18
00:01:15,260 --> 00:01:16,020
Let's take a look.

19
00:01:17,050 --> 00:01:19,800
Here's the text, I shot the serif.

20
00:01:19,800 --> 00:01:22,520
We can shape how it looks
through typography.

21
00:01:22,520 --> 00:01:27,430
For example, we could increase the size
of the text and align it in the center.

22
00:01:27,430 --> 00:01:33,160
We could change the typeface from Georgia
to Futura and set it in uppercase letters.

23
00:01:33,160 --> 00:01:38,230
We could also adjust the letter spacing or
tracking between characters.

24
00:01:38,230 --> 00:01:42,033
We could go on forever making
different adjustments, but

25
00:01:42,033 --> 00:01:46,710
I wanted to give you a quick
sample of typography in action.

26
00:01:46,710 --> 00:01:51,640
If you don't know how to do any of these
things, don't worry, we'll cover how to

27
00:01:51,640 --> 00:01:56,490
practically apply all of this and
more later on in the course.

28
00:01:56,490 --> 00:02:01,040
So far, we've seen that typography
involves changing, arranging, or

29
00:02:01,040 --> 00:02:02,450
ordering type.

30
00:02:02,450 --> 00:02:06,190
But we wouldn't want to do this
without a purpose or reason as to why.

31
00:02:08,170 --> 00:02:12,060
A major purpose behind
typography is utility.

32
00:02:12,060 --> 00:02:15,950
This means presenting the text in
a way that is useful, clear, and

33
00:02:15,950 --> 00:02:18,090
legible to its reader.

34
00:02:18,090 --> 00:02:22,910
The content of a webpage could be
incredible, but if the typography is

35
00:02:22,910 --> 00:02:28,235
lackluster, then it's gonna be difficult
for people to read and navigate.

36
00:02:28,235 --> 00:02:32,583
They'll either struggle through it or
quit along the way.

37
00:02:32,583 --> 00:02:35,540
Both situations are undesirable.

38
00:02:35,540 --> 00:02:40,230
This is why typography as utility is
extremely important to present text in

39
00:02:40,230 --> 00:02:45,410
a way that's clear, orderly, and legible
for readers and users of your site.

40
00:02:46,430 --> 00:02:51,756
Another purpose behind typography is
designing for an emotional connection.

41
00:02:51,756 --> 00:02:56,690
Type can have a personality or mood,
it gives off a certain vibe and conveys

42
00:02:56,690 --> 00:03:01,330
something to the reader before they've
even digested a single word on the page.

43
00:03:02,480 --> 00:03:06,620
The flavor of your typography should
match the voice of your content.

44
00:03:06,620 --> 00:03:10,000
You wouldn't want something that
looks like chocolate ice cream

45
00:03:10,000 --> 00:03:11,490
to taste like tater tots.

46
00:03:13,110 --> 00:03:15,214
Let's say you have an official,

47
00:03:15,214 --> 00:03:20,480
serious business document that's
set in a fun, quirky typeface.

48
00:03:20,480 --> 00:03:23,755
Although the content might
send the right message,

49
00:03:23,755 --> 00:03:26,440
the design or typography would not at all.

50
00:03:26,440 --> 00:03:28,143
As you practice typography,

51
00:03:28,143 --> 00:03:33,180
you'll wanna make sure the design aspect
of it enhances the message at hand.

52
00:03:33,180 --> 00:03:36,860
It can keep readers engaged and
also create delight in them.

53
00:03:37,880 --> 00:03:41,525
Because so
many different things can come into play,

54
00:03:41,525 --> 00:03:45,660
good typography might seem a bit
tricky at first to execute.

55
00:03:45,660 --> 00:03:49,530
I like to think of it as striking a
balance between utility and designing for

56
00:03:49,530 --> 00:03:50,950
an emotional connection.

57
00:03:52,380 --> 00:03:56,500
Throughout this course, we'll look at
different ways to maintain that balance,

58
00:03:56,500 --> 00:04:01,480
because typography is one of the most
important elements of design.

59
00:04:01,480 --> 00:04:06,050
Next, I wanna make a distinction
between typography and lettering.

60
00:04:06,050 --> 00:04:08,810
These are two fields that
are popular today, but

61
00:04:08,810 --> 00:04:11,640
commonly confused in the industry.

62
00:04:11,640 --> 00:04:15,800
Both deal with letter forms,
but in different ways.

63
00:04:15,800 --> 00:04:20,210
Typography involves working with pre-made
letter systems like typefaces and

64
00:04:20,210 --> 00:04:23,180
fonts, to lay out an arranged content.

65
00:04:23,180 --> 00:04:26,880
Whereas lettering involves crafting
letter forms for a single use and

66
00:04:26,880 --> 00:04:30,960
purpose instead of utilizing
a pre-made letter system.

67
00:04:30,960 --> 00:04:35,930
This definition is based on Joseph
Alessio's article in the teacher's notes.

68
00:04:35,930 --> 00:04:37,420
It's great for further reading.

69
00:04:38,710 --> 00:04:42,550
Now that we understand the difference,
our focus for this course will be on

70
00:04:42,550 --> 00:04:47,160
typography, and you'll be able to use
those terms correctly in your industry.

71
00:04:48,430 --> 00:04:54,110
Lastly, let's look at what a typeface is
and the elements that define and shape it.

72
00:04:54,110 --> 00:04:58,331
The terms typeface and font are commonly
used interchangeably today, but

73
00:04:58,331 --> 00:05:01,070
they are distinctly different.

74
00:05:01,070 --> 00:05:04,780
A typeface is the design of
a collection of characters.

75
00:05:04,780 --> 00:05:09,350
So the term should be used when talking
about the look of those letters, numbers,

76
00:05:09,350 --> 00:05:10,920
and symbols.

77
00:05:10,920 --> 00:05:15,440
For example, I dig Futura,
it's such a good-looking typeface.

78
00:05:16,450 --> 00:05:21,380
A font is a single instance or
embodiment of a specific weight,

79
00:05:21,380 --> 00:05:23,899
width, or style of a typeface.

80
00:05:23,899 --> 00:05:29,354
For example, the computer file for
Helvetica bold italic would be a font,

81
00:05:29,354 --> 00:05:32,483
whereas Helvetica would be the typeface.

82
00:05:32,483 --> 00:05:36,586
Next time you're out and about,
spot some typography you like and

83
00:05:36,586 --> 00:05:41,120
take note of what distinguishes it and
how it makes you feel.

84
00:05:41,120 --> 00:05:45,240
In the next video, I'll explain how
typography relates to the user experience.