Typographyhow it's evolved on the web

[00:00:05] Nathan Wrigley: Welcome to the No Script show about modern web design, where we look at what we can build today with minimal software and skills.

Today we’re talking about how web typography has evolved to meet new technological and social demands. We can’t cover all the new CSS properties and units or fully explore what is possible with variable fonts, but we might be able to understand modern web typography through its changing history. David.

How comfortable are you with the topic of typography? Now there’s a leading question.

[00:00:37] David Waumsley: Yeah. not very, I always feel intimidated. We were talking about this earlier. I think we both feel that when people really know their stuff, when they’ve got design training, they know stuff and it’s almost a secret language.

I think that’s a club. Yep. I dunno the secret handshake to get in, but I’m learning stuff and it’s becoming more important to me all the time and

[00:01:02] Nathan Wrigley: think it never felt at the beginning when I was doing websites, it never felt like an important thing. And then I’d open up a book. So when books were the way that you learn about the internet, I’d open up a book and I’d see.

somebody getting into typography and my eyes would just glaze over. there’d be charts pointing to the corners of letters and the kerning and all of that kind of thing. And I think I don’t need to know any of this. it’s hard enough getting the pixels on the page, just I’ll use whatever font comes my way.

but you’re right. And I, feel like a lot of people who have been, very good, capable, thoughtful about typography, I. Maybe they have some background in graphic design, a history of working in graphic design, or maybe they went to some art college or something like that. So there has been a feeling that it’s in a domain that I don’t, usually circulate in.

[00:01:53] David Waumsley: I know. And you were showing me some of the books that were on your shelf there. Yeah. You’ve got things by Elliot J Stock and, what was it? Mark Bolton. Mark Bolton.

[00:02:00] Nathan Wrigley: The, the Designing for the Web, it’s an old book now, but open it up and it’s full of this typography stuff and, actually interestingly.

I don’t think that information in that book has probably aged. If you were to look at screenshots of websites, that will be terribly outta date. ’cause that book’s probably about 12, maybe older, maybe as much as 15 years old, I’m not sure. the, layouts and the capabilities and the screenshots of the websites, they’re really out of date now and you almost smirk looking at them.

But the typography information. It looks as fresh today as it ever did. So that’s curious. It’s this stuff is old.

[00:02:40] David Waumsley: Yeah. And I think what we’re talking about is how we’ve translated some of that historically onto the web here. We’ve not worried about it ’cause we’ve been limited in what we could do When we started with the web, when we started, we.

You had those website fonts anyway, but, but I, and I think there’s also errors that we’ve never even thought of that you and I both been exposed to you particularly ’cause you’ve interviewed a lot of people who are knowledgeable about this. So there’s a lot of things like knowing a readable character length, across the page, something that’s comfortable to read with, something generally under about 70 characters or something.

Underline in text, which we’ll talk about links as we’ll talk about. And, Just generally. also we tended to center things, didn’t we? Yeah. Blocks of paragraphs, which were hard to read. So I think there’s a lot of things that you and I would’ve picked up because it’s coming even to, those communities in WordPress.

We, pick up from a lot of people knowledgeable in that, about that kind of stuff. But

[00:03:40] Nathan Wrigley: yeah. Yeah, whenever I’ve spoken to somebody who is deeply embedded in this kind of thing, I am profoundly. Interested in the level of detail that you can get to with typography? Yeah, we’re, obviously, in this episode, we’re gonna scratch almost none of the surface even.

We’re just, we’re just touching the merest bit of it. But when you get into it, all of the different bits and pieces that make up a letter, there’s so many words that are, ligatures and kerning and all of these different things, and I don’t know what most of them are. Having a conversation though with these people always leaves me feeling, wow, there’s a, that literally is a career just in that, just in learning typography.

But, I think it’s, I think it’s not, I think the ship has sailed for me. David. No, I think

[00:04:33] David Waumsley: we can start to, we can implement a lot of stuff that sat there. I think what makes me interested in it is. Following on from my last chat, we were talking about how difficult it is with images that I know even from the early web when I could look at somebody who knows typography, they can lay out a beautiful site with text only and I just think I wanna be able to do that.

Yeah. Anyway, shall we bring up the show notes?

[00:04:56] Nathan Wrigley: Yeah, indeed. Indeed. Here we go. Okay, I’ll just quick plug about this website, So you are looking at, if you are looking at this and not listening to it, but if you are listening to it and want to look at it, go to no script show. So that’s the url, no script show, and then forward slash whatever episode we’re talking about.

So this is episode 11. no script show slash 11. We’ll get you to this page. And what a, fantastic start you’ve made at the top there, David. That looks like an image. Surely it’s an image. Yeah.

[00:05:32] David Waumsley: it’s type, it’s just using, I think, a fairly new property where we can, and I always forget what the name of it, I mention it later in the notes, so we’ll come to it.

But it’s a, basically a clipping two type. And then we can put an image showing through, so the, type is transparent and the image underneath it is clipped in it. So yeah, I thought I needed to do something a little bit fancy for this episode, yeah.

[00:05:54] Nathan Wrigley: But that is really, lovely, isn’t it? Because just, the evolution of that in the day when we began, that was possible, but only as an image without a doubt.

and it’s not. it, I, don’t know how many people deploy this kind of typography, but that looks profoundly nice. it may not to be ev everybody’s palette, the colors or what have you, but look at what’s possible. Yeah. It’s copy pastable. It is the word typography on a screen.

