All right. We're in the home stretch.

In the final video of this stage, we'll get a few things that can give your

typography extra polish, along with some features to expect for the future.

Knowing how to properly use these techniques can set apart your designs, and

create lasting impressions on the reader.

First, we'll look at letterspacing and kerning.

Then, we'll jump into ligatures.

After that, we'll go through an array of best practices.

And finally, we'll look ahead for what's in store.

Although commonly confused, letterspacing and

kerning are two different techniques when it comes to typography.

They both deal with the space around letter forms but in different ways.

We'll examine each one along with general rules of thumb for both.

Letterspacing, also known as tracking, pertains to

the amount of space between every character in a particular block of text.

You could increase or

decrease the amount of letterspacing which will affect the text as a whole.

For example, in CSS, we could set the letterspacing of our

main title to be greater or less than the font's normal spacing.

So for greater, we'd add a value like 0.03m.

We'll save and check it out.

Notice how every space between each character is effected and is loosened up.

Now let's change that value to be a -0.03m.

Let's save and check that out.

All right.

Notice now how the spacing between every letter has been tightened up.

And I actually prefer this entire letterspacing for

our title as compared to the normal letterspacing.

Notice how tighter letterspacing will result in a heavier feel.

Whereas looser letterspacing gives a lighter, airyer look.

General rules of thumb are,

one, headings can usually use a little tighter letterspacing.

Two, do not letterspace body copy unless it's absolutely necessary to

aid legibility.

And three, don't letterspace your type out too much, as words and

spaces will get muddled.

Now, let's look at kerning.

Kerning deals with the amount of space between a specific character combination,

rather than the spacing of a whole body of text.

In a typeface, a type designer sets a space for the left side of a letter and

the right side of a letter, so

that it works best with all the other letters and their spacing.

Certain character combinations can come up that are either too far apart or

too close together.

These include AV, WA or TA.

With kerning, character pairs are adjusted to

be evenly spaced with the rest of the typeface.

Most typefaces now have kerning built in.

But kerning support for web fonts and browsers is still getting refined.

The latest versions of Safari and Firefox automatically enable kerning.

Whereas other browsers need some help from CSS to enable it.

Let's look at how.

Here, we have Elliot Jay Stocks' article on Advanced web typography: Kerning.

You can read it and get more of a feel on where the web is at for kerning today.

But what we want right here is the code to paste into our CSS to enable kerning.

And all these prefixes are necessary for more browser support.

So what we want to copy here is this code.

And I'm not going to be grabbing the text rendering optimized legibility up there,

because it's known to have some issues.

And I'm going to go back to our style sheet and

paste it in the body tag of our CSS.

We'll save that and check it out.

So what I want you to notice here is this WA.

That letter combination is prone to have a lot of space in between it.

This is going to be a minor adjustment, so pay close attention as I refresh it.

That was a very slight change in this typeface.

But in other typefaces, the lack of kerning can be more noticeable.

If you want more control over kerning, then check out letteringjs.com.

It gives you control over each character so you

can kern type manually with letter spacing or just give it any effect that you want.

This is great for getting big display type exactly how you want it.

But it wouldn't make sense to use with Body Copy.

So, letterspacing affects the spacing of the text as a whole.

Whereas kerning deals with the space between specific pairs of letters.

Now, let's move into talking about ligatures.

Ligatures improve the appearance of text for letters that are too close together.

They create a smooth transition between letters by

connecting certain character combinations.

They can also give the text a nice touch.

Ligatures are mostly found in serif and

script typefaces because they aren't as necessary in sans serif.

So just because a typeface does not have ligatures,

does not mean it's a bad typeface.

In order to utilize ligatures, you'll need a typeface or web font that supports them.

Typeface specimen images will often showcase them.

Or you can look through the character map or

info on a typeface to see if they're available.

[SOUND] If you've chosen a web font that has ligatures, then you can turn them

on in your CSS through the font feature settings property by typing liga, here.

You would also want to do that with the proper code for

each of these vendor prefixes.

But I'm not gonna do it since the typefaces we've chosen actually don't have

ligatures, so this is not necessary.

But I wanted to give you a feel for

how to use them if your web fonts do have them as they can really enhance a design.

If the browser doesn't support font feature settings,

then the font falls back to its regular character combination,

which is great as a back up for serifs or sans.

In Scripts, this can be a little less ideal because they

often rely heavily on ligatures to connect characters.

So you might end up with a few disconnecting characters.

As web standards move forward, support for ligatures will be a no brainer.

For this next section of the lesson, we'll look at an array of best practices.

One, pay attention to orphans, widows, rags and rivers.

We looked at orphans earlier, but their counterpart, widows,

can also interrupt reader flow and impair readability.

