1
00:00:00,920 --> 00:00:02,470
All right.
We're in the home stretch.

2
00:00:02,470 --> 00:00:06,250
In the final video of this stage, we'll
get a few things that can give your

3
00:00:06,250 --> 00:00:11,320
typography extra polish, along with some
features to expect for the future.

4
00:00:11,320 --> 00:00:15,240
Knowing how to properly use these
techniques can set apart your designs, and

5
00:00:15,240 --> 00:00:16,970
create lasting impressions on the reader.

6
00:00:18,220 --> 00:00:21,320
First, we'll look at letterspacing and
kerning.

7
00:00:21,320 --> 00:00:23,470
Then, we'll jump into ligatures.

8
00:00:23,470 --> 00:00:26,300
After that, we'll go through an array of
best practices.

9
00:00:26,300 --> 00:00:28,330
And finally, we'll look ahead for what's
in store.

10
00:00:29,390 --> 00:00:31,940
Although commonly confused, letterspacing
and

11
00:00:31,940 --> 00:00:35,670
kerning are two different techniques when
it comes to typography.

12
00:00:35,670 --> 00:00:39,930
They both deal with the space around
letter forms but in different ways.

13
00:00:39,930 --> 00:00:43,160
We'll examine each one along with general
rules of thumb for both.

14
00:00:45,015 --> 00:00:48,270
Letterspacing, also known as tracking,
pertains to

15
00:00:48,270 --> 00:00:52,790
the amount of space between every
character in a particular block of text.

16
00:00:52,790 --> 00:00:53,980
You could increase or

17
00:00:53,980 --> 00:00:58,010
decrease the amount of letterspacing which
will affect the text as a whole.

18
00:00:59,300 --> 00:01:02,610
For example, in CSS, we could set the
letterspacing of our

19
00:01:02,610 --> 00:01:07,160
main title to be greater or less than the
font's normal spacing.

20
00:01:07,160 --> 00:01:09,210
So for greater, we'd add a value like
0.03m.

21
00:01:09,210 --> 00:01:12,310
We'll save and check it out.

22
00:01:13,490 --> 00:01:17,890
Notice how every space between each
character is effected and is loosened up.

23
00:01:19,250 --> 00:01:21,530
Now let's change that value to be a
-0.03m.

24
00:01:21,530 --> 00:01:24,840
Let's save and check that out.

25
00:01:25,990 --> 00:01:26,620
All right.

26
00:01:26,620 --> 00:01:30,080
Notice now how the spacing between every
letter has been tightened up.

27
00:01:30,080 --> 00:01:33,260
And I actually prefer this entire
letterspacing for

28
00:01:33,260 --> 00:01:36,340
our title as compared to the normal
letterspacing.

29
00:01:36,340 --> 00:01:40,580
Notice how tighter letterspacing will
result in a heavier feel.

30
00:01:40,580 --> 00:01:45,140
Whereas looser letterspacing gives a
lighter, airyer look.

31
00:01:45,140 --> 00:01:46,920
General rules of thumb are,

32
00:01:46,920 --> 00:01:51,230
one, headings can usually use a little
tighter letterspacing.

33
00:01:51,230 --> 00:01:56,191
Two, do not letterspace body copy unless
it's absolutely necessary to

34
00:01:56,191 --> 00:01:58,080
aid legibility.

35
00:01:58,080 --> 00:02:02,258
And three, don't letterspace your type out
too much, as words and

36
00:02:02,258 --> 00:02:04,250
spaces will get muddled.

37
00:02:04,250 --> 00:02:06,130
Now, let's look at kerning.

38
00:02:06,130 --> 00:02:10,920
Kerning deals with the amount of space
between a specific character combination,

39
00:02:10,920 --> 00:02:14,090
rather than the spacing of a whole body of
text.

40
00:02:14,090 --> 00:02:18,006
In a typeface, a type designer sets a
space for the left side of a letter and

41
00:02:18,006 --> 00:02:19,584
the right side of a letter, so

42
00:02:19,584 --> 00:02:23,760
that it works best with all the other
letters and their spacing.

43
00:02:23,760 --> 00:02:27,760
Certain character combinations can come up
that are either too far apart or