But you’ve got all these lovely flowing colors in the background and it really sets it off. It’s really alive at the very beginning, so Bravo. Lovely job. Yeah, thank you.

[00:06:34] David Waumsley: okay. Should we start with, we’re looking at changes, so we’ll start with the biggest change probably is the, responsive web and how typography had to change.

So

So we’ll start talking, I think about responsive typography because we’ve gone from that single screen resolution that we could all work to.

So it’s similar to print. Then we’ve gone to. Responsive when we first got our sort of standard sizes for our most mobiles and tablets to now when we can make no assumptions about the viewport size of that our users have, or the pixel density as well that comes with those devices. So we, that’s meant that we’ve had quite a few shifts really, that the first one is from pixels to Rems as our unit for working with type.

And I think with that I’ve put down that it was once hotly debated. and it was up till quite recently, I think, with a lot of people still preferring pixels, still backwards looking on this, but I. And we were talking about this earlier, it’s, been a recommendation for s from the W three C since we’ve had CSS three, which is going back to 1999.

So 20,

[00:07:52] Nathan Wrigley: 25 years that everybody’s ignored it. Yeah, but that’s because that’s, largely because. They weren’t able to use it. The browsers didn’t keep up. Exactly right. Exactly. Yeah.

[00:08:05] David Waumsley: And I think it still continued on because, It’s, not just that, that the technology wasn’t there to allow us with rems, it’s just that we’re so used.

people have to convert often from a pixel perfect design onto the web, and they’re used to working with pixels rather than, having something which is just non-static at all with rems. But I think the argument’s over, and I don’t think you’ll find any experts that will. For pixels now because of the accessibility, because of the fact that it is.

you’re unable a user’s unable then to change their browser settings if they want something large and have that honored and have everything, proportionately changed. So I think REMS is definitely it because it’s more manageable, it’s more scalable. You, can change your mind about the overall size quite easily by changing the root percentage.

[00:08:59] Nathan Wrigley: But, I guess a reason for. This not becoming the default also is because it’s so much less intuitive to understand. It’s there’s, some weird number that you put in there which isn’t necessarily an integer. And because of that it’s hard to ga gauge what that means. And based upon what you’ve got as the root font size them, it might look different.

Whereas with a pixel you put in 30 and assuming you’re using the same font throughout the website, you know what that’s gonna look like. And. 15 will be smaller by this exact amount, and 50 will be bigger by this exact amount. But, but it doesn’t allow for the capacity to change it. I guess a trick in the page builders that we’ve used is to use media queries and then change the font size within the mobile view and all of this kind of thing.

But, better to just set it up once and get it right with, leading onto the next point, media queries and fluid typography.

[00:09:59] David Waumsley: Yeah, exactly. REMS on their own. I, suppose they weren’t as convincing us pixels and why the debate went on until we really got, viewport units and calc allowing us to move from media queries where we’re saying, okay, it’s gonna be this pixels at.

This view port width and there’s gonna be, now we’ve moved to fluid tire topography where we can use Cal and let the browser calculate it first. So I guess why the, why we’ve everybody’s accepted REMS now is because of the fact we could use fluid typography and we’ve got these generators that takes all of the chore outta the maths.

And my recommended one is the utopia. One, and there’s a presentation I’ve linked to it on the show notes there, which is worth watching by Tris Midford, who talks about not only their tool and what they’re doing with it, but just generally fluid design. And it’s made it so much easier because now, if I want to do anything now, I just go over to their tool and I say.

And it starts with pixels. You put in what you want, right at the smallest size, your base layer

[00:11:04] Nathan Wrigley: going. Yeah. Yeah.

[00:11:05] David Waumsley: You say, what do you imagine the pixels to be there? What do you imagine its largest size that you are accommodating. Put the pixel value expected and it does the calculation between those two points.

And it also allows you to change the typography scale, which is. Another thing again, which makes typography so much better. It’s like musical notes. There are set types of scales that you do, so the spacing, and it will do all that for you. So as it’s condensing down to a mobile, the type of scale that you might have at a large size.

There needs to be less space between, the lettering and stuff. the text itself,

[00:11:39] Nathan Wrigley: I, confess I’ve not used that tool, but it sounds like a really valuable thing. So just in case you’re listening to this on the audio, Google Utopia, CSS generator, and if you are able to get to our show notes, there’s a link.

Directly there, so I should probably check that out. I confess I didn’t.

[00:11:58] David Waumsley: No, there’s a num I, I’ve done a small video where I’ve mentioned it as well and using it, and I, it’s my favorite one. There’s a lot of ones out there. Why I like it is because they’re, they use it all the time. There’s a few good designers.

Andy Bell is one of them who uses it. All the time. and they’re using it in Clear Left, which is, Jeremy Keith’s agency as well. So they’re supporting it. So they’re really keeping up to date on things that are changing with typography as well. So that’s why I like theirs above all others, but Okay.

Yeah. Yeah. and it’s got other things that go with it. Spacing as well, which I used. yeah, so I think, yeah, I never connected the dots until we started talking about the whole REM thing, but I think it’s, everybody’s jumped to rems when you can see, you can use the fluid typography.

So that seems to be the way I.

[00:12:47] Nathan Wrigley: We should probably say at this point what the fluid ty, what fluid typography is, and if you’ve never en encountered it, and you are using, I don’t know, media queries to change bluntly, you’ve got a, I don’t know, a, font sizing pixels for desktop, a font sizing pixels for tablet, and a font sizing pixels for anything less than tablet.

