1
00:00:00,380 --> 00:00:03,080
Next, let's see what we can do with color.

2
00:00:03,080 --> 00:00:05,430
I won't go too in-depth with color theory,

3
00:00:05,430 --> 00:00:08,170
as that's covered in Treehouse's design
courses.

4
00:00:08,170 --> 00:00:10,640
But, let's look at how to utilize color
with type.

5
00:00:10,640 --> 00:00:13,760
First, you wanna make sure type over any
element,

6
00:00:13,760 --> 00:00:18,040
whether it's the whole background or a
small content block, has good contrast.

7
00:00:19,050 --> 00:00:21,780
if the contrast is too low, then the type
and

8
00:00:21,780 --> 00:00:26,190
its background color will start to blend
together, making it hard to decipher.

9
00:00:26,190 --> 00:00:27,500
If it's too high,

10
00:00:27,500 --> 00:00:31,600
you can tire out readers' eyes due to the
bright nature of screens.

11
00:00:31,600 --> 00:00:35,190
Pure black and white work well in print,
but on the web, you should

12
00:00:35,190 --> 00:00:39,490
stick to a more subtle black when set on a
white background, and vice-versa.

13
00:00:39,490 --> 00:00:43,250
Our example page has a grayish-black of
number 333.

14
00:00:43,250 --> 00:00:45,420
And, a wide of number F9F9F9.

15
00:00:46,470 --> 00:00:51,220
Almost all popular content heavy websites
utilize a light background with dark text

16
00:00:51,220 --> 00:00:54,990
for their main body copy versus a dark
background with light text.

17
00:00:54,990 --> 00:00:57,520
Don't forget to take into account color
blindness and

18
00:00:57,520 --> 00:01:01,020
accessibility with this concept of
contrast.

19
00:01:01,020 --> 00:01:02,550
With typographic hierarchy,

20
00:01:02,550 --> 00:01:07,340
more contrast will grab attention whereas
subtler contrast will blend in.

21
00:01:07,340 --> 00:01:11,450
Another way to think about this is the
primary, or important pieces of content

22
00:01:11,450 --> 00:01:16,770
should be easily noticed whereas secondary
pieces can blend in more with the design.

23
00:01:16,770 --> 00:01:18,730
All right, let's jump back into our
workspace.

24
00:01:18,730 --> 00:01:20,960
I want to give our main title and

25
00:01:20,960 --> 00:01:24,680
author name a different background color
than the rest of the text.

26
00:01:24,680 --> 00:01:28,520
So, to do that, I'll head over to here and
we see we're now in the fifth folder and

27
00:01:28,520 --> 00:01:30,230
I have our index and style open.

28
00:01:30,230 --> 00:01:34,430
And, we can set our background for our
title class to be 1e1e,

29
00:01:35,570 --> 00:01:38,640
which is a subtle black, and the color of
the type to be f9f9f9.

30
00:01:38,640 --> 00:01:41,680
We'll save that and check it out.

31
00:01:44,080 --> 00:01:45,800
Great.
So, it's looking good.

32
00:01:45,800 --> 00:01:49,640
But, we now need to add some space below
the author name here.

33
00:01:49,640 --> 00:01:50,190
So, to do that,

34
00:01:50,190 --> 00:01:55,570
we'll simply add padding bottom of 5 M to
our title class an lets check that out.

35
00:01:57,180 --> 00:02:00,980
That's much better and it looks vertically
centered in this element.

36
00:02:00,980 --> 00:02:05,750
So, this author name, I want it to be less
excentuated then the title here.

37
00:02:05,750 --> 00:02:11,240
So, to do that we'll give it a different
color, so I head over to our H3 and

38
00:02:11,240 --> 00:02:15,460
i'll add a color of 606060 which is a mid
gray, lets save it and check it out.

39
00:02:17,580 --> 00:02:18,270
Awesome.