44
00:02:27,760 --> 00:02:29,500
too close together.

45
00:02:29,500 --> 00:02:32,730
These include AV, WA or TA.

46
00:02:33,850 --> 00:02:36,640
With kerning, character pairs are adjusted
to

47
00:02:36,640 --> 00:02:40,110
be evenly spaced with the rest of the
typeface.

48
00:02:40,110 --> 00:02:42,930
Most typefaces now have kerning built in.

49
00:02:42,930 --> 00:02:47,420
But kerning support for web fonts and
browsers is still getting refined.

50
00:02:47,420 --> 00:02:52,210
The latest versions of Safari and Firefox
automatically enable kerning.

51
00:02:52,210 --> 00:02:55,920
Whereas other browsers need some help from
CSS to enable it.

52
00:02:55,920 --> 00:02:57,150
Let's look at how.

53
00:02:57,150 --> 00:03:02,440
Here, we have Elliot Jay Stocks' article
on Advanced web typography: Kerning.

54
00:03:02,440 --> 00:03:06,700
You can read it and get more of a feel on
where the web is at for kerning today.

55
00:03:06,700 --> 00:03:12,160
But what we want right here is the code to
paste into our CSS to enable kerning.

56
00:03:12,160 --> 00:03:15,490
And all these prefixes are necessary for
more browser support.

57
00:03:15,490 --> 00:03:17,920
So what we want to copy here is this code.

58
00:03:17,920 --> 00:03:22,240
And I'm not going to be grabbing the text
rendering optimized legibility up there,

59
00:03:22,240 --> 00:03:24,350
because it's known to have some issues.

60
00:03:24,350 --> 00:03:26,350
And I'm going to go back to our style
sheet and

61
00:03:26,350 --> 00:03:30,460
paste it in the body tag of our CSS.

62
00:03:30,460 --> 00:03:33,270
We'll save that and check it out.

63
00:03:33,270 --> 00:03:36,080
So what I want you to notice here is this
WA.

64
00:03:36,080 --> 00:03:39,050
That letter combination is prone to have a
lot of space in between it.

65
00:03:39,050 --> 00:03:42,820
This is going to be a minor adjustment, so
pay close attention as I refresh it.

66
00:03:44,140 --> 00:03:46,720
That was a very slight change in this
typeface.

67
00:03:46,720 --> 00:03:50,940
But in other typefaces, the lack of
kerning can be more noticeable.

68
00:03:50,940 --> 00:03:54,710
If you want more control over kerning,
then check out letteringjs.com.

69
00:03:54,710 --> 00:03:58,180
It gives you control over each character
so you

70
00:03:58,180 --> 00:04:02,920
can kern type manually with letter spacing
or just give it any effect that you want.

71
00:04:02,920 --> 00:04:06,560
This is great for getting big display type
exactly how you want it.

72
00:04:06,560 --> 00:04:08,792
But it wouldn't make sense to use with
Body Copy.

73
00:04:08,792 --> 00:04:14,240
So, letterspacing affects the spacing of
the text as a whole.

74
00:04:14,240 --> 00:04:18,690
Whereas kerning deals with the space
between specific pairs of letters.

75
00:04:18,690 --> 00:04:21,079
Now, let's move into talking about
ligatures.

76
00:04:22,810 --> 00:04:28,210
Ligatures improve the appearance of text
for letters that are too close together.

77
00:04:28,210 --> 00:04:30,880
They create a smooth transition between
letters by

78
00:04:30,880 --> 00:04:33,340
connecting certain character combinations.

79
00:04:33,340 --> 00:04:36,270
They can also give the text a nice touch.

80
00:04:36,270 --> 00:04:38,810
Ligatures are mostly found in serif and

81
00:04:38,810 --> 00:04:42,740
script typefaces because they aren't as
necessary in sans serif.

82
00:04:42,740 --> 00:04:45,540
So just because a typeface does not have
ligatures,

83
00:04:45,540 --> 00:04:49,020
does not mean it's a bad typeface.

84
00:04:49,020 --> 00:04:53,520
In order to utilize ligatures, you'll need
a typeface or web font that supports them.

85
00:04:53,520 --> 00:04:56,670
Typeface specimen images will often
showcase them.