Call it mobile, then. This is different. This is where the, this is the allowance with fluid typography. That the, width, it’s, it is a complete linear scale. If you, enlarge the, view port, given the constraints or what, what CSS you use, the typography will just grow proportionately and then reach some sort of maximum.

So if you’re on, like a giant eight K monitor, it’s not, gonna be truly enormous. It’ll max out at some point that you set. But, it’s beautiful watching it when you actually just grab the handles of your browser and reduce, enlarge, reduce enlarge, and you see the font size growing and shrinking.

And actually if, you think about that’s what we should always have had. I. I wish we had that, but we didn’t, tech technology didn’t allow for it, but that’s exactly what you want, right? I’m on this size device and it’s halfway between this and this. So the font is there and it’s perfectly aligned for the viewport that I’ve got.

Yeah. it’s a shame that it’s now a new thing rather than this has been around forever and ever since the dawn of the internet. And it’s a kind

[00:14:13] David Waumsley: of compromise with it. ’cause I think when it first came out with the fluid typography, it was just saying, oh, we could use viewport width now to do everything right.

And then you realize that you have to anchor that a little bit with a REM in there to make sure that, because if you do that, then users can’t zoom out on their browser. So you there’s a strange anchor and the mass of it become very difficult. So you are not absolutely fully assure, unless you, move.

Your browser to see how it’s responding. But it does get over that big hiccup in the fact that once where we have used the responsive to set them to our known mobiles and tablet sizes, we found that many are just before the break point that you might be reaching and then suddenly their text is out proportion to the size of their device.

Yeah. And you get this horrible jump in, so it gets rid of that. Yeah. And it’s, it is lovely, isn’t it? yeah. I think another thing that’s changed, at least for me, this might be my ignorance, but there’s a sort of move away, I think from our browsers would generally sort out the spacing on an element by element.

Basis, or we would style elements. we would put the margins of the paddings that we wanted on our individual elements. Now, I think there’s more of an interest in looking at flow because we want to control uniformly the. The space that we’ve got between our paragraphs and stuff. So there are a couple of, again, a couple of things that I would recommend for this.

One is the stack, which is on every layout, which is, again, Andy Bell, who I’ve mentioned, and probably a key person behind this is Hayden Pickering, because 10 years ago now, he came up with something called. atomic, which you called the No, it was the Lobotomized Owl. Oh, this little selector.

yeah. Yeah. it’s, he always had this problem, so if you put pad in padding on the bottom of your paragraphs, then the last paragraph would always have that padding that you didn’t want. So he’s used this little technique to be able to. Effectively set it on the top of your paragraph, but by using these Lobotomized owl, it’s a child so that, so he doesn’t select the first one.

so there’s something that you can uniform the spaces. And there’s also a wonderful demo as well. Definitely recommended. I wanna watch it again by, Mike. May who’s a really good person on typography and he is got lots of tools as well, that you can use, but is on a show by Ben Meyers called some antics Do dev.

Oh, that’s clever Semantic. I love what a clever name. Yeah, And you’ve gotta watch that. if you’re really into typography, I’ve gotta watch it again. ’cause I didn’t, it went over my head. But it really discusses that whole idea of flow and he sets it more manually. But, yeah, and I think that’s a kind of fairly new thing.

[00:17:07] Nathan Wrigley: Again, links in the show notes, both of those things. The stack and the typography demo by Mike May, my, I’m not sure, is in the show notes. And then we’ve got these new units, which honestly I don’t know anywhere near enough about, so I’m hoping that you are actually gonna school me here. This’ll be interesting.

Yeah,

[00:17:27] David Waumsley: I’m pretty poor on them. One that I do use. So we’ve got ch which is for character, so we can set our. Width of things by the character length, which is really, useful for that problem that I mentioned earlier about the fact that we tend to, or I did, tend to put too many words. I. On a full view.

so it’s not very readable. You can set with your character length, and that’s what I’m doing actually on the site that you’re looking at. So what’s setting the length of the inner container here is the characters. I think it’s set at 70. So effectively the text within that can expand beyond that. So a lot of people are using that in part of the responsive design.

if you set that maximum on all of your paragraphs, then wherever you’re gonna place ’em in your design, you know it’s going to be. Fairly readable, you said?

[00:18:15] Nathan Wrigley: Yeah. That’s

[00:18:15] David Waumsley: interesting.

[00:18:16] Nathan Wrigley: Okay. That’s fascinating.

[00:18:17] David Waumsley: Yeah, and something I don’t think I’ve ever used yet, which is X, the Ex.

Which is ex Yeah. I’ve never used this. No, it’s based, it’s a little bit like M’S are based on the, the font, M size, and we get REMS from that because we get root elements. X is the same. It’s something in typography, which again, I don’t understand, which is set in the, height of the X basically is something measuring.

So when you get clever people like Mike May, who knows how to use these, they will actually use that value for setting the heights. They will use that for. Knowing what is the correct line height to put according to the font that you’re using? Yeah,

[00:18:59] Nathan Wrigley: this rings a bell. it’s got, it has got some characteristic of the letter X, hasn’t it?

And I can’t remember why that letter in particular. Maybe it’s just got certain height or width ratio. Yeah. Can’t remember, but yeah. Okay. That’s fascinating. So not the letter X, but EX in this case. Yeah,

[00:19:18] David Waumsley: EX in this case. I’ve never used it yet, but it’s really for, if you do understand that you might be setting certain things against the, X value of the font if you really understand the font you are using.

