OpenType Features

[00:00:00]
>> Jason: And again with the OpenType features, wanting to make sure that we make use of this. Again, we'll take a look at some of the CSS to play with the kerning and the ligatures. There's even more that you can do with OpenType features. We'll take a look at what some of those look like.

[00:00:19]
But if you look at this chunk over here on the right, you've got a nice italic, and then it's this recipe where you've got some fractional amounts down there. And that's what we've typically had to do on the web is 1/2, 1/3. It's a little coarse, it doesn't really look quite as refined.

[00:00:39]
Well, as it happens, in CSS if you have that series of characters and you have the OpenType feature enabled, it can look like that. And that's a tremendous difference. That looks so much nicer where you see the true fractions that are in there. We didn't have to add any classes, just if the typeface finds a 1/2 and that feature is enabled, it just replaces it with the proper fraction.

[00:01:08]
So it's really kind of amazing that this stuff is all here. It's been here, in CSS in the specification for years, and there just aren't that many typefaces that support it, and people don't even know that it is there. Axis-Praxis, or another one from my friend, Roel Nieskens, Wakamai Fondue?

[00:01:31]
That's another kind of funny one that I'll pull up in a little bit. That will sort of open the world to you for all the available features in a given type face, and a lot of these things are set to just work with drag and drop. So you go there in the browser, you take your font file, drag it on to the page, and it will do all the analysis and then just spit out a page for you that tells you everything that's there that you can play with.

[00:01:58]
So better blockquotes, multi column layouts, initial caps. All of these things fall back gracefully when they're not supported. All of these things just kind of work when you can turn them on in an automated fashion. Widowtamer is another thing that we we'll look at for fixing that last line.

[00:02:16]
All of these things are what add up to a great experience. No one thing is all a sudden going to make the typography great. It's all of these little details together, and this is the true value with a design system or a starting point. So how many of you tend to work in more of an agency setting or freelance where you're working on different projects one after another?

[00:02:45]
Okay, so we have a few people here. Are you starting from scratch every time? I mean, some people have, a lot of Drupal shops will have a particular starting theme. Lots of people start with Bootstrap or Foundation, other people will start with Pattern Lab. There are lots of different options out there.

[00:03:06]
What I recommend is, create your own typography starting kit, so that way you can bring all of this stuff in and it's just all there. You just bring it into your project and then you start customizing some of those values. And that way, you can fine tune for the specifics of the typeface that you're using, but it also means that you get a jump start on working on all of these details.

[00:03:32]
So you're much more likely to have time to go back and tune up fallback fonts if you don't have to write this stuff from scratch every time.