Adding Font Features

[00:00:00]
>> Jason Pamental: Okay, so the way I set these pages up in part seven is, I've been sort of adding in some details with each one. So we'll start with opening up index-01. In this one, it's a little basic. We don't have the shape, we don't really have a whole lot of differentiation or scaling going on with the style.

[00:00:24]
But we do have initial cap, we have a maximum width on here. And I wanted to zoom in on the word flagon, so we can see that we do not have any ligatures showing up here. So let's take a look at that CSS, and see what's going on.

[00:00:50]
>> Jason Pamental: So the things that matter here, we've got hyphens set to auto, so we have hyphenation. But we don't really have anything else, in terms of refining what's going on with the paragraphs. We don't have any scaling going on, we just have one set size for the headings, nothing's really being added to that.

[00:01:15]
>> Jason Pamental: We do have a couple things in here. So I used the section-end pseudo-element to add that little section divider. Here's an example of going into the article-detail, going to the first paragraph, first line, that's how we're styling that. And so this is coming, the,
>> Jason Pamental: It should be that first paragraph right here.

[00:01:48]
But I think, all I did was change it to a typeface that's not being loaded, that would be why. So let's see what happens when we do font-weight,
>> Jason Pamental: There we go, so this is using Plex, so it's not a variable font in here. So I can't specify a number, I just had to use the keyword there.

[00:02:13]
But that's something that will automatically work, even as things re-wrap, it's only going to select that first line. So it's a nice little touch that you can add to highlight something, without really having to add anything in overt. Likewise, we also have article-detail. Now, I've scoped this to whatever I have set as the initial paragraph, so that way, I can add that class if I want to.

[00:02:45]
I could just leave it so that it's only going to get the first-of-type:first-letter in that initial first paragraph. And that lets us do whatever we want to style that letter. And we're floating it to the left, we're setting some padding, changing the typeface, setting the font size, and margin, and line height.

[00:03:06]
So all of those things are intended to give us this effect of getting it about three stories high. You can see the alignment isn't quite what we wanted to be. That's something that probably needs to be fiddled with a little bit, but it's all pretty close. But it's still just not, it's not really refined, it's not getting all the niceties that we might like to see.

[00:03:31]
So if we take a look at index-02, you can see, this is now bringing in the typeface, it's gone from Plex to Amstelvar. And if we take a look, we still don't have the shape wrapping, we don't really have too much else. So here with Plex, the ligatures are on by default.

[00:03:56]
So now I can go back, and I can show you what the CSS looks like to turn those on or off. That's what I was trying to find, to show you, there we go. See how we have font feature settings, ligatures and kerning? So if I,
>> Jason Pamental: Inspect this, I want to be able to show you this kind of in-line, so we can see this a little more easily.

[00:04:33]
I can disable that, and it's still here, that's because in the font, they've encoded it to be on by default. So instead, what I can do, if I just didn't want to have that feature available? I can force those values to zero, and see those letters just separated.

[00:04:53]
So if I toggle that on and off, you can see the difference. Some languages don't, like in German, I guess, they just don't use ligatures. So there are reasons that you might want to turn these things on and off. This has an extended character set that could be used on a German website, and it would be inappropriate there.

[00:05:17]
Because it would be using ligatures where they are not supposed to be, in German. So it's important to be able to know how to control those things. And this is how, using font feature settings, you can force those things to be on or off.
>> Jason Pamental: So one of the things that I mentioned earlier, in terms of discovery, for kind of figuring out what's available in a given typeface, and,

[00:05:45]
>> Jason Pamental: So my friend, Roel Nieskens, worked on this, what I wanted to do was actually grab one of these.
>> Jason Pamental: There we go, so it's done a little quick analysis. It's all client-side JavaScript, so your font file isn't going anywhere. And it lets me know how many characters there are, how many different glyphs.

[00:06:12]
How many layout features, what's the file size, the format? And it tells me all of these things that are available, these are all OpenType features. So we've got contextual alternates, we've got fractions, ligatures, numerals, and ordinals. We've got different kinds of alternates, stylistic sets. A whole bunch of things that mean a lot more to type nerds than they do to normal people, perhaps.

[00:06:43]
But they are important for accessing the full range of characters. The ones that we might typically use would be things like kerning, fractions, ligatures. Being able to set the different kinds of number styles. So if you're familiar with seeing numbers that kind of have an uneven height, it's called an old-style numeral.

[00:07:07]
They're meant to mix in with mixed-case text. So numbers in-line look a little bit nicer, when they have almost an upper and lowercase ascender or descender kind of alignment. That doesn't look so great when you're trying to line up some stuff in a financial statement, that's where you might want tabular figures.

[00:07:25]
Or if you're having things that are, maybe a stand-alone, you want lining figures, that all line up, but they still have proportional spacing. Tabular figures are great for financials, because everything will line up, it's like a monospace for numerals. Most of these typefaces actually have all those number styles available.

[00:07:46]
You can only access them by using the OpenType features and font feature settings. So this one does have a couple different number styles. It has a bunch of stylistic alternates, and fractions, and ligatures, and stuff like that. So it's really nice to be able to have those features, not all of them will be on or off, you might not know they're here.

[00:08:07]
So using a tool like this, take any typeface, drag the font file onto the page, and it gives you a whole slew of information, of layout features, type tests. It lets you see what all of the alternate characters are in here. Plex was designed to be used with IBM all over the world, so it's a very complete character set.

[00:08:29]
That's why there's over 700 different characters in it,
>> Jason Pamental: And all of these things are pretty easy to access. So the fractions would be one that would be useful in what we're doing. So if we took a look at this page, and let's take a look at the text.

[00:08:50]
And go back into,
>> Jason Pamental: index-plex-rwt, and let's just go to that first paragraph.
>> Jason Pamental: We'll say it's a fragrant 1/2 metaphor.
>> Jason Pamental: If we go back,
>> Jason Pamental: And,
>> Jason Pamental: So clearly, fractions are not on by default, so let's go take a look at our CSS. And we go in here and,

[00:09:39]
>> Jason Pamental: All we do is add that, go back over here. And because I had browser sync running, there's our proper fraction. We didn't have to do anything else to it, we just needed to know the feature was there. So this is your best friend if you're making a recipe website, or if you simply want your type to look nice.

[00:09:58]
So knowing those things there is half the battle. And then starting to find each of those little features, and layer them in, in a way that lets you build up this typographic system, in a way that's sustainable. So imagine this is in a blog, or WordPress, or Drupal, or some other content management system.

[00:10:16]
We're not asking people to add any classes, just go write a story, it just works. The first letter is gonna be a drop-cap, the first line's gonna be bold. Any time you put a fraction in there, it's just gonna get converted automatically. So it makes it much more sustainable as a typographic system.

[00:10:33]
You know that it's going to maintain its sort of proper look over time.