So you are styling into that. Yeah, it goes a bit above me. And then of course we got the. We’ve already talked about them. We’ve got the sort of a viewport width of Viewport height. We can start using an viewport minimum of Viewport Max. And someone like Mike May, again, I really don’t use V Max yet, but he might use it to section the sort of space he will put on sections of his site.

So his header, his footer, his main, The leftover space at the bottom, he’ll be setting this to percentage. So depending on the browser itself, it will allow a little bit more space or less as needed. So again, it’s, it’s one way of doing it. But again, I use other things in Utopia for spacing to, set spacing so it changes according to the size of the viewport.

So there’s lots of different ways to skin this particular cat, I think.

[00:20:19] Nathan Wrigley: Yeah. And no doubt a Google around each of these will give you, yeah, a lot more information. But yeah, some of those a mystery to me. Some of them I’ve definitely used. Okay. Shall we move on? Yeah. Yeah. Accessibility.

[00:20:33] David Waumsley: again, that’s a big.

awareness boost that we’ve had recently over accessibility, maybe because it’s becoming law for us. So if we do it professionally, I guess we should be aware of these things. So there’s a lot of changes there. we’ve talked about this before. There’s, we’ve really gone from this western bias on the web to now having writing modes and internationalization.

Yeah. So we, I think we talked, Rachel Andrews talked about that when we were talking. I think it was in episode three when we talked about how we need to know this concept to know our CSS layouts. But there are lots of other things coming along with that. I noticed, I was just listening to the latest release, on Chrome where they have started to put in place something so you can.

Deal with, Chinese, Japanese, and Korean characters and stuff, and kind of space those out, Oh, interesting. That’s a big shift. Interesting. Yeah. Okay.

[00:21:34] Nathan Wrigley: Yeah. So we were saying before the call began, weren’t we before we hit record, at least that, at least I don’t, really even think about the, web as, a Chinese.

Character thing. Yes. if I ever see something like that, I, I’ve clearly strayed into an area of the web that I can’t access ’cause I can’t read Chinese. But just think of the population and the fact that all of these browsers in the past, at least anyway, were really configured for, left to top to bottom.

Yeah. and the character set being, a Latin alphabet. And of course most of the world don’t, use any of that. But, but we’re educated to think about that. and even, the things that we’ve been talking about, the ex is based upon the, Latin character X and so on. And I don’t even know where to begin with typography with.

I don’t know, a Chinese character set. I, no idea what the concerns are there. I do know that there’s a history of, calligraphy and making those characters look beautiful. I would say even more so than we have in the West with our typography, that there seems to be a real heritage in, I. when they paint the Chinese characters, making them look beautiful and adding weight to certain strokes so that they enlarge in one part and diminish in another, and then, tail off into sort of, almost nothingness.

I. Yeah. And, yeah. Fascinating. I’d, love to get

[00:23:10] David Waumsley: into that. It’s interesting ’cause I think the new things that you brought out for them is, a word break and auto phase for them. And also trimming because how, how their text is getting aligned in the sort of spacing isn’t. Always perfect on the web and kind of, this is all still new stuff.

It seems incredible that you should have such a large population of people Yeah. Who have not been accommodated so far on the web. But that’s definitely a change and it knocks onto us. ’cause even if we never deal with those, we’ve had to understand things like Flexbox and grid layouts in terms of writing modes.

We’ve needed to have that concept to be able to align things properly. So yeah, that’s a massive change. Shall I move to the next thing? sure. That is our shift away from what we had when we started, which was only web, say fonts or system fonts to this abundance of open source options. Google fonts particularly, and then back to, I think I.

And it’s not, this is, this keeps going backwards and forwards I’m sure to a few quality fonts that you use that have all the character sets that are, flexible or a trend a bit back to considering system fonts again, I. So I did a little video on that one before, which was [email protected], which allows you to see what, what fonts are available on different systems.

And you get a little screenshot of it as well, so you can see how they might pan out if you do want to use them. But there’s a real, I. I think from a accessibility point of view is the fact that probably what helps people with dyslexia above anything else or other things is familiarity. So if it’s your system font that you’re using for your body text, if that’s an apple.

What we should be seeing there, I think should be San Francisco on your screen. this is a variable font. It’s a, font that we couldn’t license and, for many people that’s just gonna be familiar. So it’s a good font to use perhaps, rather than bringing in a custom one where we don’t need to, where it doesn’t add any extra value.

[00:25:19] Nathan Wrigley: Yeah, I think we all got a bit carried away when Google fonts came around, didn’t we? Dumping, just dumping every kind of imaginable font that we could because it looked quirky and interesting. And I, think you’re right. I think there’s definitely a move away from that, in the WordPress space and CMS space and, webspace, localizing those fonts, I guess is a, recent endeavor.

But, GDPR and all that kind of thing. But, but I, think you’re right. I think going back to system fonts and something which is familiar. for functional text. Text, like we’re seeing on the screen now where we’re just trying to get information from us to you where the flare and the novelty of it is really not the point then.

Yeah. But obviously if I was to go to, I don’t know, the latest band’s website, the latest pop stars website, where that sort of creativity is trying to be emphasized. Maybe the bit about how tickets, how much tickets cost, and where the venue is. Maybe that’d be a web safe font. the bit about, what the artist does and who they are, especially the headings.

You you, still feel you’ve gotta go a bit knots with that because, ’cause it, that’s part of the whole typography thing is allowing you to be creative. But I’m like you, but maybe it’s ’cause I’m old and my eyes are starting to fail a bit more. I’ve got glasses on and things I want, I would just want clarity.

