Variable Font Demonstration

[00:00:00]
>> Jason Pamental: This is another example. This is one that I gave you a link to and it's also in this project. This is the one, the page I designed for monotype. And this one is playing around with a single font, regular italic, and a weight range that goes from 100 to 900.

[00:00:22]
>> Jason Pamental: And I'm using almost all of those throughout this. So what I wanted to point out here is that going from that 100 weight all the way to 900, by also then playing with the font size, you can still make something very readable by just making it really big.

[00:00:41]
So you can really create a lot of strong variation and kind of visual dynamics just by varying the weight and the size. That scale change really can vary the design and the feeling of it. And when you see this in code, you'll see that it actually does scale really nicely down onto the small screen as well.

[00:01:01]
So in this design I was working through, they've got some ligatures here and kerning. We've got a lot of different weights. We've a got little different techniques in here, where I've got the large initial capital. The first line of the paragraph is slightly heavier, so it's slightly bolder than the text around it.

[00:01:21]
We have a big pull quote down here that's set in italics, much larger and much lighter. It also does things on the screen. When it gets smaller, it makes that really lightweight text a little bit heavier, because as that scales down in font size, it actually gets a little bit harder to read at that 100 weight.

[00:01:40]
But I'm able to bump it to just 150 or 175 rather than having to go up a substantial weight. And visually it still looks pretty much the same, still has that same kind of feeling. So I've tried to layer in as many different typographic techniques as I can here just to sort of show how much we can do in pixels, similar to the kinds of things that we would do on paper.

[00:02:07]
>> Jason Pamental: So let's take a look at some of those details in action. I wanna show you again this page with Plex.
>> Jason Pamental: This one, I've kind of removed all of the scaling, so you can kind of see how well or poorly this behaves when you don't have any of that modular scale built in.

[00:02:31]
But if I load up a page from the next section, this is one where I've added the pixel values in, so this is not using the formula. If you take a look at the 06-plex-styles-rwt versus the 05-plex styles, this one is really simple. It just has one font size, it doesn't change.

[00:03:03]
If we look at the one that's set up to deal with the scaling, you can see that there's a lot more to it. There are breakpoints here that are affecting the line height and font size, and it's also dealing with all of the inactive classes as well. So that way, it's trying to factor in the loading process across any device.

[00:03:27]
So when we look at that in the browser and turn stuff on and off, it's pretty close. And it stays pretty close even as you get into a smaller screen, but you can see everything's kinda scaling down. And you can see the negative margin is gone here. Whereas on a larger screen where I know that I have the room, this actually kinda sticks out, and creates a little bit more of an editorial effect.

[00:03:56]
And that's all using CSS shape-outside, which is a really nifty little property. And just in the CSS I define a polygon around the glass, so that way the text will wrap around it. And it gives it a little bit more of an interesting kind of polished look, more like you'd see in a magazine.

[00:04:18]
>> Jason Pamental: So those two files will give you a sense of going from, the fonts are being loaded well, but we're not really doing anything about scaling them. And then when we do want to scale them, we add in those media queries. We preserve the fallback styling so that stuff comes along with it, and the same thing is happening here when you get into the h1.

[00:04:44]
You see a few different breakpoints where we're changing font-size, max-width, and line-height, and h2s as well.
>> Jason Pamental: So that's using kind of the new old school way. And if we wanna look at sort of the newer new school, we can take a look at another one of the pages in that part six folder.

[00:05:11]
So this is the one that we've been seeing lots of pictures of. This is using Amstelvar. And it's got all of the scaling tricks and techniques in there so everything is animating and changing with optical size. You can see a couple things missing out here, where you are getting some of those collisions here between those letter forms.

[00:05:37]
So that's some stuff that we can improve.
>> Jason Pamental: We're kinda getting ahead of ourselves a little bit though. And then the other one that's in this folder that you can take a look at. Now we can see this working in the browser, and see how this moves and scales as things get smaller.

[00:06:02]
And I set this up to do things a little bit differently, and kind of lighten up this text and just let it flow behind.