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
See some of the advanced features of web typography.
Letterspacing and Kerning
• Advanced Web Typography: Kerning, Elliot Jay Stocks
• Kerning on the Web, Bram Stein
• Lettering.js and Kern.js
• Letterspacing and Kerning, Matthew Butterick
Best Practices
• Smart Quotes for Smart People, Jason Santa Maria
• Hanging Punctuation, Chris Coyier
• HMTL for Icon Font Usage, Chris Coyier
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
All right.
We're in the home stretch.
0:00
In the final video of this stage, we'll
get a few things that can give your
0:02
typography extra polish, along with some
features to expect for the future.
0:06
Knowing how to properly use these
techniques can set apart your designs, and
0:11
create lasting impressions on the reader.
0:15
First, we'll look at letterspacing and
kerning.
0:18
Then, we'll jump into ligatures.
0:21
After that, we'll go through an array of
best practices.
0:23
And finally, we'll look ahead for what's
in store.
0:26
Although commonly confused, letterspacing
and
0:29
kerning are two different techniques when
it comes to typography.
0:31
They both deal with the space around
letter forms but in different ways.
0:35
We'll examine each one along with general
rules of thumb for both.
0:39
Letterspacing, also known as tracking,
pertains to
0:45
the amount of space between every
character in a particular block of text.
0:48
You could increase or
0:52
decrease the amount of letterspacing which
will affect the text as a whole.
0:53
For example, in CSS, we could set the
letterspacing of our
0:59
main title to be greater or less than the
font's normal spacing.
1:02
So for greater, we'd add a value like
0.03m.
1:07
We'll save and check it out.
1:09
Notice how every space between each
character is effected and is loosened up.
1:13
Now let's change that value to be a
-0.03m.
1:19
Let's save and check that out.
1:21
All right.
1:25
Notice now how the spacing between every
letter has been tightened up.
1:26
And I actually prefer this entire
letterspacing for
1:30
our title as compared to the normal
letterspacing.
1:33
Notice how tighter letterspacing will
result in a heavier feel.
1:36
Whereas looser letterspacing gives a
lighter, airyer look.
1:40
General rules of thumb are,
1:45
one, headings can usually use a little
tighter letterspacing.
1:46
Two, do not letterspace body copy unless
it's absolutely necessary to
1:51
aid legibility.
1:56
And three, don't letterspace your type out
too much, as words and
1:58
spaces will get muddled.
2:02
Now, let's look at kerning.
2:04
Kerning deals with the amount of space
between a specific character combination,
2:06
rather than the spacing of a whole body of
text.
2:10
In a typeface, a type designer sets a
space for the left side of a letter and
2:14
the right side of a letter, so
2:18
that it works best with all the other
letters and their spacing.
2:19
Certain character combinations can come up
that are either too far apart or
2:23
too close together.
2:27
These include AV, WA or TA.
2:29
With kerning, character pairs are adjusted
to
2:33
be evenly spaced with the rest of the
typeface.
2:36
Most typefaces now have kerning built in.
2:40
But kerning support for web fonts and
browsers is still getting refined.
2:42
The latest versions of Safari and Firefox
automatically enable kerning.
2:47
Whereas other browsers need some help from
CSS to enable it.
2:52
Let's look at how.
2:55
Here, we have Elliot Jay Stocks' article
on Advanced web typography: Kerning.
2:57
You can read it and get more of a feel on
where the web is at for kerning today.
3:02
But what we want right here is the code to
paste into our CSS to enable kerning.
3:06
And all these prefixes are necessary for
more browser support.
3:12
So what we want to copy here is this code.
3:15
And I'm not going to be grabbing the text
rendering optimized legibility up there,
3:17
because it's known to have some issues.
3:22
And I'm going to go back to our style
sheet and
3:24
paste it in the body tag of our CSS.
3:26
We'll save that and check it out.
3:30
So what I want you to notice here is this
WA.
3:33
That letter combination is prone to have a
lot of space in between it.
3:36
This is going to be a minor adjustment, so
pay close attention as I refresh it.
3:39
That was a very slight change in this
typeface.
3:44
But in other typefaces, the lack of
kerning can be more noticeable.
3:46
If you want more control over kerning,
then check out letteringjs.com.
3:50
It gives you control over each character
so you
3:54
can kern type manually with letter spacing
or just give it any effect that you want.
3:58
This is great for getting big display type
exactly how you want it.
4:02
But it wouldn't make sense to use with
Body Copy.
4:06
So, letterspacing affects the spacing of
the text as a whole.
4:08
Whereas kerning deals with the space
between specific pairs of letters.
4:14
Now, let's move into talking about
ligatures.
4:18
Ligatures improve the appearance of text
for letters that are too close together.
4:22
They create a smooth transition between
letters by
4:28
connecting certain character combinations.
4:30
They can also give the text a nice touch.
4:33
Ligatures are mostly found in serif and
4:36
script typefaces because they aren't as
necessary in sans serif.
4:38
So just because a typeface does not have
ligatures,
4:42
does not mean it's a bad typeface.
4:45
In order to utilize ligatures, you'll need
a typeface or web font that supports them.
4:49
Typeface specimen images will often
showcase them.
4:53
Or you can look through the character map
or
4:56
info on a typeface to see if they're
available.
4:58
[SOUND] If you've chosen a web font that
has ligatures, then you can turn them
5:01
on in your CSS through the font feature
settings property by typing liga, here.
5:07
You would also want to do that with the
proper code for
5:14
each of these vendor prefixes.
5:17
But I'm not gonna do it since the
typefaces we've chosen actually don't have
5:18
ligatures, so this is not necessary.
5:22
But I wanted to give you a feel for
5:24
how to use them if your web fonts do have
them as they can really enhance a design.
5:26
If the browser doesn't support font
feature settings,
5:31
then the font falls back to its regular
character combination,
5:34
which is great as a back up for serifs or
sans.
5:37
In Scripts, this can be a little less
ideal because they
5:41
often rely heavily on ligatures to connect
characters.
5:44
So you might end up with a few
disconnecting characters.
5:48
As web standards move forward, support for
ligatures will be a no brainer.
5:51
For this next section of the lesson, we'll
look at an array of best practices.
5:55
One, pay attention to orphans, widows,
rags and rivers.
6:00
We looked at orphans earlier, but their
counterpart, widows,
6:05
can also interrupt reader flow and impair
readability.
6:08
Widows are a single line of text that
flows over to another column.
6:11
Hopefully we'll have more control through
CSS in the near future to handle these.
6:16
We're also able to justify type through
CSS.
6:20
But this can create large, unsightly gaps
throughout a paragraph.
6:23
These are referred to as rivers because
the end
6:28
result might look like several rivers of
white space flowing throughout the text.
6:31
Controlling rivers is pretty difficult
with the current tools we have now.
6:36
So a simple left align often seems the
best way to go.
6:40
Left align text can sometimes create rags
on the right side,
6:43
which are uneven gaps often caused by long
words.
6:48
Minor gaps are expected, but gaping holes
should be taken into account.
6:51
There's really no easy way to prevent
them, but
6:55
we can sometimes avoid them by adjusting
font sizes and line length.
6:58
Just don't let the markup get out of hand
by adding a bunch of BR tags everywhere.
7:03
[SOUND] Two, use smart quotes and other
proper entities.
7:07
HTML cannot render smart quotation marks,
en or
7:11
em dashes and other special characters.
7:15
On top of that, most wizzy wig web editors
default to straight quotations.
7:18
Instead, we'll need to insert these
character codes
7:23
using HTML character enmities.
7:26
A smart quotation mark is a curly quote,
not the set of straight quotes,
7:29
which is the default in HTML.
7:33
Notice how open and close quotes are
different.
7:35
The proper way to handle this, is to open
the left side with
7:38
“ and close the quote on the right
with ”.
7:41
[SOUND] If you need to interrupt text, do
not use a hyphen.
7:49
Instead, use the correct HTML entities for
en or em dashes.
7:54
[SOUND] For example, en dashes are a bit
longer than hyphens and
7:59
are used to indicate a range of time or
numbers, like one through ten.
8:03
Em dashes are even longer-and indicate a
break in thought.
8:08
Also, instead of using three periods,
8:12
place proper ellipsis in the text with the
correct entity.
8:15
And the same goes from ampersands.
8:18
For a list of other common entities, like
ampersands or
8:21
ellipses, take a look at entitycode.com.
8:24
Three, create even alignment for
quotations and lists.
8:29
Now we're going to talk about hanging
punctuation,
8:33
like quotation marks and lists.
8:35
Hanging punctuation requires characters to
be positioned outside the margin edge.
8:38
This is commonly used for
8:42
pool quotes and bulleted lists to create
an even visual edge.
8:43
For example, hanging quotes keep the left
alignment balanced, so
8:48
it increases readability in a text.
8:52
A quotation mark that is flush with the
text,
8:54
like we see here, can interrupt the left
margin and
8:57
disrupt the rhythm of the reader compared
to the one that is not.
9:00
To keep quotation marks clear at the edges
of surrounding text,
9:05
we can give the text a negative text
indent value in the style sheet.
9:08
Support for a hanging punctuation property
in CSS should be coming soon.
9:12
For now though, we can use negative text
indent values or
9:17
negative margins to achieve the desired
effect.
9:19
We also have the option to hang the list
markers in list.
9:23
This can help the flow of text, because
the margin edge is well defined and
9:27
continuous compared to one that is
indented.
9:31
Either one is acceptable.
9:34
So, it's really up to us to go with what
feels right.
9:35
Text and list items should be consistently
aligned.
9:38
If a list item runs more than one line of
text and isn't aligned well,
9:42
then reading flow can be interrupted
because our eyes look for straight lines.
9:46
With CSS, make sure the list markers are
away from the edges of the text.
9:50
This will make for a much cleaner reading
experience.
9:55
Four, utilize icon fonts.
9:58
Icon fonts or icons or pictograms that
would normally implemented as an image or
10:01
a vector file but are converted into a
font instead.
10:07
Icon fonts can speed up our design process
and
10:10
can significantly improve site
performance.
10:13
They can load as much as 14% faster than
images and
10:16
can be up to 90% smaller than SVG files.
10:20
They allow us to size them at any scale
without losing quality,
10:23
making them crisp at any resolution.
10:27
Some popular sites that offer icon fonts
are symbolset.com, pictos.cc,
10:30
and icomoon.io.
10:35
You can call these in a similar way to web
fonts through the @font-face rule in CSS.
10:38
And these sites will give you code and
instructions on how to utilize them.
10:43
So finally, what's in store for the
future?
10:47
Well, open type features are still making
their way to the web.
10:50
Many extra font features, like swashes,
stylistic alternates for
10:54
letters, different styled numbers and more
can all be part of one font file.
10:59
Some of these can be accessed through the
font features settings property in CSS.
11:05
But again, browser support for
11:09
that property is a little lacking at the
time of this recording.
11:11
Keep an eye out for greater support for
11:14
those features, as they give you a lot
more control over your type and designs.
11:16
Viewport Width or VW and Viewport Height
or
11:21
VH are units of measure in CSS that are
growing in browser support.
11:24
They're extremely powerful for responsive
design as they
11:29
automatically resize type based on how
high or wide the screen size is.
11:33
For example, in our workspace, we could
set our H1 font size to be 10VW.
11:39
I'll save and refresh it.
11:43
Notice that our type has changed a little.
11:46
But watch as we resize the browser.
11:48
The type is shrinking as the browser width
changes.
11:50
This is incredibly powerful, and it works
in a similar way to
11:52
the fit text JS plugin we looked at in the
responsive typography stage.
11:57
I believe Viewport width and Viewport
height will be game changers on how we
12:02
handle responsive typography, especially
for headlines.
12:06
For more on what we can expect down the
road, check out the articles and
12:09
the teachers notes under the Future of Web
Typography.
12:13
All right.
You've made it.
12:17
Great work.
12:18
You've completed this stage,
12:19
which concludes the learning section of
our web typography course.
12:20
In the final stage, we'll get how to apply
all this in a project where we
12:24
create a one page typographic site.
12:28
I'll see you then.
12:30
[BLANK_AUDIO]
12:31
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