I just want everything to be, the contrast between the background and the font. To be clear, I need it to be readable. I need it to be spaced out and I, I honestly don’t care too much for the, for the snazzy fonts.

[00:26:55] David Waumsley: Yeah, and I, just think, obviously with the other pressures, the kind of green pressures and the speed pressures as well, that, if there’s not a good reason to argue for a custom font, we don’t necessarily stick it in and, but that’s not been my thinking.

For the last 10 years, it’s been like, woo. Which, of all these fonts that, Exactly.

[00:27:14] Nathan Wrigley: Which one might Crow are in? But don’t you have, I can’t remember the last time this happened to me, but when you stumble across a website where they’ve just got text, so imagery is out the window, it’s just, plain background.

Yeah. Beautiful typography, something clear, readable. They’ve obviously thought about the layout a lot. Yeah, it really does. It compels you. It just sucks you in, Yeah. it, it’s, really profound what fonts can do. In fact, we said this before we began the show. The. A website where clearly somebody’s put a lot of effort into fonts and making their typography look amazing.

It it really knocks it out the park. It takes something ordinary and makes it into extraordinary, but it, I don’t end up looking at the font particularly. I just get this profound sense. Oh, that’s clever. That’s really beautiful. Yeah. I’m now gonna go and explore what font that is and what the wits that they’re using and all of these kind of things.

But, yeah, sorry, digression.

[00:28:14] David Waumsley: Yeah, no, that’s fine. the next point in some ways I think I’ve made it already, but, perhaps a trend in that from moving to browser setting the line heights and stuff, or as individually doing it to, and proximity according to fonts use. So in some ways we have some guidance about line height is usually the biggest problem for people not being able to read.

When you’ve got your paragraphs and you’ve not got the right amount, and you can go to something like war gag. the, actually there’s another little thing on there. If you hover over the wagg, you’ll see I’m using, oh, it’s under lined with a, I’m using the abbreviation here. Another bit of typography.

the web content accessibility guidelines. Oh, sadly,

[00:28:56] Nathan Wrigley: our video platform doesn’t pick that up. That’s interesting. Ah, that’s, but, I am hovering over something and on my screen.

[00:29:03] David Waumsley: Ah, interesting. Oh, I can

[00:29:04] Nathan Wrigley: see it. And, it, there, there’s a little, like a, tool tip if you like, that’s the browser has provided, which pops up to, to give me the context of that.

But on, on the video, it’s not come through. There’s, there must be some reason for that. But anyway, there we go. And I think,

[00:29:19] David Waumsley: there’s more awareness of lots of things about giving line height and, the experts will know how to do that against the, fonts. The waggle will give us guidelines, like it should be roughly about 1.5.

it’s a unitless height, so it takes the value of the. The unit for the font that you’ve said. and there were other things that I wasn’t aware of until recently is the, and it’s probably failing on this site. the idea of proximity, the idea that we need to leave a little bit more on a header when there’s some paragraph text underneath it.

The, on the header itself, the space above it needs to be more than the space before you get to the paragraph. So the proximity of the header two. The paragraph underneath is grouped together, and that makes for better reading. So these, yeah, it’s

[00:30:05] Nathan Wrigley: interesting. I’ve always found that to be strange when you look at that, when you see it on somebody else’s website.

I. It looks correct, but when you are in the weeds and you are looking at, let’s say, I don’t know the, padding above a heading, I always want to get rid of it. I want it to go away. But, then when I look at it on the front end, oh yeah, no, that, that looks right because it, you do need to give that little bit of breathing space, don’t you?

That bit’s finished. We’re now onto a new heading. There needs to be a, proportionate gap to show, okay, this is an H four. There’s a. There’s something going on there. This is an H three something and this is an H two something else. but I, always, have this intuition. I want to erase it, but I generally don’t.

[00:30:51] David Waumsley: Yeah. It’s just that, it’s just so you can see what content belongs with what which kind of belongs with the content below. Just proximity is one of those things which I’m becoming more aware of all the time. as you listen to more people who know UX design and have that. Formal training.

I’m just looking

[00:31:05] Nathan Wrigley: for it on this page. And we, you don’t really have too much use of that, do you? You’ve got these great big, I’m guessing these are H twos or something like that, but, it should be, if

[00:31:14] David Waumsley: I’ve done it I probably haven’t, it should have a little bit more space above. Oh, it definitely does.

There’s,

[00:31:20] Nathan Wrigley: it looks like it, there’s a little, you probably can’t see on the screen. There’s a little gray box here and the distance between the v and the box. Oh, no, it definitely is. There’s definitely a little bit more. Okay. Alright, Rob.

[00:31:34] David Waumsley: the, next point under accessibility was just a, move, that we’ve seen, I think recently about earlier we tended to see underlining as visual clutter.

something that you, on your links I’m talking about here, to now respecting it as a essential. UI and I think we’ve been given some new tools that go along with that one that I most and I’m using it all the time. If you see that, yeah, you are where the links are there, there’s a, bit of a space between it, and that’s because of the new property, which is the textline, underlining offset where you can actually offset that line.

So we, none of the descendants are touching on it. and also you can set the. Thickness of that line as well. You can make it a little bit thinner and obviously you can color it. So we’ve got a lot more control over our links. Now

[00:32:23] Nathan Wrigley: I really like what you’ve done here. So obviously the descender, the G here in, in whatever font this is not particularly, it’s not particularly long.

