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