40
00:02:18,270 --> 00:02:21,860
So, our title is now further extended
because it's color contrast is

41
00:02:21,860 --> 00:02:25,530
much higher then the contrast of the
author name with the background.

42
00:02:25,530 --> 00:02:26,740
The page is getting there, but

43
00:02:26,740 --> 00:02:32,550
let's spice it up a bit by adding a burnt
orangish-red color to our h2's here.

44
00:02:32,550 --> 00:02:37,370
So, do that, I'll head over to our H2 and
add a color of AE372E.

45
00:02:37,370 --> 00:02:40,500
Let's save and check it out.

46
00:02:41,920 --> 00:02:44,610
With Mars being the red planet, I thought
it's appropriate.

47
00:02:44,610 --> 00:02:47,350
This color has good contrast with the
background and

48
00:02:47,350 --> 00:02:51,920
distinguishes our headings further while
adding a variety to the design.

49
00:02:51,920 --> 00:02:55,250
I'm going to stop here with color as I
don't want to go overboard.

50
00:02:55,250 --> 00:02:56,750
Too many colors can make it hard for

51
00:02:56,750 --> 00:03:00,270
users to understand typographic hierarchy
and clutter up the design.

52
00:03:01,590 --> 00:03:05,820
Smart color hierarchy can help users
recognize patterns within the page.

53
00:03:05,820 --> 00:03:09,740
Links should look like links and other
elements should not.

54
00:03:09,740 --> 00:03:11,520
If similar colors are used,

55
00:03:11,520 --> 00:03:15,590
then users may think something is
clickable when in fact it's not.

56
00:03:15,590 --> 00:03:19,430
Keeping heading colors persistent can also
aid readers in recognizing them quicker.

57
00:03:21,170 --> 00:03:24,790
One last note on color, a poplar trend on
websites today is to

58
00:03:24,790 --> 00:03:28,260
utilize a background image with white text
over the top.

59
00:03:28,260 --> 00:03:30,720
This can be elegant and magazine-like.

60
00:03:30,720 --> 00:03:33,780
Just make sure there's enough contrast
between the type and

61
00:03:33,780 --> 00:03:36,350
the image no matter the screen size.

62
00:03:36,350 --> 00:03:39,810
You can handle this in CSS by slightly
fading the background image to

63
00:03:39,810 --> 00:03:43,750
a solid black or edit the photo in a
design program to make sure

64
00:03:43,750 --> 00:03:47,750
it's subtly dark enough in the necessary
areas where type will be overlaid.

65
00:03:49,300 --> 00:03:52,130
Lastly, let's look at how we can establish
hierarchy through

66
00:03:52,130 --> 00:03:54,120
paring different type faces.

67
00:03:54,120 --> 00:03:57,510
Earlier, we talked about how to choose a
type face so we're working under

68
00:03:57,510 --> 00:04:02,070
the understanding that we should pair it
based on the text type face we've chosen.

69
00:04:02,070 --> 00:04:06,410
Type face pairs aren't always necessary
and beginners are sometimes encourages to

70
00:04:06,410 --> 00:04:11,230
only use one type face in order to really
learn the ins and outs of good typography.

71
00:04:11,230 --> 00:04:13,200
Until, they're ready to start pairing.

72
00:04:13,200 --> 00:04:16,340
Typography gets harder to execute well
once you throw two or

73
00:04:16,340 --> 00:04:19,170
more in the mix, but it's well worth the
variety.

74
00:04:19,170 --> 00:04:20,810
Here's some basic pairing rules to go by.

75
00:04:22,650 --> 00:04:25,900
First, pair typefaces with similar
proportions.

76
00:04:25,900 --> 00:04:29,340
This means taking into account what we
learned about letter forms from our

77
00:04:29,340 --> 00:04:30,740
first stage.

78
00:04:30,740 --> 00:04:34,670
A San Serif typeface with a similar x
height, portions, and