The G doesn’t descend that far. Yeah, but still. The, little gap that you’ve got here, which is bigger than I would expect normally is nice. it really does make that kind of feel like it’s, I don’t know, it’s not breaking up the, flow when my eyes going from left to right and reading through it, that line is out the way.

Yeah. So I’m able to read it as normal text and keep going. and I do the fact that the line isn’t broken up. and, sorry, one last thing. And I do think that this has to become the default, doesn’t it? I think we all just need to settle on underlining is the way to do it? Yeah, just let’s all go back to underlining please.

I.

[00:33:10] David Waumsley: It’s become a, I think, setting also this offset, is quite nice. And I think some people have put it in their CSS resets if there’s no other style against it or class against it that will be there. Stephanie Eccles does that and and I think that’s. A really, it’s only recent this, that we were able to do it.

So I can see why people are wanting to remove stuff, even though you do break up the line by default of browsers. If there is a descender, it can be a little bit uncomfortable to read. But yes, I think the argument now is that we should, and, to be honest, we’re just going back to arguments that we’re there from the nineties, so we,

[00:33:47] Nathan Wrigley: yeah.

[00:33:47] David Waumsley: Jacob Nielsen, who was always saying, you must underline your links. You must underline your links. And somehow we got designers got into the idea that it was just a bit clutter and we’ll remove it, it’s fine and it really isn’t fine. And the way to know that is just imagine I. That you can’t see color, and then you’ll know it’s not fine.

And imagine that. Yeah, that’s a nice

[00:34:06] Nathan Wrigley: way. Yeah.

[00:34:07] David Waumsley: Simple. Or, imagine that your device is a black and white device, a monochrome device. Yeah. And suddenly you’ve removed what the web basically is. It’s,

[00:34:17] Nathan Wrigley: yeah. That’s really a good point. Yeah. That’s a perfect encapsulation of why. It needs to be that way.

If you are, if you cannot see color, just imagine it in black and white. And here it’s pretty clear. Also, I guess your, the, line height, the gap between the, this, row of text and this row of text is enough to allow that. To breathe, if Yeah. So the, under, let’s, yeah, this is a better example ’cause you can see more of it.

The underline here, you’ve got the offset, which is quite generous, but still not too much. But it’s still not interfering with the road. Be below the, the line below it. This is still not being interfered with by this. And you can actually see that in the. The way it’s being highlighted. So that’s nice. nicely Don David,

[00:35:03] David Waumsley: basically.

Okay, we’re using system fonts here, so I’m not actually sure whether, the line height is right on yours as it is on the one that I see on the Interesting. So, it’s a bit of a guesswork on that, I think. Anyway. Yeah, so I think that’s definitely a move. And it was, it’s down to the fact that we had frameworks like Bootstrap, which were hugely popular, that didn’t underline their links by default.

It’s changed now. Bootstrap. Yeah. But anyway. Okay. Should we move on to the

[00:35:29] Nathan Wrigley: next

[00:35:29] David Waumsley: bit

[00:35:30] Nathan Wrigley: of technology? Yeah, we’d better race, actually. We’re on. Yeah, we’re on. not, I’m not sure exactly how long, but we’ve added up quite a few minutes. So let’s just put the, put the pedal to the metal. Is that what they say?

Something like that. There’s a lot to

[00:35:42] David Waumsley: cover here. Yeah. Variable fonts. We can cover them. Fairly quickly. there’s a big, change in the fact that we used to have to support multiple font formats. ’cause there’s a whole history with them. So we had the TTF, the OFT. I can’t remember the what they stand for now.

But no, there were a whole history, I think you know, the true type form. There’s the first one that was Microsoft and Apple getting together back in the eighties. And then you get. Variations that have come on those to make them fit better with the web. Things like, I think the OFT added ligatures and things like that.

And then we’ve got the embedded ot, which was the one to work very well with IE. And then finally the world, worldwide web consortium got together and had a body for, fonts. And then that’s when we got Wolff.

[00:36:35] Nathan Wrigley: Honestly, if you, if you get me to transcribe this with AI software, the last paragraph you just said will be so interesting.

[00:36:45] David Waumsley: So, we get the web open font format, which is what we’ve got. And from 2010, so this is really the recommendation from the Ws. Three C from 2010, and then they further optimize it. So we get WF two now support is there for WF two. So we’ve basically gone from having to support all these, this history of formats to really being able to pretty much, unless we need to support IE, to get away with WF two, which is wonderful.

Yay. Yay. What do, yeah. And the, great thing about this, which leads us really to the variable fonts is the fact that, the. That’s the format for variable fonts, and I think that’s the big trend now is the fact that instead of having to load individually the weights or the italic versions of the font that we’re using, is that we can have this all within the one WF two format and use CSS to fine control the weights.

So if we want some. Bizarre weight. So we want it, instead of it going from 300 to 400 and we want 3, 2, 5, or something as the exact weight, we can do it with the variable fonts. And if we want our italics to slightly slant in a different way, we can do it with the CSS. So I think that’s really exciting, at the moment that we can do that.

Downside, of course, is that you. if you’re only using a couple of weights or something and you’re not using all this extra, then they are a bit heavier than loading those individually. And finally, yeah, we put down, which I think we’ll just skip ’cause I think we’ll need to come back to it ’cause I don’t understand it.

Color or chromatic fonts. Chromatic is the correct

[00:38:25] Nathan Wrigley: word. no. I have no understanding of this. Anyway. It’s a thing.