86
00:04:56,670 --> 00:04:58,700
Or you can look through the character map
or

87
00:04:58,700 --> 00:05:01,075
info on a typeface to see if they're
available.

88
00:05:01,075 --> 00:05:07,584
[SOUND] If you've chosen a web font that
has ligatures, then you can turn them

89
00:05:07,584 --> 00:05:14,515
on in your CSS through the font feature
settings property by typing liga, here.

90
00:05:14,515 --> 00:05:17,069
You would also want to do that with the
proper code for

91
00:05:17,069 --> 00:05:18,960
each of these vendor prefixes.

92
00:05:18,960 --> 00:05:22,130
But I'm not gonna do it since the
typefaces we've chosen actually don't have

93
00:05:22,130 --> 00:05:24,460
ligatures, so this is not necessary.

94
00:05:24,460 --> 00:05:26,450
But I wanted to give you a feel for

95
00:05:26,450 --> 00:05:31,230
how to use them if your web fonts do have
them as they can really enhance a design.

96
00:05:31,230 --> 00:05:34,240
If the browser doesn't support font
feature settings,

97
00:05:34,240 --> 00:05:37,720
then the font falls back to its regular
character combination,

98
00:05:37,720 --> 00:05:41,030
which is great as a back up for serifs or
sans.

99
00:05:41,030 --> 00:05:44,460
In Scripts, this can be a little less
ideal because they

100
00:05:44,460 --> 00:05:48,140
often rely heavily on ligatures to connect
characters.

101
00:05:48,140 --> 00:05:51,010
So you might end up with a few
disconnecting characters.

102
00:05:51,010 --> 00:05:55,110
As web standards move forward, support for
ligatures will be a no brainer.

103
00:05:55,110 --> 00:06:00,490
For this next section of the lesson, we'll
look at an array of best practices.

104
00:06:00,490 --> 00:06:05,310
One, pay attention to orphans, widows,
rags and rivers.

105
00:06:05,310 --> 00:06:08,140
We looked at orphans earlier, but their
counterpart, widows,

106
00:06:08,140 --> 00:06:11,710
can also interrupt reader flow and impair
readability.

107
00:06:11,710 --> 00:06:16,080
Widows are a single line of text that
flows over to another column.

108
00:06:16,080 --> 00:06:20,500
Hopefully we'll have more control through
CSS in the near future to handle these.

109
00:06:20,500 --> 00:06:23,910
We're also able to justify type through
CSS.

110
00:06:23,910 --> 00:06:28,090
But this can create large, unsightly gaps
throughout a paragraph.

111
00:06:28,090 --> 00:06:31,170
These are referred to as rivers because
the end

112
00:06:31,170 --> 00:06:36,650
result might look like several rivers of
white space flowing throughout the text.

113
00:06:36,650 --> 00:06:40,480
Controlling rivers is pretty difficult
with the current tools we have now.

114
00:06:40,480 --> 00:06:43,592
So a simple left align often seems the
best way to go.

115
00:06:43,592 --> 00:06:48,100
Left align text can sometimes create rags
on the right side,

116
00:06:48,100 --> 00:06:51,820
which are uneven gaps often caused by long
words.

117
00:06:51,820 --> 00:06:55,540
Minor gaps are expected, but gaping holes
should be taken into account.

118
00:06:55,540 --> 00:06:58,413
There's really no easy way to prevent
them, but

119
00:06:58,413 --> 00:07:03,030
we can sometimes avoid them by adjusting
font sizes and line length.

120
00:07:03,030 --> 00:07:07,435
Just don't let the markup get out of hand
by adding a bunch of BR tags everywhere.

121
00:07:07,435 --> 00:07:11,799
[SOUND] Two, use smart quotes and other
proper entities.

122
00:07:11,799 --> 00:07:15,079
HTML cannot render smart quotation marks,
en or

123
00:07:15,079 --> 00:07:18,270
em dashes and other special characters.

124
00:07:18,270 --> 00:07:23,070
On top of that, most wizzy wig web editors
default to straight quotations.

125
00:07:23,070 --> 00:07:26,050
Instead, we'll need to insert these
character codes

126
00:07:26,050 --> 00:07:29,000
using HTML character enmities.