79
00:04:34,670 --> 00:04:38,480
contrasts to a Serif typeface compare well
together.

80
00:04:38,480 --> 00:04:42,340
You can even utilize super families that
have multiple weights of Sans and

81
00:04:42,340 --> 00:04:45,690
Serif counterparts that work great with
one another.

82
00:04:45,690 --> 00:04:48,670
Pair typefaces with complementary
personalities.

83
00:04:48,670 --> 00:04:51,660
Besides the fact that it's incredibly
helpful, one of the things I

84
00:04:51,660 --> 00:04:55,212
really like about Hoefler & Co's technique
for combining fonts,

85
00:04:55,212 --> 00:04:59,083
is how they talk about their typefaces as
personalities, or moods.

86
00:04:59,083 --> 00:05:03,450
As you pair typefaces, try to classify the
mood each one is conveying and see if

87
00:05:03,450 --> 00:05:08,580
they jive and play well together, pair
typefaces from the same historical period.

88
00:05:08,580 --> 00:05:11,770
Jessica Hish, who's immersive article on
typography is linked in

89
00:05:11,770 --> 00:05:15,190
the teacher's notes, has some great
thoughts on this.

90
00:05:15,190 --> 00:05:19,090
If you're building a site focused around a
certain time period, then research and

91
00:05:19,090 --> 00:05:23,260
find out as much as you can about
typefaces in that era.

92
00:05:23,260 --> 00:05:25,450
You might even find some pics of
storefronts or

93
00:05:25,450 --> 00:05:28,680
signs with a great typeface pair for
inspiration.

94
00:05:28,680 --> 00:05:31,520
Pair typefaces from the same designer.

95
00:05:31,520 --> 00:05:35,090
Type designers often have a certain style
that can be found throughout each of

96
00:05:35,090 --> 00:05:36,510
their typefaces.

97
00:05:36,510 --> 00:05:40,470
The style is the common bond that holds
the two or more together.

98
00:05:40,470 --> 00:05:43,350
This especially works in your favor if
they have a vast array of

99
00:05:43,350 --> 00:05:44,488
family's to choose from.

100
00:05:44,488 --> 00:05:48,450
Last, explore more.

101
00:05:48,450 --> 00:05:50,440
Try out different combinations.

102
00:05:50,440 --> 00:05:54,440
Sometimes, you can stumble upon a typeface
pair you wouldn't have imagined worked.

103
00:05:54,440 --> 00:05:56,540
They're like chicken and waffles.

104
00:05:56,540 --> 00:06:00,370
You definitely thought they wouldn't go
together, but oh, they do.

105
00:06:00,370 --> 00:06:04,950
A great site that I love to peruse is
called fontsinuse.com.

106
00:06:04,950 --> 00:06:09,760
It catalogs different typefaces used in
print, web, and all types of media.

107
00:06:09,760 --> 00:06:13,010
It's great for inspiration on different
type combinations and pairs.

108
00:06:13,010 --> 00:06:16,020
All right, let's look at our workspace one
more time.

109
00:06:16,020 --> 00:06:19,340
I've chosen a typeface for the title of
our page, whose personality I

110
00:06:19,340 --> 00:06:24,770
think pairs well with the theme of our
content, and are serif type base Alegria.

111
00:06:24,770 --> 00:06:28,410
It's called Pathway Gothic One, and can be
found on Google Fonts.

112
00:06:28,410 --> 00:06:30,330
Notice that it doesn't have a bunch of
weights and

113
00:06:30,330 --> 00:06:34,540
styles, but that's okay, because we only
have this one, specific use for it.

114
00:06:34,540 --> 00:06:38,270
I chose it due to it's tall letter forms,
and no nonsense look.

115
00:06:38,270 --> 00:06:41,800
I mean, if the world's at war, then we're
not messing around, right?

116
00:06:41,800 --> 00:06:42,390
Its tough and