[00:38:29] David Waumsley: It’s a thing. Yeah. And actually it brings in a new format. I think it’s taking one of the old formats with SVGs and I think there’s not clarity over what that is. There are some, Google fonts out there, which are chromatic fonts that you can play around with.

I, don’t quite get the value yet because I

[00:38:45] Nathan Wrigley: don’t, yeah, I’m on trying to understand what the purpose is, if you, we can set the color of a font fairly straightforwardly in CSS I’m interested to see what the benefit is. What, are we getting out of it? Is it that fonts can be, I don’t know, can there be gradients in font colors, or.

I, yes,

[00:39:04] David Waumsley: exactly. I think it’s exactly that and I think, you can do a lot of the tilting and rotating and stuff of your fonts, which can create some lovely effects. But in the ones that I’ve seen around, the only thing where I could see I’d use it and, effectively it’s no dissimilar from what I’m doing on the top header of this post where I’m got an image coming through.

So where I’ve seen a color font being used, say it’s saying the word pizza and the background, the images of pizza and. Think, I’m not going to load this quite heavy color font to do that when I can do it with a, kind of simple. Clip masking like this for myself, so yeah. Yeah. The value’s not there yet for me.

Okay. We’ll have to see. Perhaps I don’t understand it. yeah. Alright. That’s

[00:39:45] Nathan Wrigley: variable. Fonts. Now we’re onto some lesser used specs.

[00:39:49] David Waumsley: Yeah, I just wanted to mention a couple of things on typography ’cause they were relatively new to me, so I put an example up on there. So something which is really when we’re talking about responsive again, it’s not used and that’s CSS columns.

And actually this is so cool. This is so great. Yeah, it’s, it is just simply that you can set. Columns for any of the things that you want, and you can make it responsive. It’s not by default. So if we have a column count of two, it wouldn’t be responsive. We’d, we would need a media query. But what I’ve done on here, because there is a, limited space anyway, I’ve put it so it’s just magic numbers with this, but I’ve put it at 18 res here.

So it’s created two columns while there’s more than the 18 res to it. But if you. If you zoom in on this one, it will just automatically,

[00:40:36] Nathan Wrigley: see what we get. Oh, collapse. Probably make that in the center. Zoom. Let’s put that right in the middle there. So I’m gonna collapse the screen. We’ve still got two columns.

And there look, there we go. There’s some magic moment there. It collapses down into the one column. That’s super useful. That’s great.

[00:40:54] David Waumsley: So sometimes we just, bring in grid and all of that stuff where we could simply do it with CSS columns. It’s been there for some time. I think the spec’s been tightened up.

I think, It’s, Rachel, Andrew has been working on this as well, who worked on grid quite a lot. So anyway, it’s just a really cool trick which gets ignored. And I think there are lots of other little things which I’m just becoming aware of. So I’ve put a drop shadow in there. It’s another little bit of, on the t on my paragraph there, it’s.

If you see that it’s, I’ve styled it slightly different, used a different font, and it’s going over one and a half of the text a little bit more because I’ve put a little border around it on there. And this is something, though, it’s not very well supported at the moment. So it’s a combination of using first letter as a, pseudo.

Element. Or class, I think. And then initial letter as a drop cap to do that. So these kind of things. Yeah. And then there’s a whole thing, I won’t go into too much here else, we’ll go on forever, but I think there’s a whole lot of HTML, which we underuse. So I’ve just given one example here where I’m using the keyboard one, rather than having to pull in an image, I can style the the.

KBD tag and create this kind of little control shift, enter keys or any key that I want. Just with CSS.

[00:42:19] Nathan Wrigley: They’re nice, aren’t they? They look really nice.

[00:42:22] David Waumsley: Yeah. I think all the pros, the people who’ve been in this game longer than me will put these in their explanations, but I think it’s, definitely worth looking at lots of, HTML because we just don’t use many of the tags.

Like Mark, we don’t use, we don’t often put a. Different styling for time. All of these are tags which we often forget about, particularly if we’ve come from a background of A CMS, we just put those in. and, I’m using one actually on the top of the title there, so I’m actually using one which I’d entirely forgotten about until I started writing this, which is, the, let me just find it on the notes so I get it.

There is one called. Somewhere. There it is. It’s WBR, which is, there it is. It’s basically, yes. It is given a width, it’s width break opportunity, I think. And if you go to the top of the site here as I’ve got a huge, typography here. I’m actually using that to separate typo and graph. So if you slim in on that one when it hasn’t got the room, oh, this is good.

This is, we

[00:43:30] Nathan Wrigley: didn’t do, we didn’t try this before the show started. No. So I’m making it smaller. We got the word typography. It will eventually break. Yay. Look at that. That’s so

[00:43:39] David Waumsley: great. So you could tell us where, if you really do want to keep your massive font or something, you might want to decide where it breaks, and that’s an opportunity to do it.

Unlike a regular break, which will just break it for everybody. This breaks when there’s the opportunity to break. You can set it wherever you like, multiple

[00:43:54] Nathan Wrigley: things in one word or. Yeah.

[00:43:57] David Waumsley: Yes. Yeah, exactly. So it’s just sometimes you want your word to break in a different way. Yeah. If you’re gonna keep it big, probably I should have just made it small, but, okay.

I think that’s probably enough ’cause I’m covering, yeah, the stuff. Let’s talk about the new spec, shall we? okay, here we go. Couple of things here. That’s, one that’s only in Safari only, which I think is really handy, which is hanging punctuation, which will allow, and I’ve heard this being talked about a lot.

