Editorial Design

[00:00:00]
>> Jason Pamental: One more section that I wanna go through. And this is really looking at the idea of art direction and looking at a couple of these example pages and how some of those things work. And then I'd like to spend some time looking at some real projects with you.

[00:00:32]
>> Jason Pamental: So I think all of the things that we can do with variable fonts and typography. Up to this point are better ways of doing the things that we've been doing. Some of them are pretty significant, I'm not sure it's really transformational except for the fact that we get to access a much broader range of the design space.

[00:00:57]
Because we don't have to worry about only loading two or three files. So I think it's better, but I'm not sure that it's really rising to level of like revolutionizing design, and I do think that the potential with variable funds is to do just that. But that means we have to think a little bit further outside our typical world of web design because I've even seen the former design director from Vox Media say to me why do we need variable fonts because we don't design with more than three or four weights in the first place.

[00:01:37]
Well, you only design with three or four weights of a typeface if that's all you're given. Left up to our own devices, designers are going to use a much broader range because it's more appropriate to the design. It's more readable, it's more clear, it adds greater emphasis where we want it.

[00:01:56]
We have been constrained and we've then let those constraints define the way we think about design. Even for somebody in a position at a major media company who should absolutely know better. And that was really disappointing to me, but it was also really significant because I've had a similar comment from a type designer.

[00:02:15]
And that really threw me. Why would a type designer who is, their business is making this whole range of type for people to work with still fall victim to that same trap of thinking that's what normal should be. That just happens to be what is. So I think the true revolution is actually getting past that looking at what we've been doing in print and what's been so effective.

[00:02:42]
And then, thinking about how we might do these things on the web and take it into a whole new place. So some of those things that I really like about Amstelvar with these extra access for ascender height and descender height, being able to do things like avoid that simply by tweaking the ascenders and descenders.

[00:03:03]
So I want that heavy, thick, setting, having that really solid set to make that headline really have a lot of weight and presence, I just don't want those ugly collisions. It gives me the perfect way to handle situations like that. We can also very easily do things like create a little poll quote builder that allows people to highlight words, change the weight or the width, have it all wrapped in viewport units.

[00:03:33]
So that even when it scales, it actually preserves that same kind of relationship, but makes it appropriate for the size of the screen. So again, that's just layering techniques. It's used in the variable font. Making it easy for people to highlight and just tweak a few things here and there, wrap the whole thing using viewport units so it all scales together.

[00:03:55]
Now, again, the key there is we're aligned on the relative sizing of Ams, but then setting a container using the viewport units so all those things scale relative to each other.
>> Jason Pamental: I wanna talk about media. I wanna talk about newspapers because I think we're at a point in time where there's a real shift in how any of us get news.

[00:04:22]
How many people get an actual paper newspaper delivered to their house or apartment? I get one on Sundays, that's it. And one out of three or four weeks, we actually spend time opening up more than one section to really look at. That's not how we get our news.

[00:04:41]
We get it online. The problem is we've grown up being a constant to the news having a voice from a particular publication that we come to know and trust. So we have visual cues that start to become engrained in our own brains about what does authentic news look like.

[00:05:04]
Because that's how our brains work. We associate aesthetics and familiar visuals as a strong tie to authenticity and trustworthiness. That's just how we work. It's not guess work, it's not psychology, it's just kinda how brains function and that's fine. But that means we're losing an opportunity when you look at their website now, and it looks like this.

[00:05:31]
There's a real difference in hierarchy. Look at all the different levels of typographic hierarchy on that page guiding your eye around, telling you what's the most important story, what's the next most important story. There's a tremendous amount of thought that goes into presenting that. Online, there are exactly two different heading styles, that's it.

[00:05:53]
And if I hadn't cut the ad out of this and brought the content back up, you would have seen that top level heading. The h1 completely buried off the screen. They're lead story, gone. Now how do they typically deal with the lead story when it's a really like a headline like that in print would have been plastered all the way across right under the masthead?

[00:06:18]
That's how they would handle that in print. It would be big, it would be copy fit right edge to edge across the masthead of that page, so that you knew this was a big deal. And we don't have any facility to do that, because on the web we have optimized around any content any time, all the time.

[00:06:38]
So we do the design, we fit any content in it. And we've created this circumstance where we have no ability to actually give voice to a specific story. Well, this is, again, the kinda thing where variable fonts could come in to play, built some type setting tools and do the content management system.

[00:06:58]
Allow people to say, I wanna do something for this headline. Yes, we have a design system for nine out of ten stories, but that tenth story's a big deal and I really wanna make sure that people don't miss it. So I would like to do something specific. So I made a little demo, this is actually using Amstelvar.

[00:07:16]
So I was able to tweak Amstelvar to actually look pretty close to what they actually use in their print publication. Played around with width, played around with stroke contrast, optical sizing, the serifs themselves a little bit and then I used CSS grid and a viewport units. So I created a layout that gives a little bit more flexibility in how you assemble things.

