Editorial Design with Variable Fonts

[00:00:00]
>> Jason Pamental: So there's one more example that I wanted to show. And this is also one of the pages that you have in here. This is, again, trying to get the most variation out of the typographic system. But also think about some editorial and art direction that you might see in a publication.

[00:00:18]
So looking at this page, you might think okay, it's nothing groundbreaking but sort of a typical outdoorsy, blog, news media kind of site, that's fine. It's nice to load a photo, but you might have a storyline to go with it. So you might design it to have the headline layer over it, and then put a little bit of a faded drop shadow on there just to kinda pull it away from the background a little bit.

[00:00:50]
Again, it's nothing new here, every website in the world is doing something like that. That's not what they would do in a magazine though, in a magazine it might look a little bit more like this. But this is a webpage, and it really wasn't that hard to do.

[00:01:05]
So this is just, again, layering some techniques. We have the background photo. I took that photo into Photoshop, and I just erased the skyline around the rocks, saved it as a PNG with transparency. So we have a background photo, layer of text, and then the transparent ground image on top of it.

[00:01:28]
Now, obviously file size is a concern, so you have to be careful how you think about how you put this stuff into practice. But, watch how it scales.
>> Jason Pamental: So you can see this was all done with two font files to get all of that variety in the text styles.

[00:01:51]
And then watch what happens when that main element scales. Because they're all three separate elements, just by scaling the text and just changing the font variation properties, it keeps everything really readable. But it creates a really nice editorial effect that's unlike pretty much anything that you're gonna see on the web right now.

[00:02:12]
I've never run across a site that's doing anything like this. But you see this in magazines all the time. So it's a really nice impact. You want it to be a sustainable thing, so two file uploads and a text field, that's pretty sustainable. And what designer doesn't know how to use Photoshop?

[00:02:32]
That's really all it takes. So I mean, this is actually something that I think could really be put to good use. Again, layering these techniques to take things past where we are now, make websites interesting. Make the design something more than a bunch of scaling cards. I think we can do a lot more.

[00:02:50]
We just really have to stop and think, how would this work, then how would it work in a system? How do we break it down into components that are sustainable and easy to use, and then still give the right control? So we'd probably want to have some typographic controls for that headline.

[00:03:07]
We wanna be able to differentiate it a little bit. If you look at a publication and look at six issues of that publication, study how they put those photos together with the text. They're going to have certain ways that they go about it. Different weights, different widths, different techniques for shadowing, all of those things are rules that you can decode.

[00:03:30]
Again, it doesn't matter if you have a design background or not. It's just knowing what to look for in type pairing, in editorial design techniques. You know how to research, it's just go and take a look, see systematically how they go about doing some of these ideas. And then, knowing what you know about CSS Grid, about variables, variable fonts, calculations, what are the different techniques that you could layer together to create this much more interesting approach that's still a sustainable practice?