People get annoyed at that. If you’ve got a block quote and the, you styled up your quotes on what, you’re gonna put the quotes up there anyway, those quotes are going to indent your text. Yeah, And it’s a lot easier if people keep. Running down vertically and see everything aligned.

So what hanging punctuation could do is to make sure that you get to choose that it goes outside. So you’d have to use a lot of CSS to try and force your right. Yeah, there would be a lot of negative margins and all that nonsense. So that’s quite cool, when it’s supported. But it’s safari only at the moment.

We’ve got font size adjust, which I talked about, about a year ago with doing stuff. Performance. it’s just, it’s the most useful thing is the fact that you can adjust, some of these fonts. Usually a fallback font, which might be a system font or something. So you can change its X shape, you can stretch it out a little bit so it can better match.

I. The custom font that is waiting to load. So it stops this sort of jarring when it’s going from the system fallback font to the custom font loading in. So you can line them up a little bit better with that. it’s limited availability at the moment, and there’s, font ing, that’s fully supported at the moment, which allows us to, Browsers Will, kerning is spacing basically between letters. Yeah. Yeah. Browsers will do that for themselves. If you want to force it, you can force it so that it’s set by the font or you can let the browser do it, or you can just turn it off altogether if you are controlling that. So that’s a, fully supported thing, but fairly new.

And finally, the thing that was. Making the, my title with the image coming through it is the background clip, which is beautiful. yeah, quite new but widely available now, and yeah, it’s just used for clipping backgrounds on there and it’s useful with text.

[00:46:19] Nathan Wrigley: Okay. Okay. So they’re all in the show notes?

no. All in the show notes, no script show slash 11. And then you’ve got a little flourish at the end here, haven’t you? You’ve got something nice to. Yeah, if you scroll, scroll. Now. I scroll up. Scroll up. Hold on. I’ll wait for it. You have to see this or go to the webpage. okay. I’m gonna scroll up slowly.

That little word typography, which is orientated at 90 degrees is fading in and out. I’m noticing that. What am I waiting for? Oh, at that,

oh my. Yeah. Wow.

[00:46:52] David Waumsley: You’ve even got a little bounce going on there. Yeah, I borrowed it from somebody else. I must credit them, and I’ve forgotten who it is. It’s somebody I do follow and I’ve forgotten, but I’ve amended it slightly just for hours. But yes, really this is just to highlight just the last bit of change, if you like, in our history, and I think this is really significant, only in the Chrome at the moment, but we’ve got scroll animation, which means that we can do a lot of.

Cool animations and stuff, with our text as I’m just showing off here. It’s a little bit over. It’s great though.

[00:47:21] Nathan Wrigley: Isn’t, that brilliant. and again, obviously the purview of JavaScript forever, this was, the only way to do it and now all of this stuff is coming to CSS. Yeah. it is a bit flashy, isn’t it?

There’s quite a lot going on there to make you make your eyes water, but you get the point. It doesn’t have to be quite so dramatic as that, but something subtle. Something just sort fading in or moving slightly to the left or the right could be very profound. That’s lovely.

[00:47:48] David Waumsley: I think it’s really nice that it’s coming to a lan, language that we can understand, rather than JavaScript and you really rely on languages and it makes it a lot easier.

So if your, browser had been set to prefer reduced motion in some form or another, then you won’t get that bounce and you’ll get the fade in slightly. You won’t get the bouncing because it can just wrap that in the CSS to be able to do that. I, I. That’s great. And I’ve also put the tilted text here just to show that we can have some fun with writing modes these days, and particularly if it that’s combined with the better positioning that we’ve got.

So it, it’s maybe not lined up perfectly ’cause they had to do it quickly, but it’s using grid to put it side by side. So Grid and Subgrid given us the ability to place more accurately our texts and we can, as we’re showing here with the writing mode changing that we can turn it on its side.

It’s nice. It’s really nice. Yeah. Yeah. And that’s it. And I just think that’s the way things are going. I think typography is becoming a big thing. People are using blending, filtering, masking, overlapping with other elements and all these kind of things to tell stories these days on their web and need less images.

I think you can do a lot with good typography, and it can all be. Fully accessible. You can turn off the styling and anyone can read the text document screen. Readers can read it. So I think typography just come such

[00:49:15] Nathan Wrigley: a long way. I think this episode has been profoundly interesting. Can I urge you if you have listened to this or even watched it on the screen, go, to no script show.

I keep saying I’ve, I’m sure I’ve said episode 11 throughout this whole thing. And of course it’s actually episode 12, isn’t it? Yeah. I’m sorry about that. anytime I’ve said episode 11, ignore that it’s actually episode 12 and go check it out. No script show slash 12. I’ll correct that in the, in the transcript hopefully, and go and see, what marvelous things David has put together.

It’s all there loads of links, loads of opportunity for you to learn and figure out all this stuff. Wow. For yourself. Learn with me.

[00:49:55] David Waumsley: Yeah, it’s, yeah. We bitten off more than can chew really with this episode. It’s gone on quite a long time, so we’ll probably have to close up. It’s been a long one,

[00:50:03] Nathan Wrigley: so shall we.

Shall we knock it on the head there? Yeah. Okay. We’ll be back soon. Who knows when? We don’t have a set schedule, but we’ll be back at some point in the near future with episode 12, no 13 saving himself. So I’ll see you next time. Thanks, David. Yeah, thank you. Cheers. Bye bye.