127
00:07:29,000 --> 00:07:33,170
A smart quotation mark is a curly quote,
not the set of straight quotes,

128
00:07:33,170 --> 00:07:35,550
which is the default in HTML.

129
00:07:35,550 --> 00:07:38,740
Notice how open and close quotes are
different.

130
00:07:38,740 --> 00:07:41,715
The proper way to handle this, is to open
the left side with

131
00:07:41,715 --> 00:07:49,655
“ and close the quote on the right
with ”.

132
00:07:49,655 --> 00:07:54,308
[SOUND] If you need to interrupt text, do
not use a hyphen.

133
00:07:54,308 --> 00:07:59,780
Instead, use the correct HTML entities for
en or em dashes.

134
00:07:59,780 --> 00:08:03,902
[SOUND] For example, en dashes are a bit
longer than hyphens and

135
00:08:03,902 --> 00:08:08,589
are used to indicate a range of time or
numbers, like one through ten.

136
00:08:08,589 --> 00:08:12,860
Em dashes are even longer-and indicate a
break in thought.

137
00:08:12,860 --> 00:08:15,460
Also, instead of using three periods,

138
00:08:15,460 --> 00:08:18,570
place proper ellipsis in the text with the
correct entity.

139
00:08:18,570 --> 00:08:21,470
And the same goes from ampersands.

140
00:08:21,470 --> 00:08:24,890
For a list of other common entities, like
ampersands or

141
00:08:24,890 --> 00:08:28,159
ellipses, take a look at entitycode.com.

142
00:08:29,470 --> 00:08:33,670
Three, create even alignment for
quotations and lists.

143
00:08:33,670 --> 00:08:35,800
Now we're going to talk about hanging
punctuation,

144
00:08:35,800 --> 00:08:38,060
like quotation marks and lists.

145
00:08:38,060 --> 00:08:42,750
Hanging punctuation requires characters to
be positioned outside the margin edge.

146
00:08:42,750 --> 00:08:43,950
This is commonly used for

147
00:08:43,950 --> 00:08:48,280
pool quotes and bulleted lists to create
an even visual edge.

148
00:08:48,280 --> 00:08:52,410
For example, hanging quotes keep the left
alignment balanced, so

149
00:08:52,410 --> 00:08:54,890
it increases readability in a text.

150
00:08:54,890 --> 00:08:57,700
A quotation mark that is flush with the
text,

151
00:08:57,700 --> 00:09:00,900
like we see here, can interrupt the left
margin and

152
00:09:00,900 --> 00:09:05,080
disrupt the rhythm of the reader compared
to the one that is not.

153
00:09:05,080 --> 00:09:08,470
To keep quotation marks clear at the edges
of surrounding text,

154
00:09:08,470 --> 00:09:12,630
we can give the text a negative text
indent value in the style sheet.

155
00:09:12,630 --> 00:09:17,000
Support for a hanging punctuation property
in CSS should be coming soon.

156
00:09:17,000 --> 00:09:19,960
For now though, we can use negative text
indent values or

157
00:09:19,960 --> 00:09:23,180
negative margins to achieve the desired
effect.

158
00:09:23,180 --> 00:09:27,190
We also have the option to hang the list
markers in list.

159
00:09:27,190 --> 00:09:31,510
This can help the flow of text, because
the margin edge is well defined and

160
00:09:31,510 --> 00:09:34,540
continuous compared to one that is
indented.

161
00:09:34,540 --> 00:09:35,800
Either one is acceptable.

162
00:09:35,800 --> 00:09:38,760
So, it's really up to us to go with what
feels right.

163
00:09:38,760 --> 00:09:42,130
Text and list items should be consistently
aligned.

164
00:09:42,130 --> 00:09:46,420
If a list item runs more than one line of
text and isn't aligned well,

165
00:09:46,420 --> 00:09:50,460
then reading flow can be interrupted
because our eyes look for straight lines.

166
00:09:50,460 --> 00:09:55,080
With CSS, make sure the list markers are
away from the edges of the text.

167
00:09:55,080 --> 00:09:57,580
This will make for a much cleaner reading
experience.

168
00:09:58,820 --> 00:10:01,370
Four, utilize icon fonts.