[00:07:40]
And so I would like to add this element here that's going to be spanning across these three grid columns. That's my headline. These things are gonna stack below. And it actually moves and scales pretty nicely. And still kinda maintains that feeling of the print publication without really sacrificing the ability to maintain it.

[00:08:00]
So it's all still things that can be relatively easily built into a content management system. It just requires a little bit of rethinking about the content assembly process which a lot of people are already working on and then adding in a few other tools to specify a piece of text and then tie into tweaking those variations values so that you can fix something in the way you want it to.

[00:08:26]
This is the demo that actually build on Drupal. So this is something that I know can actually work. So a couple people have worked with Drupal in here. Somebody worked with the paragraphs module in Drupal? So it's sort of a familiar concept in a lot of different content management systems now.

[00:08:49]
It's the ability to define a bundle of content. So in this case, the ability to create a component that can have one or more lines of text in it. And what I ended up doing was, defining that line of text as variable font line with the ability to supply the text, to choose one or more variable fonts that I added into the theme.

[00:09:11]
And then little sliders that's just an HTML range input. Nothing fancy there that allows you to tweak the font size, the slant, font weight, crank that all the way over just hit Save and you end up with that. So this was a really simple test just to see how easy you could make this from a publishing perspective.

[00:09:33]
No code is required and it's easy for someone to build up those lines of text. Same concept could be applied to type setting the title itself. So there's really no reason why we can't actually start to build some of these controls to create far greater editorial control. And we can still gate it, we don't have to give those tools to everybody.

[00:09:57]
Every content management system allows you to define roles. You can define a designer role and only give those tools access to people that know how to use them. So we can actually get back to the way we've been designing, really for decades where someone writes the content, somebody edits the content and makes the decision about where it should go, and then a designer lays it out.

[00:10:20]
In this way, the designer can still think about what they wanna do, they're not stuck writing code, you're not breaking the system. If the variable fonts don't load or none of the CSS is put into play, who cares, it's still gonna fall back to exactly what you had before.

[00:10:37]
So this is still a really easy and portable solution. It's not messing with the semantics of the code. But it's creating a much more refined and elevated way of getting that point across to create a more unique voice. So one of the challenges that people have talked about, and I think there's some validity to it, is sliders are not always the answer.

[00:11:03]
So when you have these input element I want to play with this weight, this width. Always having a slider is a little bit coarser, also you're interacting with something here and looking at the text over here that can be a little bit of a mental model challenge that makes it a little harder for people to really get what's going on.

[00:11:29]
Direct manipulation might be a little bit easier. And that's something that these two folks, Hosea and Sahara, demonstrated in type of labs in Berlin back in April. If you see the highlighted red blocks, it's a strap called the cashida, I hope I'm getting that right, in Arabic, that's a connecting stroke.

[00:11:53]
And it's very often made longer or shorter to indicate pacing. So a longer stroke might indicate a pause between phrasing. And then what they've done is actually built an interface that is an access of variation. And that little red box is something you can click and drag. And if they wanna justify the type in that block, they can go to anyone of those red blocks, and just drag it to make that stroke longer or shorter.

[00:12:18]
Direct manipulation of the variation access, I thought that was really interesting so you think about that if we built an interface like that for other aspects. You see the headline and you wanna make a little bit narrow, where you can just go and click on the letters and drag it in a little bit.

[00:12:39]
You're like directly manipulate that text. I think there's some really interesting possibilities there. So I'm not really sure where that's gonna go, and that's kinda what I think is exciting about this time right now, is that we have some of these raw tools. We have the web, we have JavaScript.

[00:12:57]
We have these tools available to us to twist and play and prototype and see what works. That's why I think not only do we have the ability to do some of the best typography available, we also have the ability to build the tools without having to go through this lengthy software development process.

[00:13:18]
That Axis-Praxis website that I showed you, that was put together by my friend Laurence because he wanted to play with variable fonts. So he wrote some JavaScript and he put this thing together, and it's grown over time. So the same thing is true with [INAUDIBLE] website, [INAUDIBLE]. That was put together because he wanted to find a way to understand what's inside a font so that he didn't have to go to a bunch of other different tools.

[00:13:44]
This is a time of discovery and experimentation that's wide open to all of us. If you know how to make something in JavaScript, you can manipulate these values. And we can create any kinda interface we want. We need to experiment and see what really works. Being able to drag and directly manipulate, like imagine if there's an x-height.

[00:14:04]
Cj Dun has a typeface called Dunbar. I actually used that in a lot of the slides. And he has an x-height variation. So the height of the lower case letters. And imagine if you can just click and drag on a little red line like raises and lowers the x-height instead of having to go play with the slider, so you can actually just nudge it to be exactly what you want it to be.

[00:14:27]
I think it's a really interesting, really exciting time to be able to play around with some of these things.