Responsive Typography

[00:00:00]
>> Kevin Powell: Now, I can't get too far into responsive layouts without talking about responsive typography, and like anything else, there's the two approaches. Do we use a media query and just redefine our styles, or do we take an intrinsic approach? This is the easier way, this is the cooler way. So we're going to start with the easy way because it's easy. You just redefine a font-size inside a media query and you're good to go.

[00:00:22]
That's all you have to do. So it's not complicated. In our project, we were using custom properties for our media queries. Luckily, we can redefine custom properties within a media query. So something like this works fantastically well. Outside of the media query are my base styles. You don't have to redefine every one of them. I only need to redefine maybe some of those styles here instead of doing everything.

[00:00:48]
Maybe the base size stays the same, it's just the larger fonts you want to be bigger. That will work. Nobody's, again, not many people resize their browser except for developers, so it just will look good on the different screen sizes and you're fine. If you're working with design files, this is also the easiest way. A designer is going to give you like three sets of font sizes. The easiest way to go about it is just doing it with media queries.

[00:01:11]
Here's just an example of it in action. We can see smaller, bigger, because I hit that breakpoint, so those sizes are getting redefined. Nothing very complicated, and it works really well. If you want to take that approach, lots of websites do this, you're completely fine with that. The intrinsic approach is a bit more interesting. To do that, we generally use viewport units. I mentioned viewport units and said don't use them as a general rule of thumb.

[00:01:39]
Whenever people discover viewport units, the first thing they usually do with them is to use them for font sizes. So I've actually set all my font sizes up with these VIs. A lot of people will be used to seeing VW for viewport width. VI is the same thing, viewport inline, just using the logical version of it. This is one of the reasons we have lots of units, because we have the logical variants for all of our viewport units.

[00:02:00]
The problem with doing this, there's two problems actually. One of them is small screen sizes, things get really, really, really small. And at big sizes, things get really, really, really big because it's matching. It feels cool. You do it and you're like, oh, look at my responsive typography. But again, then you, if you start playing with these values, if you make it bigger at small sizes, it's way too big at big sizes, it's a bit of a nightmare.

[00:02:25]
The other problem is, I'm going to just update this to debug mode. To go to a live version of this demo and the first problem I showed is the annoying part. This part of the problem is why you should never do it, is it's not accessible. I'm zooming in right now, and I'm zooming out, and the font sizes aren't changing size, and I'm getting older now, and I have glasses, I have a big monitor at home.

[00:02:53]
Most websites I go to, I zoom in on now. And if I zoom in on a website and the font sizes don't get bigger, I will probably leave. I'm zooming in because I want it to be bigger. And if you're at a company that has to abide by accessibility laws, which is most companies these days, the WCAG, which I don't remember exactly what it is, but they set the accessibility guidelines that companies do have to follow to be compliant, and font sizes should be able to be zoomed by up to 200%.

[00:03:23]
So if you're using just viewport units, that takes that out, and your website will be considered inaccessible. Now to solve the first part of this problem, we have clamp because we had that problem where fonts were getting either too small or too big. Clamp goes along with the min, the max, some of the math functions that we have. And with clamp, what we can do is, this is the smallest I want you to get, this is how big you are ideally, and this is the biggest that you're allowed to get to.

[00:03:48]
So it stops the fonts from getting too big at big sizes, stops them from getting too small at small sizes, and it allows them to adjust in the middle, which is great. The problem is you still have this middle zone where if a user is zooming in and out, as long as they're not at those extremes, the zoom in and out won't actually do anything. So we can actually do some math in the middle and add a little bit of rem in there, so when they're zooming in and out, it actually does now have an effect on it, because this value will increase or decrease as the user's zooming in and out.

[00:04:21]
I'm not even trying to do this in a demo right now. You could play around with this for sure. I love playing around with these things. The reason I'm not doing it though is to get a full range of typography, where all of your font sizes are working in conjunction using this is really hard. You'll start playing with like, okay, this one needs to be five, this one's 4.2. Wait, now my paragraph's stopped to grow, but my headings are still growing.

[00:04:47]
That's kind of weird and you, it's a really cool thing. One suggestion is just use it for your really big text, so your headings grow and you don't have to use the media query for your smaller text. I've done that a lot. The other suggestion is to use a generator like Utopia. This is what I do on my projects, and what I would suggest that you do as well. It just makes it a lot easier. They have these available not just for type but for spacing and for their grids.