117
00:06:42,390 --> 00:06:47,520
classy personality compliments Alegreya's
elegant and energetic letterforms.

118
00:06:47,520 --> 00:06:49,660
I'll add this to our collection.

119
00:06:49,660 --> 00:06:52,900
And, notice when I click use, I've also
added all our other web

120
00:06:52,900 --> 00:06:56,730
fonts here because I just wanted to see
how this was affecting our page load.

121
00:06:56,730 --> 00:07:01,030
And, we're right between the green and the
yellow, so that means we're good to go.

122
00:07:01,030 --> 00:07:04,510
So, I'll copy this code which includes a
call to all our

123
00:07:04,510 --> 00:07:08,500
different we fonts in one link and we'll
remove our past ones and

124
00:07:08,500 --> 00:07:12,210
just paste this one right above our style
sheet and hit save.

125
00:07:12,210 --> 00:07:12,980
Great.

126
00:07:12,980 --> 00:07:17,140
So, we'll also want to grab the font
family code for pathway gothic one.

127
00:07:17,140 --> 00:07:19,830
And then, let's add that to our H1 in our
CSS.

128
00:07:23,880 --> 00:07:28,550
I'll also give it a fallback of impact as
it's a similar system font.

129
00:07:28,550 --> 00:07:31,160
We'll save and refresh our page.

130
00:07:31,160 --> 00:07:33,360
Great.
So, our type is getting called in but

131
00:07:33,360 --> 00:07:35,380
now I want to adjust our size a bit.

132
00:07:35,380 --> 00:07:39,760
So, let's set each one to have a font size
of 6.2 M.

133
00:07:39,760 --> 00:07:42,170
And, let's adjust the bottom margin to
point one so

134
00:07:42,170 --> 00:07:44,390
that our author name is snug underneath
it.

135
00:07:45,770 --> 00:07:46,920
Let's refresh and check it out.

136
00:07:48,090 --> 00:07:49,890
All right, it looks great.

137
00:07:49,890 --> 00:07:51,560
I really like this type face pair.

138
00:07:51,560 --> 00:07:55,770
And, I feel like the body copy keeps our
book vibe intact while the title gives it

139
00:07:55,770 --> 00:07:59,240
an authoritative look that fits the
content.

140
00:07:59,240 --> 00:08:04,960
It almost feels like a newspaper declaring
the headline, that's it for hierarchy.

141
00:08:04,960 --> 00:08:07,000
Remember, it's about balancing and

142
00:08:07,000 --> 00:08:09,720
utilizing these different techniques
wisely.

143
00:08:09,720 --> 00:08:12,580
Block quotes, headings, meta data,
navigation, and

144
00:08:12,580 --> 00:08:15,140
more are all at your disposal to style.

145
00:08:15,140 --> 00:08:17,160
So, design wisely, with clear hierarchy.

146
00:08:18,500 --> 00:08:21,470
To close this session, I want to give you
some encouragement.

147
00:08:21,470 --> 00:08:26,010
In an article on typekit, Frank Camiro
says, I'd suggest that most great

148
00:08:26,010 --> 00:08:31,040
examples of fine typography are merely
designs that have wise type face choices

149
00:08:31,040 --> 00:08:35,460
savvy use of space and a clear hierarchy
that's echoed throughout the structure and

150
00:08:35,460 --> 00:08:37,640
presentation of the text.

151
00:08:37,640 --> 00:08:40,320
You now know how to do all those things
with what you've learned from

152
00:08:40,320 --> 00:08:41,970
the past few stages.

153
00:08:41,970 --> 00:08:45,470
It'll take some practice for sure, but the
groundwork is there.

154
00:08:45,470 --> 00:08:46,045
Go celebrate.

155
00:08:46,045 --> 00:08:49,390
Andm when you come back, I'll be waiting
for you in our next video on how to

156
00:08:49,390 --> 00:08:52,510
translate all this to different screen
sizes through responsive design