Responsive Type Overview

[00:00:00]
>> Jason Pamental: We're gonna get into a little bit of typography 101, responsive typography. What exactly are variable fonts and what's the status of them, and when can we start playing around? Performance, proportion, polish, all aspects of implementing web fonts well. And then I've got some really new stuff. And that's the part that I'm really excited about for people who are really into what are the latest things in front end and HTML and CSS.

[00:00:29]
And we're gonna not just play with variables, but we're going to with variable fonts. We're gonna use CSS variables. We're gonna use calculation. We're gonna do some pretty cool stuff that I think you'll agree when you see it all together, adds up to way more than the sum of its parts.

[00:00:44]
And there's a lot of really interesting things coming along in the world of CSS that really gives us a tremendous amount of control and flexibility. And then again try to look at some of those finer details, and different ideas that we can bring to the project to create a greater sense of differentiation, both in visual hierarchy on the page but also between what you're working on and what anything else looks like that we see on the web.

[00:01:10]
So responsive typography in a nutshell. When I wrote the book, there are really sorta four main areas that I wanted to focus on, performance really being one of the most important. And I say it's the most important not because, as a designer, I think it's more important than the aesthetics, but it's the objection that keeps us from using fonts in the first place.

[00:01:37]
So if we don't deal with performance then we don't get to play around with the design. And that's understandable because you don't really have a lot of time before people bail. And so, we don't wanna introduce any barriers to content getting on screen. And we also wanna think about not just what you're loading and how much but how you're loading it.

[00:01:57]
Because that can make a big difference if you worked a lot with JavaScript, you know that there's defer, there's async, there's different strategies that you can put in place to make sure that the content can render quickly and then other stuffs comes in. And that's just a natural part of the web.

[00:02:13]
I wanna make sure that we embrace that. We also wanna ensure that we're not leaving devices behind. So we're talking about really cutting edge stuff with variable fonts, but even just web fonts themselves. There are about 400 million Opera Mini devices in the world that don't support web fonts at all.

[00:02:33]
You also have the condition of web fonts not being supported because you're on the subway, because you're out in the country. For me, if I'm on the commuter rail between Providence and Boston, there's at least three or four places where a signal drops out entirely. So if you haven't implemented web fonts correctly, someone might not get content at all.

[00:02:54]
So we wanna make sure that we embrace flash on style text. In fact, we lean into that and consider that the standard. That's actually what we want and there's a few different ways that we can help trigger that in order to get the content on screen but do so in a way that will still provide a solid experience.

[00:03:15]
Proportion is a big thing. This actually was one of the most central elements to my book when I kind of rejiggered the whole thing around this notion of responsive typography. You don't need to have a heading as big as you would have it on the desktop on a small screen, it's really ungainly, it's hard to read, it wraps really poorly and you still just need hierarchy, it just doesn't need to be as exaggerated, so on a small screen, we wanna make sure that we scale the proportion of headings and body copy.

[00:03:49]
And then make sure it still works well and gets the attention it needs once you get back to a big one. I really like the phrase design is the details. Because there are lots of frameworks out there and this is not to pick on Bootstrap but if you simply create a site, pull in the Bootstrap library, you will have a reasonably competent looking project.

[00:04:12]
I mean that's fair, and it's not necessarily what I think of as great design but it brings everything up on an even playing field. It keeps thing in a sort of an orderly manner. Things will reflow pretty well, but it's not the details that will set it apart.

[00:04:34]
There are 1 million other sites out there that look just like Bootstrap out of the box. So that's not a good way to differentiate what your work. So we're gonna concentrate on what are the small details that will really start to set your work apart. So those things taken together, I think are kind of at the heart of what I'm referring to when I say responsive typography.

[00:04:55]
And we'll get a chance to see how the type plays into that. But this is a little precursor to getting into performance, and this is still a pretty common thing. That screen on the right sometimes is what people see for 5, 10, 15 seconds, on a slow network connection waiting for web fonts to load.

[00:05:22]
And then, finally, you get content. You'll notice the one on the left, you could read the whole time, because it was set up so that it would automatically go to the fallback font right away, and then flip over to the web fonts once they load it. So it's not blocking page render and it's not blocking the user from interacting with content.

[00:05:43]
So those are the kinds of things that we want to lean into. Now, for what I was talking about with proportion, if we look at this design here, you can see that that top level heading, A Whale of a Tale, is quite a bit larger than body copy.

[00:05:59]
But if you look at that on tablet and then on the phone, it's proportionally getting smaller, but it's still very clear what the most important piece of information is. So that's what I'm talking about looking at the proportion and creating this sorta sliding scale that will ensure that you still have the appropriate level of importance that's being conveyed.

[00:06:22]
It's an H1, it's supposed to be the most important thing on the page, but you wanna make sure that it's not huge, pushing everything down and out of the way, wrapping poorly, breaking words. Those kinds of things I see all the time, even today. I mean this is not new.

[00:06:41]
I wrote about this five years ago. And there's still a lot of people that haven't really thought this all the way through. As a matter of fact, looking at styleguides.io, which is a great resource for looking at design systems, I found two design systems on the first page or two of results that actually had a type system that scaled with screen size.

[00:07:03]
And these are very large corporations. So it's still something that is not on the minds of everybody that it needs to be. So when you are thinking through a design system, that's the perfect time to think through, how old this moving scale, because if you fix it there then it gets fixed everywhere you apply that system.

[00:07:24]
So it's really important to keep that stuff in mind. Now there's lots of interesting techniques that we can do with CSS that really draw strong parity with what we can do in print. Large initial capitals, breaking things into columns. Making sure that things reflow nicely when the screen gets smaller.

[00:07:45]
It's an interesting thing right now. We can actually achieve more typographically on the web in some cases than we can in print. Especially with variable funds because we can actually take advantage of that stuff far more easily in print than in most applications for a desktop right now and there's some really interesting things about fine typographic details that are just not possible with any other technology right now.

[00:08:14]
The future of this is stuff that we're going to look at today, and then it's some stuff that you can use, and some things that are coming. And we'll look at ways that you can start to integrate that into how you're working, so you can do this in a sorta safe and production ready manner.

[00:08:33]
Variable fonts, more modern elements in CSS. We're gonna look at even more interesting things that are coming along with performance. And really kinda getting beyond just the basics of dropping in a line of CSS and forgetting about it.