[00:05:13]
So if you want spacing that can adjust on the viewports, you can also use their generator for that, but for now we're just going to look at type. You choose the smallest size of your viewport, the largest size of your viewport, and you give it the base font-size. So it's small sizes, my body's font-size, let's say we want it to be 18, or let's say 16, just play with their generator. And then here their font-size, we're going to say it goes up to 20 as the largest font-size that the body will get to.

[00:05:45]
And that's going to come down here and give you, we'll keep going, a whole bunch of custom properties using clamp with viewport units in there. So you can just copy paste that in and use these sizes for your font sizes. A few important things here on how it's working. You can actually get a preview. They have the graph that shows you how the different font sizes are growing, and the visualizer, so you can actually see the font sizes in action.

[00:06:07]
And you can use your responsive mode to see them growing and shrinking. To get more of an idea here, I'm also going to change the type scale to make it really aggressive. So the type scale means the multiplier for how big the fonts are getting based on that base size. So 1.5 is very aggressive. And if I do that, you can see the step five is very big, but as it gets smaller, it shrinks quite a lot because it's going back down to that 1.2 at the small sizes.

[00:06:36]
We get this responsive typography that works at all these different viewpoints. They do have the warning here from the WCAG that I mentioned before, saying the current settings I have do not allow you to get to that 200% zoom on some of the font sizes that you've chosen, they'll tell you which steps fail, which is really, really cool. The reason that things will fail is if you're using a very big type scale here and a smaller type scale here, you need the relationship to be a little bit closer or you'll get that warning that things are failing.

[00:07:07]
If it's a personal project, maybe you don't mind, but just to keep it in mind. So let's just tone this one down maybe a little bit and increase that one. And I think the warning will be gone. And now we get nice responsive text that's going to work across all screen sizes, and it's super handy. The other thing here is the prefix that the custom properties come with is step, I could come here, let's turn off responsive mode.

[00:07:33]
I could come in here and I could change that. If you're like me and you like prefixing it with font-size, you just do that and now they all prefixed with font-size instead. Copy that, bring it to your project, and you're good to go. So our project could use some responsive text. So, I'll let you bring it in. If you want to use Utopia for this, I would encourage you to do it. I think it's really cool.

[00:07:56]
It's fun to do. Just for simplicity's sake, I am going to just put it in a media query to make it a bit easier for myself right now, but I'd encourage you to play around with it, have some fun, and potentially use clamp or come in with your own clamp values even, just to see how they work. And if you do want to have a starting point for that, as we've seen up until now, it is included for you. So, jumping on over here, as I said, I'm doing it the boring way with media queries.

[00:08:24]
And when I'm doing this on my own, or I haven't even said any, oh we have, sorry, we have our font sizes right here. So I want my base font sizes. This is for mobile screen sizes, and then I want to come in and just make some changes for when things get bigger. And so down here after these, I've moved them down just because I find it weird having a media query in the middle and then having other declarations after it.

[00:08:51]
So after that we can come in with an @media, caps lock on, @media. With, if the width is greater than 960 pixels, which is an arbitrary number, I think it's going to work. We can always adjust that if it doesn't look good. And I'm going to readjust only my font-size 600 to maybe a 2rem, my font-size 700 to a 3rem, and my font-size 800 to a 4rem. And I just think these ones will probably look fine across all device sizes.

[00:09:19]
These ones would be nice if they're scaling up. I'm sort of picking these at random. I'm not a typographer. People who know about type scales might not like these sizes that I'm coming in with. And now if we go full screen over here, we should have some larger font sizes. And if I go into responsive mode to take a look, we'll have our large font sizes that will readjust. They're still not, oh, there we go, they're.

[00:09:42]
So here we can see it's a smaller size, and when it hits this point, it increases in the font-size. In my responsive mode, the zoom levels are a little bit weird for me right now, which is why everything gets bigger when I'm in here, but we can see that happening through those two different points. I'm just going to turn off the responsive mode really fast, again, just so we can see it happening right there at more of a regular zoom level that we have.

[00:10:06]
And again, I think it's working well for us here. You might want to adjust the breakpoint that you're using, you might want to adjust the font sizes, or if you came in with something like Utopia, then you're not even worried about breakpoints, which makes things a lot easier as well.