169
00:10:01,370 --> 00:10:07,240
Icon fonts or icons or pictograms that
would normally implemented as an image or

170
00:10:07,240 --> 00:10:10,720
a vector file but are converted into a
font instead.

171
00:10:10,720 --> 00:10:13,700
Icon fonts can speed up our design process
and

172
00:10:13,700 --> 00:10:16,750
can significantly improve site
performance.

173
00:10:16,750 --> 00:10:20,960
They can load as much as 14% faster than
images and

174
00:10:20,960 --> 00:10:23,840
can be up to 90% smaller than SVG files.

175
00:10:23,840 --> 00:10:27,470
They allow us to size them at any scale
without losing quality,

176
00:10:27,470 --> 00:10:30,360
making them crisp at any resolution.

177
00:10:30,360 --> 00:10:35,984
Some popular sites that offer icon fonts
are symbolset.com, pictos.cc,

178
00:10:35,984 --> 00:10:38,140
and icomoon.io.

179
00:10:38,140 --> 00:10:43,610
You can call these in a similar way to web
fonts through the @font-face rule in CSS.

180
00:10:43,610 --> 00:10:47,340
And these sites will give you code and
instructions on how to utilize them.

181
00:10:47,340 --> 00:10:50,560
So finally, what's in store for the
future?

182
00:10:50,560 --> 00:10:54,840
Well, open type features are still making
their way to the web.

183
00:10:54,840 --> 00:10:59,190
Many extra font features, like swashes,
stylistic alternates for

184
00:10:59,190 --> 00:11:05,120
letters, different styled numbers and more
can all be part of one font file.

185
00:11:05,120 --> 00:11:09,430
Some of these can be accessed through the
font features settings property in CSS.

186
00:11:09,430 --> 00:11:11,060
But again, browser support for

187
00:11:11,060 --> 00:11:14,690
that property is a little lacking at the
time of this recording.

188
00:11:14,690 --> 00:11:16,460
Keep an eye out for greater support for

189
00:11:16,460 --> 00:11:21,190
those features, as they give you a lot
more control over your type and designs.

190
00:11:21,190 --> 00:11:24,690
Viewport Width or VW and Viewport Height
or

191
00:11:24,690 --> 00:11:29,910
VH are units of measure in CSS that are
growing in browser support.

192
00:11:29,910 --> 00:11:33,170
They're extremely powerful for responsive
design as they

193
00:11:33,170 --> 00:11:39,030
automatically resize type based on how
high or wide the screen size is.

194
00:11:39,030 --> 00:11:43,130
For example, in our workspace, we could
set our H1 font size to be 10VW.

195
00:11:43,130 --> 00:11:46,200
I'll save and refresh it.

196
00:11:46,200 --> 00:11:48,310
Notice that our type has changed a little.

197
00:11:48,310 --> 00:11:50,280
But watch as we resize the browser.

198
00:11:50,280 --> 00:11:52,810
The type is shrinking as the browser width
changes.

199
00:11:52,810 --> 00:11:57,350
This is incredibly powerful, and it works
in a similar way to

200
00:11:57,350 --> 00:12:02,050
the fit text JS plugin we looked at in the
responsive typography stage.

201
00:12:02,050 --> 00:12:06,140
I believe Viewport width and Viewport
height will be game changers on how we

202
00:12:06,140 --> 00:12:09,860
handle responsive typography, especially
for headlines.

203
00:12:09,860 --> 00:12:13,290
For more on what we can expect down the
road, check out the articles and

204
00:12:13,290 --> 00:12:16,210
the teachers notes under the Future of Web
Typography.

205
00:12:17,590 --> 00:12:18,920
All right.
You've made it.

206
00:12:18,920 --> 00:12:19,540
Great work.

207
00:12:19,540 --> 00:12:20,950
You've completed this stage,

208
00:12:20,950 --> 00:12:24,680
which concludes the learning section of
our web typography course.

209
00:12:24,680 --> 00:12:28,470
In the final stage, we'll get how to apply
all this in a project where we

210
00:12:28,470 --> 00:12:30,290
create a one page typographic site.

211
00:12:30,290 --> 00:12:31,952
I'll see you then.

212
00:12:31,952 --> 00:12:32,509
[BLANK_AUDIO]