Typography for Reading

[00:00:00]
>> Jason Pamental: So now that we've got the web fonts loaded in, now we wanna make sure that we're doing something with them to provide the best possible reading experience. So it may be overstating it a little bit to say it's the absolute perfect page, but I've tried to kind of put as many different techniques and tricks and little bits of finesse in here as possible.

[00:00:24]
So the first thing we're gonna look at is thinking through that proportion and scale in the way that I have been doing it, which is by setting up several break points and different sizes along the way. And then also looking at how that might work using this newer method, using CSS variables and calculations.

[00:00:45]
So it looks something like this, where designed from mobile first, so the smallest one is up top. What is the font size, and the line height, and margins to get the effect that I was looking for on the small screen. And then once it reached a minimum with the 43 and three-quarters ems, which is somewhere in the neighborhood of 800 pixels or so, I think.

[00:01:15]
The font size bumps up to 2.5 letter spacing is normal, line height is a little bit greater, it's a little bit smaller, excuse me. And then margins are offset a little bit differently, and then once you get onto more a desktop sized screen, more in the neighborhood of 900 to 1000 pixels, then it's up to 3 or 3 times the size of body copy.

[00:01:38]
Letter spacing again is normal and line height is different again, and so on and so on, as many breakpoints as you really need to define to get the design looking the way you want. And that's usually paired with h2s that stay in context, and h3s that stay in context.

[00:01:59]
Always looking at, what is the minimum size that you want it to be on the small screen and the maximum size, and then just picking the values in between so that everything kinda grows and scales together. But if you start to think about all the extra stuff that goes along with this if you have the H1 and two or three or four breakpoints and you wanna style the fall backs at each one of those breakpoints, there's a lot of CSS to maintain, so it really does start to add up.

[00:02:28]
And I've done it before and it's certainly possible to do. And SASS does make it a little bit simpler to write because you can keep everything nested together. But it's a little cumbersome, so as you want to create more intermediate break points for more different classes of devices, then it does really get a little bit out of hand.

[00:02:50]
So it would be nice to have a little bit easier way of dealing with it. So with a variable font and using this technique, we can simplify things a little bit. One thing I want to point out, the syntax for writing the @font-face declaration at the moment is really no different than using a non-variable font.

[00:03:16]
It's supposed to be truetype-variations or waf or waf2-variations. It's just not implemented in all the browsers yet. So there are some bits of this where this is how it is now, this is kinda how it's supposed to be. You have to test and look in a couple different browsers to see what the state of support is.

[00:03:40]
But then you can go about writing your CSS in a relatively normal way. And if it sort of falls outside the bounds of those few different things that you might want to declare, then you can use font variation settings to specify them all together. One thing that's worth pointing out, I don't know if I said this earlier, the registered axes need to be lowercase.

[00:04:07]
For those four letter abbreviations, custom axes need to be in all capitals. They will not work if you don't. I think they might work in one browser but they're not supposed to. Generally speaking, they probably won't work in the majority of browsers if you get that wrong. There's really only five at the moment, width, weight,

[00:04:30]
>> Jason Pamental: Width, weight, stretch, oblique, and, well, slant, and optical size. Those are the only ones that you might use.