Q&A Responsive, Progressive Fluid Typography

- [Audience Member] Hi, Mike, how you doin'? I was just interested in knowing more about what you know about the variable fonts technology and what barriers you see to that being implemented in browsers and in the code? - So I know that it's already being implemented in lately built of Safari, and I think Firefox recently? But I'd have to double-check that. So it is slowly coming. And I guess if people start developing fonts for it more, people are gonna start using it. One thing that I didn't mention is that one of the big advantages of it is it's gonna mean less download. 'Cause at the moment, if we want to have a font weight 400 and a font weight of 600, we're gonna need two different files for that. And it'd be really nice for a lot of designs to have 10 different font variants to show all the different aspects of the design. But we can't do this, we normally have performance budgets and stuff to limit that. So it will solve that problem and I'm really interested to see that and how that happens. Is there anything else in particular that you wanted to-- - [Audience Member] No, nothing else in particular. Nothing else in particular. My software is not yet capable of producing variable fonts. - Yes, okay, I'm not entirely sure about, yeah. - [Audience Member] And I just want to know if you know when we're likely to see this widely implemented. - I know exactly where to find out and I will put you onto that. - So my gut feeling is there's something you should be thinking all about. Specially as someone who creates fonts. So why don't you speak tomorrow about the font, he's creative of the ABC which has a whole range of weights and italics and other variants that we'll find out about tomorrow. Yeah, and it would be an absolute boon for, I think, of the ABC situation, it will be astonishing. The savings I've seen in terms font size are astounding. My gut feeling around it is there's a lot of momentum behind it. You kinda get a sense over very long periods of time tracking standards and, you know, my feeling, once you've got it across a couple of major browsers, and the holdout increasingly tends to be Safari-- - They're moving first, yeah. And a lot of the people interested in are browser implementers so that should help as well. They're the voice in the community. - Yeah, so is it with the browser folks are behind something that tends to happen. Yeah, things that are led by them tend to happen more quickly sometimes than some of the other things that kinda get driven for the community. But yeah, I certainly wouldn't be dragging my heels. Did you use a moderately older version of the software, of some software, don't you, I seem to recall? - [Audience Member] Still waiting for an update. - Right. Well, hopefully the (mumbles), I think, adopt this. Because it doesn't represent enormous barriers to them. It's the same font, all the underlying engines' the same. So it's just an extension of existing technology which is I think another reason why we'll see it adopted relatively quickly. It doesn't have to change a lot of code base in the browser to actually be adopted. Yeah. Time for another-- Did you wanna extend that or that's all good? Alright, okay. Any other questions, was there one over here? No? 'Cause I can barely see, I just see peripheral movement. (laughs) I'm like some sort of newt. - [Audience Member] You talk a lot about kind of like getting rid of the breakpoints? I want to know is what do you think about like actually taking advantage of the breakpoints, or designs and tried to just use fluid typography between the breakpoints? So what I mean is, I have designs where my mobile design is a little bit different than the desktop design, for some reason, so I believe like, okay, it's hard to design for one device only, like a mobile, but it would be good to have just a fluid typography from let's say zero pixels to 360 pixels, then from there to a tally design? We have a fluid for that one? - Yep, you can definitely do that. There's an article published not that long ago about some methods for doing exactly that. You could do what I've shown you without using some of the mix-ins. If you can write that little count equation twice, you can work out how to do that. But yeah, I'll point you to an article as well, where you can find out a little bit more about that. - [Audience Member] That made me think about that. Websites like the BBC where they have a sidebar? It's really annoying to, I think it's not a good idea to have that sidebar. It's still a sidebar on a mobile. So it's kind of like you need that breakpoint so you can move that content. - Yeah, I mean you can still use normal breakpoints and other, you know, changing design, at particular breakpoints is still something that's valid. We shouldn't use just fluid stuff or just (mumbles) stuff. You can use them both together. - That's sort of why I fell under the trouble that you saw. I mean, that's the way I kinda tend to design. But I've been trying to move away from it. You sort of have these broad categories of devices rather, than seeing that specific, you know, kind of like 50 breakpoints for, it's an iPhone S and when you rotate it a bit, in China. Right, this is when people start doing breakpoints like that and that way, kind of madness lies. Cool, yes? We have time for one more. What I found with questions is once they start, they keep coming. Lower down here. - [Audience Member] Alright, I'm such a question hog. I was wondering about fonts that are designed for specific sizes like a lot of fonts rendered best at (mumbles) like 12 but if you make them 11.92, you get something ugly, particularly on devices. So is your recommendation is to avoid these kinds of fonts or, I think some people aren't even familiar with this whole optical font sizing thing? I do recommend tackling that. - That's a good point. Some fonts are designed for particular sort of sizes. So I have a font that looks more legible on smaller sizes and maybe you use a different font for larger sizes. And you could, of course, still do. You could, of course still swap out your fonts of a particular breakpoint. I mentioned the weight and the width and the italics of in variable fonts. There may be other axis as well, which is like the thickness of, I don't know, the words for all the, like I'm not a typographist, right? (laughs) But you know, you can thicken the inside of the characters, do you know what that's called, John? Wayne's just gone, yeah. - Wayne got it. He ran off. He's the guy that knows this. Where is he when you need him? - So, what I'm getting at is you might be able to have a font that will dynamically vary aspects which make it more legible on a large screen and a small screen so that the font changes as it resizes as well. - Yes. So Hoefler, the font designer, he spoke at a conference I was at some years ago. It was at (mumbles), so if you can have a look, he talked about the reason why their type foundry didn't use type kid and just sort of throw all their existing fonts over the wall, it's because they felt they had to pay very careful attention to these things at various sizes. And so he went into great detail to describe it. So, if you can't dig it up, I'll go and find you. It's a fantastic print. Really talks about the particular challenges of a font that will be actually in many ways quite different at eight pixels than it will be at 69 pixels, and the things that they did that make them all legible so there's definitely-- I think they really finely tuned fonts are definitely doing that. But it's certainly something to be concerned about. In terms of legibility and some. Alright. So if you wanna talk more about this, please find Mike in the break inside, but for now let's please thank Mike Riethmuller. - Thank you! (audience applause) (upbeat robotic music)