Widows are a single line of text that flows over to another column.

Hopefully we'll have more control through CSS in the near future to handle these.

We're also able to justify type through CSS.

But this can create large, unsightly gaps throughout a paragraph.

These are referred to as rivers because the end

result might look like several rivers of white space flowing throughout the text.

Controlling rivers is pretty difficult with the current tools we have now.

So a simple left align often seems the best way to go.

Left align text can sometimes create rags on the right side,

which are uneven gaps often caused by long words.

Minor gaps are expected, but gaping holes should be taken into account.

There's really no easy way to prevent them, but

we can sometimes avoid them by adjusting font sizes and line length.

Just don't let the markup get out of hand by adding a bunch of BR tags everywhere.

[SOUND] Two, use smart quotes and other proper entities.

HTML cannot render smart quotation marks, en or

em dashes and other special characters.

On top of that, most wizzy wig web editors default to straight quotations.

Instead, we'll need to insert these character codes

using HTML character enmities.

A smart quotation mark is a curly quote, not the set of straight quotes,

which is the default in HTML.

Notice how open and close quotes are different.

The proper way to handle this, is to open the left side with

“ and close the quote on the right with ”.

[SOUND] If you need to interrupt text, do not use a hyphen.

Instead, use the correct HTML entities for en or em dashes.

[SOUND] For example, en dashes are a bit longer than hyphens and

are used to indicate a range of time or numbers, like one through ten.

Em dashes are even longer-and indicate a break in thought.

Also, instead of using three periods,

place proper ellipsis in the text with the correct entity.

And the same goes from ampersands.

For a list of other common entities, like ampersands or

ellipses, take a look at entitycode.com.

Three, create even alignment for quotations and lists.

Now we're going to talk about hanging punctuation,

like quotation marks and lists.

Hanging punctuation requires characters to be positioned outside the margin edge.

This is commonly used for

pool quotes and bulleted lists to create an even visual edge.

For example, hanging quotes keep the left alignment balanced, so

it increases readability in a text.

A quotation mark that is flush with the text,

like we see here, can interrupt the left margin and

disrupt the rhythm of the reader compared to the one that is not.

To keep quotation marks clear at the edges of surrounding text,

we can give the text a negative text indent value in the style sheet.

Support for a hanging punctuation property in CSS should be coming soon.

For now though, we can use negative text indent values or

negative margins to achieve the desired effect.

We also have the option to hang the list markers in list.

This can help the flow of text, because the margin edge is well defined and

continuous compared to one that is indented.

Either one is acceptable.

So, it's really up to us to go with what feels right.

Text and list items should be consistently aligned.

If a list item runs more than one line of text and isn't aligned well,

then reading flow can be interrupted because our eyes look for straight lines.

With CSS, make sure the list markers are away from the edges of the text.

This will make for a much cleaner reading experience.

Four, utilize icon fonts.

Icon fonts or icons or pictograms that would normally implemented as an image or

a vector file but are converted into a font instead.

Icon fonts can speed up our design process and

can significantly improve site performance.

They can load as much as 14% faster than images and

can be up to 90% smaller than SVG files.

They allow us to size them at any scale without losing quality,

making them crisp at any resolution.

Some popular sites that offer icon fonts are symbolset.com, pictos.cc,

and icomoon.io.

You can call these in a similar way to web fonts through the @font-face rule in CSS.

And these sites will give you code and instructions on how to utilize them.

So finally, what's in store for the future?

Well, open type features are still making their way to the web.

Many extra font features, like swashes, stylistic alternates for

letters, different styled numbers and more can all be part of one font file.

Some of these can be accessed through the font features settings property in CSS.

But again, browser support for

that property is a little lacking at the time of this recording.

Keep an eye out for greater support for

those features, as they give you a lot more control over your type and designs.

Viewport Width or VW and Viewport Height or

VH are units of measure in CSS that are growing in browser support.

They're extremely powerful for responsive design as they

automatically resize type based on how high or wide the screen size is.

For example, in our workspace, we could set our H1 font size to be 10VW.

I'll save and refresh it.

Notice that our type has changed a little.

But watch as we resize the browser.

The type is shrinking as the browser width changes.

This is incredibly powerful, and it works in a similar way to

the fit text JS plugin we looked at in the responsive typography stage.

I believe Viewport width and Viewport height will be game changers on how we

handle responsive typography, especially for headlines.

For more on what we can expect down the road, check out the articles and

the teachers notes under the Future of Web Typography.

All right. You've made it.

Great work.

You've completed this stage,

which concludes the learning section of our web typography course.

In the final stage, we'll get how to apply all this in a project where we

create a one page typographic site.

I'll see you then.

[BLANK_AUDIO]